Built with blockbuilder.org
Last active
September 30, 2017 11:46
-
-
Save SpaceActuary/7ac04d6c0797b583c5c79bea0dcb2a3f to your computer and use it in GitHub Desktop.
Mini Chart
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
| group | year | amount | |
|---|---|---|---|
| ABC | 2010 | 11124 | |
| ABC | 2011 | 11433 | |
| ABC | 2012 | 11914 | |
| ABC | 2013 | 11734 | |
| ABC | 2014 | 12222 | |
| ABC | 2015 | 11943 |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
| <style> | |
| body { | |
| margin: 0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| svg { width:100%; height: 100% } | |
| .spark { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .point { | |
| fill: steelblue; | |
| stroke: #fff; | |
| stroke-width: 3px; | |
| } | |
| .label, | |
| .change, | |
| .axis, | |
| .main { | |
| text-anchor: middle; | |
| alignment-baseline: middle; | |
| fill: #aaa; | |
| } | |
| .change, | |
| .main { | |
| text-anchor: middle; | |
| alignment-baseline: middle; | |
| fill: #333; | |
| } | |
| line.axis { | |
| stroke: #aaa; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {top: 20, bottom: 50, left: 80, right: 20}, | |
| height = 200 - margin.top - margin.bottom, | |
| width = 300 - margin.left - margin.right; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| var graph = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| var x = d3.scale.ordinal() | |
| .rangePoints([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]) | |
| var yAxis = graph.append("g") | |
| .attr("transform", "translate(" + (-margin.left / 2) + "," + 0 + ")") | |
| ; | |
| var line = d3.svg.line() | |
| .x(function(d){ return x(d.year); }) | |
| .y(function(d){ return y(d.amount); }) | |
| var changeFormat = d3.format(".1f"), | |
| numberFormat = d3.format(",.0f"); | |
| d3.csv("data.csv", function(raw){ | |
| raw.unshift({year: NaN, amount: NaN}); | |
| raw.forEach(function(d, i){ | |
| d.year = +d.year; | |
| d.amount = +d.amount; | |
| }) | |
| var dataPairs = d3.pairs(raw); | |
| var data = dataPairs.map(function(d){ | |
| var d0 = d[0], | |
| d1 = d[1]; | |
| d1.change = d1.amount / d0.amount - 1; | |
| return d1; | |
| }) | |
| console.table(data); | |
| x.domain(data.map(function(d){ return d.year; })) | |
| var yExt = d3.extent(data, function(d){ return d.amount; }) | |
| y.domain(yExt).nice(); | |
| var spark = graph.append("path").datum(data) | |
| .attr("class", "spark") | |
| .attr("d", line); | |
| var points = graph.selectAll("circle.point").data(data); | |
| points.enter().append("circle").attr("class", "point") | |
| .attr("cx", function(d){ return x(d.year); }) | |
| .attr("cy", function(d){ return y(d.amount); }) | |
| .attr("r", 5) | |
| var labels = svg.selectAll("text.label").data(data); | |
| labels.enter().append("text").attr("class", "label"); | |
| labels.text(function(d){ return d.year; }) | |
| .attr("transform", "translate(" + margin.left + "," + (height+margin.top) + ")") | |
| .attr("x", function(d){ return x(d.year); }) | |
| .attr("y", 20) | |
| var changes = svg.selectAll("text.change") | |
| .data(data.filter(function(d){ return !isNaN(d.change); })); | |
| changes.enter().append("text").attr("class", "change"); | |
| changes.text(function(d){ return changeFormat(d.change * 100); }) | |
| .attr("transform", "translate(" + margin.left + "," + (height+margin.top) + ")") | |
| .attr("x", function(d){ return x(d.year); }) | |
| .attr("y", 40) | |
| yAxis.append("text").attr("class", "axis max") | |
| .text(numberFormat(yExt[1])) | |
| .attr("y", y(yExt[1])); | |
| yAxis.append("line").attr("class", "axis") | |
| .attr({ | |
| x1: 0, y1: y(yExt[1]) + 10, | |
| x2: 0, y2: y(yExt[0]) - 10 | |
| }); | |
| yAxis.append("text").attr("class", "axis min") | |
| .text(numberFormat(yExt[0])) | |
| .attr("y", y(yExt[0])); | |
| svg.append("text").text("YOY % Chg").attr("class", "main") | |
| .attr("transform", "translate(" + 0 + "," + (height+margin.top) + ")") | |
| .attr("x", 50) | |
| .attr("y", 40) | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment