DS3 V4 Grouped Bar Chart

D3.v4入門としてやってみた。

総務省の情報通信白書（平成28年版）より、SNS等のサービス利用度を可視化。

若者のFacebook離れというのはデマですね。。

カーソルキーを叩くとデータセットが切り替わります。

参考にさせて頂いたサイト

http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/na000000.html - 情報通信白書
https://bl.ocks.org/mbostock/3887051 - 雛形として参考にしたd3作者のデモサイト

<!DOCTYPE html>
<meta charset="utf-8">

// 軸の変化しない部分を設定
    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 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>

https://d3js.org/d3.v4.js