billshander/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<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',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>
	<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',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>