Last active
October 23, 2016 22:20
-
-
Save misanuk/08d2f1b8bb9a5868a600edbcc667d06c to your computer and use it in GitHub Desktop.
Example of Small Multiples with Mouseover Tooltip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
category | month | requests | |
---|---|---|---|
Category A | 2014-07-01 | 2262 | |
Category A | 2014-08-01 | 3573 | |
Category A | 2014-09-01 | 6426 | |
Category A | 2014-10-01 | 6555 | |
Category A | 2014-11-01 | 2884 | |
Category A | 2014-12-01 | 2440 | |
Category A | 2015-01-01 | 6755 | |
Category A | 2015-02-01 | 6362 | |
Category A | 2015-03-01 | 4020 | |
Category A | 2015-04-01 | 4375 | |
Category A | 2015-05-01 | 2569 | |
Category A | 2015-06-01 | 1961 | |
Category A | 2015-07-01 | 3820 | |
Category A | 2015-08-01 | 3845 | |
Category A | 2015-09-01 | 11364 | |
Category A | 2015-10-01 | 7670 | |
Category A | 2015-11-01 | 8384 | |
Category A | 2015-12-01 | 3094 | |
Category A | 2016-01-01 | 9807 | |
Category A | 2016-02-01 | 4165 | |
Category A | 2016-03-01 | 5943 | |
Category A | 2016-04-01 | 4135 | |
Category A | 2016-05-01 | 5384 | |
Category B | 2015-08-01 | 38 | |
Category B | 2015-09-01 | 63 | |
Category B | 2015-10-01 | 159 | |
Category B | 2015-11-01 | 57 | |
Category B | 2015-12-01 | 101 | |
Category B | 2016-01-01 | 196 | |
Category B | 2016-02-01 | 262 | |
Category B | 2016-03-01 | 368 | |
Category B | 2016-04-01 | 238 | |
Category B | 2016-05-01 | 187 | |
Category C | 2014-07-01 | 973 | |
Category C | 2014-08-01 | 1652 | |
Category C | 2014-09-01 | 1788 | |
Category C | 2014-10-01 | 1695 | |
Category C | 2014-11-01 | 2071 | |
Category C | 2014-12-01 | 1179 | |
Category C | 2015-01-01 | 1247 | |
Category C | 2015-02-01 | 832 | |
Category C | 2015-03-01 | 1582 | |
Category C | 2015-04-01 | 3888 | |
Category C | 2015-05-01 | 4082 | |
Category C | 2015-06-01 | 2962 | |
Category C | 2015-07-01 | 1793 | |
Category C | 2015-08-01 | 3731 | |
Category C | 2015-09-01 | 1644 | |
Category C | 2015-10-01 | 2745 | |
Category C | 2015-11-01 | 3013 | |
Category C | 2015-12-01 | 1249 | |
Category C | 2016-01-01 | 1938 | |
Category C | 2016-02-01 | 2185 | |
Category C | 2016-03-01 | 3625 | |
Category C | 2016-04-01 | 6131 | |
Category C | 2016-05-01 | 8910 | |
Category D | 2014-07-01 | 278 | |
Category D | 2014-08-01 | 662 | |
Category D | 2014-09-01 | 450 | |
Category D | 2014-10-01 | 694 | |
Category D | 2014-11-01 | 337 | |
Category D | 2014-12-01 | 536 | |
Category D | 2015-01-01 | 812 | |
Category D | 2015-02-01 | 753 | |
Category D | 2015-03-01 | 910 | |
Category D | 2015-04-01 | 1373 | |
Category D | 2015-05-01 | 702 | |
Category D | 2015-06-01 | 626 | |
Category D | 2015-07-01 | 945 | |
Category D | 2015-08-01 | 1200 | |
Category D | 2015-09-01 | 591 | |
Category D | 2015-10-01 | 517 | |
Category D | 2015-11-01 | 1100 | |
Category D | 2015-12-01 | 738 | |
Category D | 2016-01-01 | 1108 | |
Category D | 2016-02-01 | 632 | |
Category D | 2016-03-01 | 662 | |
Category D | 2016-04-01 | 1305 | |
Category D | 2016-05-01 | 1187 | |
Category E | 2014-07-01 | 3167 | |
Category E | 2014-08-01 | 5002 | |
Category E | 2014-09-01 | 8996 | |
Category E | 2014-10-01 | 9177 | |
Category E | 2014-11-01 | 4038 | |
Category E | 2014-12-01 | 3416 | |
Category E | 2015-01-01 | 9457 | |
Category E | 2015-02-01 | 8907 | |
Category E | 2015-03-01 | 5628 | |
Category E | 2015-04-01 | 6125 | |
Category E | 2015-05-01 | 3597 | |
Category E | 2015-06-01 | 2745 | |
Category E | 2015-07-01 | 5348 | |
Category E | 2015-08-01 | 5383 | |
Category E | 2015-09-01 | 15910 | |
Category E | 2015-10-01 | 10738 | |
Category E | 2015-11-01 | 11738 | |
Category E | 2015-12-01 | 4332 | |
Category E | 2016-01-01 | 13730 | |
Category E | 2016-02-01 | 5831 | |
Category E | 2016-03-01 | 8320 | |
Category E | 2016-04-01 | 5789 | |
Category E | 2016-05-01 | 7538 | |
Category F | 2014-07-01 | 190 | |
Category F | 2014-08-01 | 315 | |
Category F | 2014-09-01 | 795 | |
Category F | 2014-10-01 | 285 | |
Category F | 2014-11-01 | 505 | |
Category F | 2014-12-01 | 980 | |
Category F | 2015-01-01 | 1310 | |
Category F | 2015-02-01 | 1840 | |
Category F | 2015-03-01 | 1190 | |
Category F | 2015-04-01 | 935 | |
Category F | 2015-05-01 | 4865 | |
Category F | 2015-06-01 | 8260 | |
Category F | 2015-07-01 | 8940 | |
Category F | 2015-08-01 | 8475 | |
Category F | 2015-09-01 | 10355 | |
Category F | 2015-10-01 | 5895 | |
Category F | 2015-11-01 | 6235 | |
Category F | 2015-12-01 | 4160 | |
Category F | 2016-01-01 | 7910 | |
Category F | 2016-02-01 | 19440 | |
Category F | 2016-03-01 | 20410 | |
Category F | 2016-04-01 | 14810 | |
Category F | 2016-05-01 | 8965 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
body { | |
font: 10px avenir next, sans-serif; | |
} | |
.request-line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
.dimension-title { | |
font: bold 14px avenir next; | |
} | |
.dimension-box { | |
display: inline-block; | |
} | |
.x-axis { | |
stroke-width: 0.5px; | |
stroke: #888; | |
font: 12px avenir next, sans-serif; | |
} | |
.x-axis > path { | |
stroke: #888; | |
} | |
.y-axis { | |
stroke-width: 0.5px; | |
stroke: #888; | |
font: 12px avenir next, sans-serif; | |
} | |
.y-axis > path { | |
stroke: #888; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
.focus circle { | |
fill: none; | |
stroke: steelblue; | |
} | |
</style> | |
<body> | |
</body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
// Margin Conventions and Setup | |
var margin = {top: 0, right: 20, bottom: 15, left: 35}; | |
var width = 250 - margin.left - margin.right; | |
var height = 200 - margin.top - margin.bottom; | |
// Format Functions | |
var parseTime = d3.timeParse("%Y-%m-%d"); | |
var bisectDate = d3.bisector(function(d) { return d.month; }).left | |
// Line Defaults | |
var xScale = d3.scaleTime() | |
.range([0, width]); | |
var yScale = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom() | |
.scale(xScale) | |
.ticks(2) | |
.tickSize(0); | |
var yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(2) | |
.tickSize(0); | |
var line = d3.line() | |
.x(function(d) { return xScale(d.month); }) | |
.y(function(d) { return yScale(d.requests); }); | |
d3.csv("category_monthly.csv", function(error, data) { | |
if(error) throw error; | |
// Prep Data | |
data.forEach(function(d) { | |
d.month = parseTime(d.month); | |
d.requests = +d.requests; | |
}) | |
//Update Scales | |
xScale.domain(d3.extent(data, function(d) { return d.month; })); | |
yScale.domain(d3.extent(data, function(d) { return d.requests; })); | |
// Nest Data | |
var dataByDimension = d3.nest() | |
.key(function(d) { return d.category; }) | |
.entries(data); | |
// Join Data and create plots | |
var dimension = d3.select("body").selectAll(".dimension-group") | |
.data(dataByDimension) | |
.enter() | |
.append("div") | |
.attr("class", "dimension-box") | |
dimension.append("h3") | |
.attr("class", "dimension-title") | |
.text(function(d) { return d.key.slice(0,25); }); | |
var svg = dimension.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 + ")"); | |
svg.append("g") | |
.attr("class", "x-axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y-axis") | |
.call(yAxis); | |
svg.append("path") | |
.attr("class", "request-line") | |
.attr("d", function(d) { return line(d.values); }); | |
// Mouseover Tooltip, based on Mike's example here: https://bl.ocks.org/mbostock/3902569 | |
var focus = svg.append("g") | |
.attr("class", "focus") | |
.style("display", "none"); | |
focus.append("circle") | |
.attr("r", 3); | |
focus.append("text") | |
.attr("x", 9) | |
.attr("dy", ".35em"); | |
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 = xScale.invert(d3.mouse(this)[0]), | |
i = bisectDate(data, x0, 1), | |
d0 = data[i - 1], | |
d1 = data[i], | |
d = x0 - d0.month > d1.month - x0 ? d1 : d1; | |
focus.attr("transform", "translate(" + xScale(d.month) + "," + yScale(d.requests) + ")"); | |
focus.select("text").text(d.requests); | |
}; | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment