Built with blockbuilder.org
forked from billshander‘s block: fresh block
<html>
<head>
<title></title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/lodash@4.17.10/lodash.js"></script>
<style type="text/css">
/*
orange #D0D2D3
gold #d0ae3d
purple #544766
green #738c77
medgrey #bcbec0
darkgrey #58595b
*/
#viz{
width: 500;
height: 200;
}
path{
fill: none;
}
path.in{
stroke: #738c77;
}
path.pad{
stroke: #fff;
stroke-width: 2;
}
circle.total{
fill: #bcbec0;
stroke: #fff;
stroke-width: 2;
}
</style>
</head>
<body>
<script type="text/javascript">
loadFlow({
div: 'viz',
total: {value: 3792, label: 'CASES'},
in: {
pending: [
{value: 3192, label: 'Pending from 2015'},
{value: 392, label: 'Pending from 2015 v 2'},
],
nonpending: [
{value: 490, label: 'Criminal Cases'},
{value: 81, label: 'Family Cases'},
{value: 29, label: 'Civil Cases'}
],
categoryLabel: 'New Investigations'
},
out: {
pending: [
{value: 3657, label: 'Cases Pending to 2017'}
],
nonpending: [
{value: 125, label: 'Criminal Cases'},
{value: 10, label: 'Family Cases'},
{value: 0, label: 'Civil Cases'}
],
categoryLabel: 'Resolved Cases'
}
});
function loadFlow(config){
var w = 1000;
var h = 300;
var c = [w/2,h/2];
var r = 50;
var svg = d3.select('body')
.append('svg')
.attr('width',w + w/20)
.attr('height',h);
var scale = d3.scaleLinear()
.domain([0,config.total.value])
.range([0,r * 2]);
_.forEach(config.in, function(val, key) {
if(key=='pending'){
var yStart = 0;
var yEnd = 0;
var count = 0;
_.forEach(val, function(lineval, linekey, obj) {
// start this line above at x=0 and y= 0 + half the height of the line + any previous line height
// lineCoords = [source xy, target xy]
// padCoords (same)
var lineCoords = [[0,yStart + scale(lineval.value)/2],[c[0],yEnd + c[1] - r + scale(lineval.value)/2]];
var padCoords = [[0,yStart + scale(lineval.value)],[c[0],yEnd + c[1] - r + scale(lineval.value)]];
// first just start it all at the source location, then animate it to the target location (the total circle, with appropriate y values based on line thickness and prev lines, etc.)
svg.append('path')
.attr('d', function(){
return "M" + lineCoords[0][0] + "," + lineCoords[0][1]
+ "C" + (lineCoords[0][0] + lineCoords[0][0]) / 2 + "," + lineCoords[0][1]
+ " " + (lineCoords[0][0] + lineCoords[0][0]) / 2 + "," + lineCoords[0][1]
+ " " + lineCoords[0][0] + "," + lineCoords[0][1];
})
.attr('stroke-width', scale(lineval.value))
.attr('class','in')
.transition()
.delay((count*500) + 500)
.duration(1000)
.attr('d', function(){
return "M" + lineCoords[0][0] + "," + lineCoords[0][1]
+ "C" + (lineCoords[0][0] + lineCoords[1][0]) / 2 + "," + lineCoords[0][1]
+ " " + (lineCoords[0][0] + lineCoords[1][0]) / 2 + "," + lineCoords[1][1]
+ " " + lineCoords[1][0] + "," + lineCoords[1][1];
})
.on('end',d => addPad(lineCoords,padCoords));
// also need to add a 2px stroke line on top of the last one, at the top edge of it...since we can't add a stroke to a line that is a stroke
function addPad(lineCoords,padCoords){
console.log("trigger after transition")
svg.append('path')
.attr('d', function(){
return "M" + padCoords[0][0] + "," + padCoords[0][1]
+ "C" + (padCoords[0][0] + padCoords[1][0]) / 2 + "," + padCoords[0][1]
+ " " + (padCoords[0][0] + padCoords[1][0]) / 2 + "," + padCoords[1][1]
+ " " + padCoords[1][0] + "," + padCoords[1][1];
})
.attr('stroke-width', 1)
.attr('class','pad');
yStart = yStart + scale(lineval.value);
yEnd = yEnd + scale(lineval.value);
count += 1;
}
});
}else{
// add straight lines with y values at bottom and x values inset a bit
}
});
}
</script>
</body>
</html>