| license: mit |
D3.v4入門としてやってみた。
総務省の情報通信白書（平成28年版）より、SNS等のサービス利用度を可視化。
若者のFacebook離れというのはデマですね。。
カーソルキーを叩くとデータセットが切り替わります。
参考にさせて頂いたサイト
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style></style> | |
| <svg width="960" height="500"> | |
| <g id="chart"> | |
| <g id="legend" font-family="sans-serif" text-anchor="end"></g> | |
| <text id="cluster" font-size="64" text-anchor="middle"></text> | |
| </g> | |
| </svg> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <script> | |
| // 変化しない描画要素の初期化 | |
| var svg = d3.select("svg"), | |
| margin = { top: 20, right: 20, bottom: 30, left: 40 }, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom; | |
| var chart = svg.select("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var legend = chart.select("g"); | |
| var cluster = chart.select("text") | |
| .attr("x", width / 2) | |
| .attr("y", height / 2) | |
| .attr("fill", "black"); | |
| // 軸の変化しない部分を設定 | |
| var x0 = d3.scaleBand().rangeRound([0, width]); | |
| var x1 = d3.scaleBand() // .rangeRoundはx0.domainをやってみた後のグループ毎の幅を後でセットする | |
| .padding(0.1); // グループ内の各bar間の空白調整（単位は割合？） | |
| var y = d3.scaleLinear().rangeRound([height, 0]).domain([0, 100]); // 比較のためY軸のdomainは固定 | |
| // 描画単位が国かサービスかで、使うデータセットやスケール類を束ねておきます | |
| var bycountry = {}; | |
| var byservice = {}; | |
| var target = [bycountry, byservice]; | |
| // 色チャート | |
| bycountry.colors = d3.scaleOrdinal().range([ | |
| // Facebook, Google+, Twitter, LinkedIn, YouTube, USTREAM, Instagram, Tumblr, Pinterest, | |
| "#305097", "#db4a39", "#00aced", "#0077B5", "#cd201f", "#3388ff", "#bc2a8d", "#35465c", "#bd081c", | |
| // LINE, WhatsApp, 微博(Weibo), 微信(WeChat), 人人網(Renren), KakaoTalk, Other | |
| "#5ae628", "#075e54", "#df2029", "#7bb32e", "#2266b0", "#fcd411", "#6a737b" | |
| ]); | |
| byservice.colors = d3.scaleOrdinal().range([ | |
| // Japan, USA, China, UK, Germany, India, Korea, Australia | |
| "Red", "blue", "yellow", "blue", "gold", "Saffron", "orange", "Green" | |
| ]); | |
| // 年代のリスト | |
| var ages = {}; // total, 20-29,,,, | |
| // グループ内の項目名のリスト | |
| bycountry.group = []; // Facebook, Google+,,, | |
| byservice.group = {}; // Japan, USA,,, | |
| d3.csv("social.csv") | |
| // 各行の加工 | |
| .row(function (raw, i, columns) { | |
| ages[raw['Age']] = raw['Age']; | |
| byservice.group[raw['Country']] = raw['Country']; | |
| for (var j = 2, n = columns.length; j < n; ++j) | |
| raw[columns[j]] = +raw[columns[j]]; // 文字列値を可能なら数値に変換している | |
| raw['Group'] = raw['Country']; | |
| return raw; | |
| }) | |
| // 加工後のデータが揃ったら描画 | |
| .get(function (error, rows) { | |
| if (error) throw error; | |
| ages = Object.keys(ages); // 扱い易く素直なリストにしておく | |
| bycountry.group = rows.columns.slice(2); // Country,Age, までを捨てる | |
| byservice.group = Object.keys(byservice.group); // ages同様 | |
| // CSVの列構造ママ | |
| bycountry.data = rows; | |
| // Group, Age, Japan, USA,,,,, | |
| // Facebook, total, 35.3, 77.7,,,,, となる筈 | |
| byservice.data = Array.prototype.concat.apply([], bycountry.group.map((s) => { | |
| return ages.map((a) => { | |
| var temp = { "Group": s, "Age": a }; | |
| rows.filter((row, i) => row.Age == a).map((row) => temp[row.Country] = row[s]); | |
| return temp; | |
| }); | |
| })); | |
| // 今描画している単位（国orサービス）を保持するためのリスト | |
| bycountry.list = byservice.group.concat(); // Japan, USA,,, | |
| byservice.list = bycountry.group.concat(); // Facebook, Google+,,, | |
| // とりあえず描画 | |
| drawFrame(); | |
| drawLegend(); | |
| draw(); | |
| }); | |
| function draw() { | |
| var dataset = target[0]; | |
| var dset = dataset.data.filter((row, i) => row['Group'] == dataset.list[0]); | |
| // mapでAgeの凡例リストを作って、横軸の項目として設定して描画 | |
| x0.domain(dset.map((d) => d.Age)); | |
| chart.selectAll("#axisx").call(d3.axisBottom(x0)); | |
| // x0.bandwidth()で棒グラフのグループ毎の幅を取れる | |
| // その幅をさらにグループ内の項目数で均等割しているのではないか説 | |
| x1.domain(dataset.group).rangeRound([0, x0.bandwidth()]); | |
| // 棒グラフのグループにデータセットを束縛 | |
| var grps = chart.selectAll("#group") | |
| .data(dset, function (d) { return d.Age }); | |
| grps.enter() | |
| .append("g").attr("id", "group"); | |
| grps.exit().remove(); | |
| // グループの横位置を移動 | |
| chart.selectAll("#group") | |
| .attr("transform", function (d) { return "translate(" + x0(d.Age) + ",0)"; }); | |
| // グループ内の各barにデータを束縛 | |
| var bars = chart.selectAll("#group").selectAll("#bar") | |
| // 各グループ毎に棒を書くため[{key:"Facebook", value:2704659},{},,]というデータを作る | |
| .data(function (d) { return dataset.group.map(function (key) { return { key: key, value: d[key] }; }); }, function (d) { return d.key }); | |
| bars.enter() | |
| .append("rect").attr("id", "bar") | |
| // 以下は要素が追加された場合の初期値となる | |
| .attr("width", x1.bandwidth()) | |
| .attr("height", 0) | |
| .attr("x", function (d) { return x1(d.key); }) | |
| .attr("y", +svg.attr("height") - margin.top - margin.bottom); | |
| bars.exit().remove(); | |
| // 束縛したデータでbarを再描画 | |
| chart.selectAll("#bar") | |
| .transition().duration(1000) | |
| .attr("fill", function (d) { return dataset.colors(d.key); }) | |
| .attr("x", function (d) { return x1(d.key); }) | |
| .attr("y", function (d) { return y(d.value); }) | |
| .attr("width", x1.bandwidth()) | |
| .attr("height", function (d) { return height - y(d.value); }); | |
| // 説明テキストも再描画 | |
| cluster | |
| .transition().duration(500) | |
| .attr("opacity", 0.0) | |
| .transition().duration(500) | |
| .text(dataset.list[0]) | |
| .attr("opacity", 0.3); | |
| } | |
| function drawLegend() { | |
| var dataset = target[0]; | |
| legend.selectAll("g").remove(); | |
| var ls = legend.selectAll("g") | |
| .data(dataset.group.slice()) | |
| .enter() | |
| .append("g") | |
| .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; }); | |
| ls.append("rect") | |
| .attr("x", width - 19) | |
| .attr("width", 19) | |
| .attr("height", 19) | |
| .attr("fill", dataset.colors); | |
| ls.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9.5) | |
| .attr("dy", "0.32em") | |
| .text(function (d) { return d; }); | |
| } | |
| function drawFrame() { | |
| chart.append("g").attr("id", "axisx") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + height + ")"); | |
| chart.append("g") | |
| .attr("class", "axis") | |
| .call(d3.axisLeft(y).ticks(null, "s")) | |
| .append("text") | |
| .attr("x", 2) | |
| .attr("y", y(y.ticks().pop()) + 0.5) | |
| .attr("dy", "0.32em") | |
| .attr("fill", "#000") | |
| .attr("font-weight", "bold") | |
| .attr("text-anchor", "start") | |
| .text("Utilization(%)"); | |
| } | |
| // カーソルキーを拾って描画対象を切り替え | |
| document.onkeydown = function (event) { | |
| if (event.keyCode == 39) { // right key | |
| target[0].list.push(target[0].list.shift()); | |
| draw(); | |
| } | |
| else if (event.keyCode == 37) { // left key | |
| target[0].list.unshift(target[0].list.pop()); | |
| draw(); | |
| } | |
| else if (event.keyCode == 38 || event.keyCode == 40) { // up or down key | |
| target.unshift(target.pop()); | |
| drawLegend(); | |
| draw(); | |
| } | |
| } | |
| </script> |
