Skip to content

Instantly share code, notes, and snippets.

@hoschi

hoschi/README.md

Forked from mbostock/.block
Last active February 2, 2016 16:43
Show Gist options
  • Save hoschi/ed8ab310e6f6c382955f to your computer and use it in GitHub Desktop.
Save hoschi/ed8ab310e6f6c382955f to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Series Line Chart
Raw
README.md

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

Raw
data.tsv
date New York San Francisco Austin
20120801 75.0 55.4 86.5
20120802 77.7 54.4 85.8
20120803 79.7 53.7 85.3
20120804 79.6 54.1 86.0
20120805 81.5 57.8 84.2
20120806 80.0 58.2 81.9
20120807 75.7 58.0 86.5
20120808 77.8 57.0 86.1
20120809 78.6 55.0 86.8
20120810 77.8 54.8 88.0
20120811 78.5 53.0 85.1
20120812 78.8 52.5 87.4
20120813 78.6 53.3 88.0
20120814 76.8 53.9 88.0
20120815 76.7 56.2 87.2
20120816 75.9 57.1 86.1
20120817 77.6 55.3 86.8
20120818 72.6 56.2 84.9
20120819 70.4 54.3 76.8
20120820 71.8 53.1 80.6
20120821 73.6 53.4 80.0
20120822 74.7 54.5 78.2
20120823 74.6 55.7 79.1
20120824 76.0 54.8 81.9
20120825 76.2 53.8 84.7
20120826 73.4 56.5 83.5
20120827 74.6 58.3 82.1
20120828 79.4 58.7 84.0
20120829 74.7 57.5 85.7
20120830 73.5 55.9 87.2
20120831 77.9 55.4 82.9
20120901 80.7 55.7 84.8
20120902 75.1 53.1 83.9
20120903 73.5 53.5 85.5
20120904 73.5 52.5 86.4
20120905 77.7 54.5 85.8
20120906 74.2 56.3 85.4
20120907 76.0 56.4 85.3
20120908 77.1 56.5 81.9
20120909 69.7 56.4 74.8
20120910 67.8 55.4 71.6
20120911 64.0 56.2 75.9
20120912 68.1 55.7 82.1
20120913 69.3 54.3 80.5
20120914 70.0 55.2 70.0
20120915 69.3 54.3 71.2
20120916 66.3 52.9 70.3
20120917 67.0 54.8 72.1
20120918 72.8 54.8 73.7
20120919 67.2 56.8 72.7
20120920 62.1 55.4 71.7
20120921 64.0 55.8 72.9
20120922 65.5 55.9 73.1
20120923 65.7 52.8 75.6
20120924 60.4 54.5 78.3
20120925 63.2 53.3 78.3
20120926 68.5 53.6 79.6
20120927 69.2 52.1 76.4
20120928 68.7 52.6 77.2
20120929 62.5 53.9 75.2
20120930 62.3 55.1 71.9
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment