forked from pjsier's block: Line Chart Transition
forked from elangobharathi's block: Line Chart Transition
forked from ConorAspell's block: Line Chart Transition
license: mit |
forked from pjsier's block: Line Chart Transition
forked from elangobharathi's block: Line Chart Transition
forked from ConorAspell's block: Line Chart Transition
month | value | |
---|---|---|
07/2003 | 1 | |
09/2003 | 1 | |
01/2004 | 2 | |
06/2004 | 2 | |
07/2004 | 3 | |
09/2004 | 4 | |
01/2005 | 4 | |
06/2005 | 4 | |
07/2005 | 5 | |
09/2005 | 6 | |
01/2006 | 7 | |
06/2006 | 7 | |
07/2006 | 8 | |
09/2006 | 9 | |
01/2007 | 10 | |
06/2007 | 10 | |
07/2007 | 11 | |
09/2007 | 12 | |
01/2008 | 12 | |
06/2008 | 12 | |
07/2008 | 12 | |
09/2008 | 13 | |
01/2009 | 13 | |
06/2009 | 14 | |
07/2009 | 15 | |
09/2009 | 15 | |
01/2010 | 16 | |
06/2010 | 16 | |
07/2010 | 16 | |
09/2010 | 16 | |
01/2011 | 16 | |
06/2011 | 16 | |
07/2011 | 16 | |
09/2011 | 16 | |
01/2012 | 16 | |
06/2012 | 16 | |
07/2012 | 17 | |
09/2012 | 17 | |
01/2013 | 17 | |
06/2013 | 17 | |
07/2013 | 17 | |
09/2013 | 17 | |
01/2014 | 17 | |
06/2014 | 17 | |
07/2014 | 17 | |
09/2014 | 17 | |
01/2015 | 17 | |
06/2015 | 17 | |
07/2015 | 17 | |
09/2015 | 17 | |
01/2016 | 17 | |
06/2016 | 17 | |
07/2016 | 17 | |
09/2016 | 17 | |
01/2017 | 18 | |
06/2017 | 18 | |
07/2017 | 19 | |
09/2017 | 19 | |
01/2018 | 20 | |
06/2018 | 20 | |
07/2018 | 20 | |
09/2018 | 20 |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Line Chart Transition</title> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<meta charset='utf-8' /> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
#chart { | |
max-width: 600px; | |
max-height: 400px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script src="script.js"></script> | |
<script> | |
var lines = timelineChart(); | |
function resize() { | |
if (d3.select("#chart svg").empty()) { | |
return; | |
} | |
lines.width(+d3.select("#chart").style("width").replace(/(px)/g, "")) | |
.height(+d3.select("#chart").style("height").replace(/(px)/g, "")); | |
d3.select("#chart").call(lines); | |
} | |
d3.csv("data.csv", function (data) { | |
d3.select("#chart").datum(data).call(lines); | |
d3.select(window).on('resize', resize); | |
resize(); | |
}); | |
</script> | |
</body> | |
</html> |
function timelineChart() { | |
var margin = { top: 20, right: 20, bottom: 50, left: 50 }, | |
width = 350, | |
height = 350, | |
parseTime = d3.timeParse("%m/%Y"), | |
timeValue = function(d) { return parseTime(d.month); }, | |
dataValue = function (d) { return +d.value; }, | |
color = "steelblue"; | |
// From https://bl.ocks.org/mbostock/5649592 | |
function transition(path) { | |
path.transition() | |
.duration(7500) | |
// .delay(function(d, i) { return i * 500; }) | |
// .ease("linear") | |
.attrTween("stroke-dasharray", tweenDash); | |
} | |
function tweenDash() { | |
var l = this.getTotalLength(), | |
i = d3.interpolateString("0," + l, l + "," + l); | |
return function (t) { return i(t); }; | |
} | |
function chart(selection) { | |
selection.each(function (data) { | |
data = data.map(function (d, i) { | |
return { time: timeValue(d), value: dataValue(d) }; | |
}); | |
var x = d3.scaleTime() | |
.rangeRound([0, width - margin.left - margin.right]) | |
.domain(d3.extent(data, function(d) { return d.time; })); | |
var y = d3.scaleLinear() | |
.rangeRound([height - margin.top - margin.bottom, 0]) | |
.domain(d3.extent(data, function(d) { return d.value; })); | |
var line = d3.line() | |
.x(function(d) { return x(d.time); }) | |
.y(function(d) { return y(d.value); }); | |
var svg = d3.select(this).selectAll("svg").data([data]); | |
var gEnter = svg.enter().append("svg").append("g"); | |
gEnter.append("path") | |
.datum(data) | |
.attr("class", "data") | |
.attr("fill", "none") | |
.attr("stroke", "steelblue") | |
.attr("stroke-linejoin", "round") | |
.attr("stroke-linecap", "round") | |
.attr("stroke-width", 4); | |
gEnter.append("g").attr("class", "axis x"); | |
gEnter.append("g").attr("class", "axis y") | |
.append("text") | |
.attr("fill", "#000") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", "0.71em") | |
.attr("text-anchor", "end") | |
.text("Data"); | |
gEnter.append("path") | |
.attr("class", "data"); | |
var svg = selection.select("svg"); | |
svg.attr('width', width).attr('height', height); | |
var g = svg.select("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
g.select("g.axis.x") | |
.attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
.call(d3.axisBottom(x).ticks(5)) | |
.select(".domain") | |
.remove(); | |
g.select("g.axis.y") | |
.attr("class", "axis y") | |
.call(d3.axisLeft(y)); | |
g.select("path.data") | |
.datum(data) | |
.attr("d", line) | |
.call(transition); | |
}); | |
} | |
chart.margin = function (_) { | |
if (!arguments.length) return margin; | |
margin = _; | |
return chart; | |
}; | |
chart.width = function (_) { | |
if (!arguments.length) return width; | |
width = _; | |
return chart; | |
}; | |
chart.height = function (_) { | |
if (!arguments.length) return height; | |
height = _; | |
return chart; | |
}; | |
chart.parseTime = function (_) { | |
if (!arguments.length) return parseTime; | |
parseTime = _; | |
return chart; | |
}; | |
chart.timeValue = function (_) { | |
if (!arguments.length) return timeValue; | |
timeValue = _; | |
return chart; | |
}; | |
chart.dataValue = function (_) { | |
if (!arguments.length) return dataValue; | |
dataValue = _; | |
return chart; | |
}; | |
return chart; | |
} |