Skip to content

Instantly share code, notes, and snippets.

@ZoeLeBlanc

ZoeLeBlanc/.block

Last active July 17, 2018 20:45
Show Gist options
  • Save ZoeLeBlanc/f6521a6dc3d8148cd0423229780bfc97 to your computer and use it in GitHub Desktop.
Save ZoeLeBlanc/f6521a6dc3d8148cd0423229780bfc97 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart
Raw
.block
license: mit
Raw
data.csv
month value
08/2016 6
09/2016 5
10/2016 8
11/2016 9
12/2016 8
01/2017 10
02/2017 12
03/2017 15
04/2017 17
05/2017 6
06/2017 8
07/2017 9
08/2017 15
09/2017 18
10/2017 20
11/2017 25
12/2017 29
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
</head>
<svg width="960" height="500">
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data = [];
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var g1 = svg.append("g")
.attr("transform", "translate(" + margin.left + "," +margin.top + ")");
var parseTime = d3.timeParse("%m/%Y"),
timeValue = function(d) { return parseTime(d.month); },
dataValue = function (d) { return +d.value; },
color = "steelblue";
d3.csv('data.csv')
.then(function(data) {
console.log(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; }));
console.log(data)
var line = d3.line()
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.value); });
svg.data([data])
.enter()
.append("g");
var g = d3.selectAll("g")
g.append("path")
.data([data])
.attr("class", "data")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 4);
g.append("g").attr("class", "axis x").attr("transform", "translate(0,"
+(height - margin.bottom) + ")").call(d3.axisBottom(x).ticks(5))
.select(".domain")
.remove();
g.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");
g.select("g.axis.y")
.attr("class", "axis y")
.call(d3.axisLeft(y));
g.append("path")
.attr("class", "data");
function transition(path) {
path.transition()
.duration(2000).attrTween("stroke-dasharray", tweenDash);
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) { return i(t); };
}
g.select("path.data")
.datum(data)
.attr("d", line)
.call(transition);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment