%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: vertical-sankey.js
Description: D3 vertical sankey chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Vertical sankey chart
// ------------------------------
$(window).on("load", function(){
var ele = d3.select("#vertical-sankey"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = ele.node().getBoundingClientRect().width - margin.left - margin.right,
height = 650 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"),
format = function(d) { return formatNumber(d) + "m CHF"; };
// var color = d3.scale.category20();
var color = d3.scale.ordinal()
.range(["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#F8B195", "#F67280", "#C06C84"]);
var container = ele.append("svg");
var svg = container
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Chart
var sankey = d3.sankey()
.nodeWidth(25) // was 15
.nodePadding(20) // was 10
.size([width, height]);
var path = sankey.link();
// Load data
// ------------------------------
d3.json("../../../app-assets/data/d3/other/sankey.json", function(error, energy) {
if (error) throw error;
sankey
.nodes(energy.nodes)
.links(energy.links)
.layout(32); // what is this? iterations
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); })
.style("stroke", function(d) { return d.source.color = color(d.source.name.replace(/ .*/, "")); })
.style("fill", "none")
.style("stroke-opacity","0.5")
.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); });
// title is an SVG standard way of providing tooltips, up to the browser how to render this, so changing the style is tricky
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", sankey.nodeWidth())
.attr("width", function(d) { return d.dy; })
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.style("fill-opacity", "0.9")
.append("title")
.text(function(d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("text-anchor", "middle")
.attr("x", function (d) { return d.dy / 2 })
.attr("y", sankey.nodeWidth() / 2)
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; });
function dragmove(d) {
d3.select(this).attr("transform", "translate(" + (d.x = Math.max(0, Math.min(width - d.dy, d3.event.x))) + "," + d.y + ")");
sankey.relayout();
link.attr("d", path);
}
});
});
Zerion Mini Shell 1.0