Line charts with circles and labels. A demonstration of the technique for a student.
xxxxxxxxxx
<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;
}
.network-line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
.domain([2002,2012])
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) { return d});
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(-width)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.val); });
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) {
data.forEach(function(d) {
d.year = +d.year;
d.val = +d.val;
});
yearlyCostByNetwork = d3.nest()
.key(function(d) { return d.network})
.entries(data);
y.domain([0,d3.max(data.map(function(d) { return d.val; }))]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var linesContainer = svg.append("g")
linesContainer.selectAll(".network-line")
.data(yearlyCostByNetwork)
.enter()
.append("path")
.attr("class", "network-line")
.attr("d", function(d) { return line(d.values); });
var labelElements = svg.append("g")
.attr("class", "fiddly-bits")
var label = labelElements.selectAll(".g-label-element")
.data(data.filter(function(d) { return d.year == 2012; }))
.enter().append("g")
.attr("class", "g-label-element")
.attr("transform", function(d) { return "translate(" + x(d.year) + "," + y(d.val) + ")"; } );
label.append("circle")
.attr("r", 4)
label.append("text")
.attr("x", 10)
.text(function(d) { return d.network})
});
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js