Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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: 2.0px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: steelblue;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 50, 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,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.0f"),
formatCurrency = function(d) { return formatValue(d); };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.servers); });
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("vmcount.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.servers = +d.servers;
});
data.sort(function(a, b) {
return a.date - b.date;
});
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.servers; }));
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("VM Count");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 6.5);
focus.append("text")
.attr("x", 20)
.attr("dy", ".55em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.servers) + ")");
focus.select("text").text(formatCurrency(d.servers));
}
});
</script>
date servers
2014-01-02 4344
2014-01-01 4344
2013-12-31 4344
2013-12-30 4343
2013-12-29 4343
2013-12-28 4343
2013-12-27 4347
2013-12-26 4348
2013-12-25 4348
2013-12-24 4349
2013-12-23 4347
2013-12-22 4347
2013-12-21 4347
2013-12-20 4339
2013-12-19 4342
2013-12-18 4341
2013-12-17 4347
2013-12-16 4343
2013-12-15 4343
2013-12-14 4343
2013-12-13 4343
2013-12-12 4331
2013-12-11 4328
2013-12-10 4328
2013-12-06 4225
2013-12-05 4202
2013-12-04 4193
2013-12-03 4190
2013-12-02 4192
2013-12-01 4191
2013-11-30 4191
2013-11-29 4191
2013-11-28 4191
2013-11-27 4201
2013-11-26 4202
2013-11-25 4197
2013-11-24 4197
2013-11-23 4197
2013-11-22 4193
2013-11-21 4189
2013-11-20 4187
2013-11-19 4174
2013-11-18 4169
2013-11-17 4169
2013-11-16 4169
2013-11-15 4167
2013-11-14 4167
2013-11-13 4161
2013-11-12 4123
2013-11-11 4090
2013-11-10 4090
2013-11-09 4090
2013-11-08 4083
2013-11-07 4075
2013-11-06 4038
2013-11-05 4024
2013-11-04 4003
2013-11-03 4003
2013-11-02 4003
2013-11-01 3985
2013-10-31 4006
2013-10-30 3994
2013-10-29 3980
2013-10-28 3973
2013-10-27 3973
2013-10-26 3973
@complexsplit
Copy link
Author

Example Animation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment