var SRC_FILE = "split-votes-all.json", units = "votes", sankey_iterations = 0, vote_threshold=1000;//100000 // set the dimensions and margins of the graph var margin = {top: 10, right: 10, bottom: 10, left: 10}, width = 600 - margin.left - margin.right, height = 900 - margin.top - margin.bottom; // format variables var formatNumber = d3.format(",.0f"), // zero decimal places format = function(d) { return formatNumber(d) + " " + units; } function label(s) { return s.substring(1, s.length) } function color(k) { vals = { 'ACT New Zealand':'#fdb92d', 'National Party':'#2e95b6', 'New Zealand First Party':'#3d3f43', 'The Opportunities Party (TOP)':'#2A2E71', 'Other':'#cdcdcd',// '#426B6A', 'Māori Party':'#7d584a', 'MANA':'#000', 'Labour Party':'#f15c4c', 'Green Party':'#61bf84', 'Party Vote Only':'#fff' } return vals[label(k)] } // append the svg object to the body of the page var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Set the sankey diagram properties var sankey = d3.sankey() .nodeWidth(36) .nodePadding(40) .size([width, height]); var path = sankey.link(); d3.json(SRC_FILE, function(error, graph) { //console.log(graph) sankey .nodes(graph.nodes) .links(graph.links) //.layout(0);// no iterations to arrange .layout(sankey_iterations); // add in the links var link = svg.append("g").selectAll(".link") .data(graph.links) .enter().append("path") .attr("class", "link") .attr("d", path) .style("stroke-width", function(d) { return Math.max(1, d.dy); }) .style("fill", "none") .style("stroke-opacity", function(d) { if (d.value < vote_threshold) {return 0} return 0.42; }) //.style("stroke", "#000") .style("stroke", function(d) { //console.log(d) //return 'steelblue' return color(d.target.name) //return d.color = color(d.group.replace(/ .*/, "")); //return d.color = color(d.name.replace(/ .*/, "")); }) .sort(function(a, b) { return b.dy - a.dy; }); // add the link titles link.append("title") .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); // add in the nodes var node = svg.append("g").selectAll(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .call(d3.drag() .subject(function(d) { return d; }) .on("start", function() { this.parentNode.appendChild(this); }) .on("drag", dragmove)); // add the rectangles for the nodes node.append("rect") .attr("height", function(d) { return d.dy; }) .attr("width", sankey.nodeWidth()) .style("fill", function(d) { //return 'steelblue' return color(d.name) //return d.color = color(d.group.replace(/ .*/, "")); //return d.color = color(d.name.replace(/ .*/, "")); }) .style("stroke", function(d) { return d3.rgb(color(d.name)).darker(1); }) .append("title") .text(function(d) { return label(d.name) + "\n" + format(d.value); }); // add in the title for the nodes 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 label(d.name); }) .filter(function(d) { return d.x < width / 2; }) .attr("x", 6 + sankey.nodeWidth()) .attr("text-anchor", "start"); // the function for moving the nodes 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); } });