forked from misanuk's block: Example of Small Multiples with Mouseover Tooltip
Last active
January 23, 2017 20:57
-
-
Save Fil/dd3ea32358401e60d8898b5524a71118 to your computer and use it in GitHub Desktop.
Example of Small Multiples with Mouseover Tooltip (fixed)
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
| license: mit |
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.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 | |
| svg.each(function(){ | |
| var svg = d3.select(this), | |
| category = svg.datum().key; | |
| var filtered_data = svg.datum().values; | |
| 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(filtered_data, x0, 1), | |
| d0 = filtered_data[i - 1], | |
| d1 = filtered_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