The graphics shows the US GDP as given by The World Bank.
You can view a rendered version of this gist at bl.ocks.org.
Last active
August 29, 2015 14:16
-
-
Save cgroll/bc31eacaf806fe35ba27 to your computer and use it in GitHub Desktop.
Single time series plot with tooltips for data points
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
| // define margins | |
| var margin = {top: 20, right: 80, bottom: 30, left: 150}; | |
| // graphics size without axis | |
| var width = 960 - margin.left - margin.right; | |
| var height = 500 - margin.top - margin.bottom; | |
| var bisectDate = d3.bisector(function(d) { return d.idx; }).left; | |
| 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 + ")"); | |
| 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") | |
| .tickFormat(function (d) { return d/1000000000 }); | |
| // function for the x grid lines | |
| function make_x_axis() { | |
| return d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(5) | |
| } | |
| // function for the y grid lines | |
| function make_y_axis() { | |
| return d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5) | |
| } | |
| var parseDate = d3.time.format("%Y-%m-%d").parse; | |
| var line = d3.svg.line() | |
| .interpolate("basis") | |
| .x(function(d) { return x(d.idx); }) | |
| .y(function(d) { return y(d.US); }); | |
| var tsdata = d3.csv("/cgroll/raw/27084754a8a9bc88806f/gdp_us.csv", function (data) { | |
| data.forEach(function(d) { | |
| d.idx = parseDate(d.idx); | |
| d.US = +d.US | |
| }); | |
| y.domain([0, d3.max(data, function(d) { return d.US; })]); | |
| x.domain(d3.extent(data, function(d) { return d.idx; })); | |
| svg.append("g") | |
| .attr("class", "background") | |
| .append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", width) | |
| .attr("height", height) | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Add the white background to the y axis label for legibility | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "shadow") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("GDP in bn $"); | |
| var textShadow = d3.select(".shadow") | |
| svg.append("g") | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", textShadow.attr("y")) | |
| .attr("dy", textShadow.attr("dy")) | |
| .style("text-anchor", "end") | |
| .text("GDP in bn $"); | |
| // Draw the x Grid lines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(make_x_axis() | |
| .tickSize(-height, 0, 0) | |
| .tickFormat("") | |
| ) | |
| // Draw the y Grid lines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(make_y_axis() | |
| .tickSize(-width, 0, 0) | |
| .tickFormat("") | |
| ) | |
| 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", 4.5); | |
| 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 = x.invert(d3.mouse(this)[0]), | |
| i = bisectDate(data, x0, 1), | |
| d0 = data[i - 1], | |
| d1 = data[i], | |
| d = x0 - d0.idx > d1.idx - x0 ? d1 : d0; | |
| focus.attr("transform", "translate(" + x(d.idx) + "," + y(d.US) + ")"); | |
| focus.select("text").text(d.US/1000000000); | |
| } | |
| }); | |
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> | |
| body { | |
| font: 16px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .y.axis path { | |
| display: none; | |
| } | |
| text.shadow { | |
| stroke: white; | |
| stroke-width: 5.5px; | |
| opacity: 0.9; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 2.5px; | |
| } | |
| .grid .tick { | |
| stroke: rgb(255, 255, 255); | |
| stroke-opacity: 1; | |
| stroke-width: 2px; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid path { | |
| stroke-width: 0; | |
| } | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .focus circle { | |
| fill: none; | |
| stroke: steelblue; | |
| } | |
| .focus text { | |
| font: 10px sans-serif; | |
| } | |
| .background { | |
| fill: rgb(229, 229, 229); | |
| fill-opacity: 1; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> | |
| </script> | |
| <script src="assembly_code.js"> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment