ゆるきゃらの行動分析

forked from michalskop's block: Sankey presidential chart

<!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>

<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>

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();

// 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) + " %"; });

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");

</script>

Modified http://d3js.org/d3.v2.min.js?2.9.1 to a secure url

https://code.jquery.com/jquery-2.2.4.js

https://d3js.org/d3.v2.min.js?2.9.1