D3 Examples - ゆるきゃらの行動分析

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Sankey Diagram</title>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.js"></script>
<script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
<style>
​
​
#chart {
  height: 500px;
}
​
.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}
​
.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}
​
.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}
​
.link:hover {
  stroke-opacity: .5;
}
​
</style>
<body>
​
<select name="select" id="yuruselect">
  <option value="hikonyan" selected>ひこにゃん</option>
  <option value="kumamon">くまモン</option>
  <option value="bary">バリィさん</option>
  <option value="sanomaru">さのまる</option>
  <option value="gunma">ぐんまちゃん</option>
  <option value="ieyasu">出世大名家康くん</option>
</select>
<select name="select" id="remove1st">
  <option value="on">１位を表示する</option>
  <option value="off" selected>１位を表示しない</option>
</select>
<h1 id="katsudo">ひこにゃんの活動記録</h1>
​
<p id="chart">
​
<aside>Drag to rearrange nodes.</aside>
​
<p>Based on <a href="https://bost.ocks.org/mike/sankey/">Mike Bostock's Sankey Diagrams</a>. It uses data from <a href="https://data.blog.ihned.cz/c1-59198510-vysledky-druhe-kolo-data">Kamil Gregor's computations</a>.</p>
​
<script src="https://d3js.org/d3.v2.min.js?2.9.1"></script>
<script src="sankey.js"></script>
<script>
var charactername = "hikonyan";
var characterJp = "ひこにゃん";
​
var show_flg = false;
​
var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d); },
    color = function(d){ return d.color; };//d3.scale.category20();
​
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("class", "yurudata")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);
​
var path = sankey.link();
​
var c = {
    getJson: function(success){
        var jsonfile = {};
        jsonfile.links = [];
        jsonfile.nodes = [{
            "color": "#ccc444",
            "name": characterJp
        }];
        var color = d3.scale.category20b();
        d3.json(charactername+".json", function(data, err){
            // var data_arr = data["response"]["docs"];
            // var pref_names =  data_arr.map(function(d){
            //     return d.prefName;
            // });
            var data_arr = data.facet_counts.facet_fields.prefName;
            var arr = [];
            var n = 0;
​
            // pref_names = _.uniq(pref_names);
            if(show_flg){
                for (var i = 0; i < data_arr.length; i=i+2) {
                    n++;
                    if(data_arr[i+1]==0) continue;
                    var linkjson = {
                        "source": n,
                        "target": 0,
                        "value": data_arr[i+1]
                    }
                    // "value": Math.log(data_arr[i+1])/ Math.log(2) +1
                    var nodejson = {
                        "color": color(i),
                        "name": data_arr[i]
                    }
                    jsonfile["links"].push(linkjson);
                    jsonfile["nodes"].push(nodejson);
                }
            }else{
                for (var i = 2; i < data_arr.length; i=i+2) {
                    n++;
                    if(data_arr[i+1]==0) continue;
                    var linkjson = {
                        "source": n,
                        "target": 0,
                        "value": data_arr[i+1]
                    }
                    // "value": Math.log(data_arr[i+1])/ Math.log(2) +1
                    var nodejson = {
                        "color": color(i),
                        "name": data_arr[i]
                    }
                    jsonfile["links"].push(linkjson);
                    jsonfile["nodes"].push(nodejson);
                }
            }
            // data_arr.map(function(pref_name, index){
            //     // var count = _.filter(data_arr, function(d){return d.prefName == pref_name}).length;
            //     var linkjson = {
            //         "source": index+1,
            //         "target": 0,
            //         "value": count
            //     }
            //     var nodejson = {
            //         "color": color(index),
            //         "name": pref_name
            //     }
            //     jsonfile["links"].push(linkjson);
            //     jsonfile["nodes"].push(nodejson);
            // });
            // console.log(JSON.stringify(jsonfile));
            c.json = jsonfile;
            success();
        });
​
    },
    init: function(){
        c.getJson(function(){
            var energy = c.json;
              sankey
                  .nodes(energy.nodes)
                  .links(energy.links)
                  .layout(32);
​
              var link = svg.append("g").selectAll(".link")
                  .data(energy.links)
                .enter().append("path")
                  .attr("class", "link")
                  .attr("d", path)
                  .style("stroke-width", function(d) { return Math.max(1, d.dy); })
                  .sort(function(a, b) { return b.dy - a.dy; });
​
              link.append("title")
                  .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value) + " %"; });
​
              var node = svg.append("g").selectAll(".node")
                  .data(energy.nodes)
                .enter().append("g")
                  .attr("class", "node")
                  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                .call(d3.behavior.drag()
                  .origin(function(d) { return d; })
                  .on("dragstart", function() { this.parentNode.appendChild(this); })
                  .on("drag", dragmove));
​
              node.append("rect")
                  .attr("height", function(d) { return d.dy; })
                  .attr("width", sankey.nodeWidth())
                  .style("fill", function(d) { return d.color; })
                  .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
                .append("title")
                  .text(function(d) { return d.name + "\n" + format(d.value); });
​
              node.append("text")
                  .attr("x", -6)
                  .attr("y", function(d) { return d.dy / 2; })
                  .attr("dy", ".35em")
                  .attr("text-anchor", "end")
                  .attr("transform", null)
                  .text(function(d) { return d.name; })
                .filter(function(d) { return d.x < width / 2; })
                  .attr("x", 6 + sankey.nodeWidth())
                  .attr("text-anchor", "start");
​
              function dragmove(d) {
                d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
                sankey.relayout();
                link.attr("d", path);
              }
        })
    }
}
$(document).ready(function(){
    c.init();
    $("#remove1st").on("change", function(){
        if(this.value == "on"){
            show_flg = true;
        }else{
            show_flg = false;
        }
        d3.selectAll('.yurudata > g').remove();
        c.init();
    })
    $("#yuruselect").on("change", function(){
        charactername = this.value;
        characterJp = this[this.selectedIndex].text;
        $("#katsudo").html(characterJp+"の活動記録");
        d3.selectAll('.yurudata > g').remove();
        c.init();
    })
});
​
</script>
​
    