seemantk/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from atomiccc's block: animated lines with broken zoom

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    #linechart {
	    height: 500px;
	    width: 500px;
	    margin: 0 auto;
    }

  </style>
</head>

<body>

  <div id="linechart"></div>

  <script>

function num(max) {
	return Math.abs(Math.floor(Math.random() * max) + (max - 200));
}

var data = [
	{ date: '2015-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
];


var svg = d3.select('#linechart').append('svg').attr('height', '500px').attr('width', '500px');


var xExtent = d3.extent(data, function(d, i) { return d.date; });

var yValues = [];

data.forEach(function(d) {
	for (key in d) {
		if (key !== 'date') {
			yValues.push(d[key]);
		}
	}
});

var yMin = d3.min(yValues, function(d, i) { return d; });
var yMax = d3.max(yValues, function(d, i) { return d; });

var xScale = d3.scaleTime()
	.domain([ new Date(xExtent[0]), new Date(xExtent[1]) ])
	.range([40,495]);

var yScale = d3.scaleLinear()
	.domain([yMin, yMax])
	.range([460,240]);


var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale);

var gX = svg.append('g')
	.attr('id', 'xAxisG')
	.attr('transform', 'translate(0,460)')
	.call(xAxis);

var gY = svg.append('g')
	.attr('id', 'yAxisG')
	.attr('transform', 'translate(40,0)')
	.call(yAxis);

var color = d3.scaleOrdinal()
    .range(['#FF4848', '#FF9C42', '#FFF06A', '#24E0FB', '#36F200']);

// var path, line;
var lines = {};

for (key in data[0]) {

	if (key !== 'date') {

		var line = d3.line()
			.x(function(d) {
				return xScale(new Date(d.date));
			})
			.y(function(d) {
				return yScale(d[key]);
			})
			.curve(d3.curveCatmullRom.alpha(0.5));

		lines[key] = line;

		path = svg.append('g').append('path')
			.attr('d', line(data))
			.attr('id', key)
			.attr('fill', 'none')
			.attr('stroke', function(d) { return color(key); }) //'#36F200')
			.attr('stroke-width', 2);

		var totalLength = path.node().getTotalLength();

		path
			.attr("stroke-dasharray", totalLength + " " + totalLength)
			.attr("stroke-dashoffset", totalLength)
			.transition()
			.duration(2000)
		    .ease(d3.easeCubicInOut)
			.attr("stroke-dashoffset", 0);


	}

}


var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  console.log('zoomed');
  // debugger;
  // svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  // svg.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
  // gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
  // debugger;
  for (key in data[0]) {
  	if (key !== 'date') {
  		svg.select('#' + key).attr('transform', d3.event.transform);
  		// svg.select('#' + key).attr('d', lines[key](data));

  	}
  }
}
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	#linechart {
	height: 500px;
	width: 500px;
	margin: 0 auto;
	}

	</style>
	</head>

	<body>

	<div id="linechart"></div>

	<script>

	function num(max) {
	return Math.abs(Math.floor(Math.random() * max) + (max - 200));
	}

	var data = [
	{ date: '2015-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	];


	var svg = d3.select('#linechart').append('svg').attr('height', '500px').attr('width', '500px');


	var xExtent = d3.extent(data, function(d, i) { return d.date; });

	var yValues = [];

	data.forEach(function(d) {
	for (key in d) {
	if (key !== 'date') {
	yValues.push(d[key]);
	}
	}
	});

	var yMin = d3.min(yValues, function(d, i) { return d; });
	var yMax = d3.max(yValues, function(d, i) { return d; });

	var xScale = d3.scaleTime()
	.domain([ new Date(xExtent[0]), new Date(xExtent[1]) ])
	.range([40,495]);

	var yScale = d3.scaleLinear()
	.domain([yMin, yMax])
	.range([460,240]);


	var xAxis = d3.axisBottom(xScale).ticks(5);
	var yAxis = d3.axisLeft(yScale);

	var gX = svg.append('g')
	.attr('id', 'xAxisG')
	.attr('transform', 'translate(0,460)')
	.call(xAxis);

	var gY = svg.append('g')
	.attr('id', 'yAxisG')
	.attr('transform', 'translate(40,0)')
	.call(yAxis);

	var color = d3.scaleOrdinal()
	.range(['#FF4848', '#FF9C42', '#FFF06A', '#24E0FB', '#36F200']);

	// var path, line;
	var lines = {};

	for (key in data[0]) {

	if (key !== 'date') {

	var line = d3.line()
	.x(function(d) {
	return xScale(new Date(d.date));
	})
	.y(function(d) {
	return yScale(d[key]);
	})
	.curve(d3.curveCatmullRom.alpha(0.5));

	lines[key] = line;

	path = svg.append('g').append('path')
	.attr('d', line(data))
	.attr('id', key)
	.attr('fill', 'none')
	.attr('stroke', function(d) { return color(key); }) //'#36F200')
	.attr('stroke-width', 2);

	var totalLength = path.node().getTotalLength();

	path
	.attr("stroke-dasharray", totalLength + " " + totalLength)
	.attr("stroke-dashoffset", totalLength)
	.transition()
	.duration(2000)
	.ease(d3.easeCubicInOut)
	.attr("stroke-dashoffset", 0);


	}

	}


	var zoom = d3.zoom()
	.scaleExtent([1, 40])
	.on("zoom", zoomed);

	svg.call(zoom);

	function zoomed() {
	console.log('zoomed');
	// debugger;
	// svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	// svg.attr("transform", d3.event.transform);
	gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
	// gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
	// debugger;
	for (key in data[0]) {
	if (key !== 'date') {
	svg.select('#' + key).attr('transform', d3.event.transform);
	// svg.select('#' + key).attr('d', lines[key](data));

	}
	}
	}
	</script>
	</body>