Last active
June 25, 2019 12:48
-
-
Save erikthered/5042752 to your computer and use it in GitHub Desktop.
Starting point for d3 js. Trying to make a burndown 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Burndown Chart</title> | |
| <style> | |
| .chart { | |
| border: 1px solid black; | |
| } | |
| .chart div { | |
| font: 10px sans-serif; | |
| background-color: steelblue; | |
| text-align: right; | |
| padding: 3px; | |
| margin: 1px; | |
| color: white; | |
| } | |
| .chart rect { | |
| stroke: white; | |
| fill: steelblue; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke-width: 1.5px; | |
| } | |
| .line.ideal { | |
| stroke: steelblue; | |
| } | |
| .line.actual { | |
| stroke: orange; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <header>Burndown Chart Example</header> | |
| <script type="text/javascript"> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.time.scale() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var ideal = [ | |
| {date: new Date(2013, 1, 26), points: 50}, | |
| // Fill in the rest of the points! | |
| {date: new Date(2013, 2, 8), points: 0} | |
| ]; | |
| var actual = [ | |
| {date: new Date(2013, 1, 26), points: 50}, | |
| {date: new Date(2013, 1, 27), points: 75}, | |
| {date: new Date(2013, 1, 28), points: 42}, | |
| {date: new Date(2013, 2, 1), points: 35}, | |
| {date: new Date(2013, 2, 2), points: 29}, | |
| {date: new Date(2013, 2, 3), points: 24}, | |
| {date: new Date(2013, 2, 4), points: 18}, | |
| {date: new Date(2013, 2, 5), points: 4}, | |
| {date: new Date(2013, 2, 8), points: 0} | |
| ]; | |
| var idealLine = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.points); }); | |
| var actualLine = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.points); }); | |
| x.domain(d3.extent(ideal, function(d){return d.date;})); | |
| y.domain(d3.extent(actual, function(d){return d.points;})); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickFormat(d3.time.format("%b %d")); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var chart = d3.select("body").append("svg") | |
| .attr("class", "chart") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // Create the x-axis | |
| chart.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Create the y-axis | |
| chart.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("Points"); | |
| // Paint the ideal line | |
| chart.append("path") | |
| .datum(ideal) | |
| .attr("class", "line ideal") | |
| .attr("d", idealLine); | |
| // Paint the actual line | |
| chart.append("path") | |
| .datum(actual) | |
| .attr("class", "line actual") | |
| .attr("d", actualLine); | |
| </script> | |
| </body> | |
| </html> |
Here's it in action.
http://jsfiddle.net/a9f6gr0v/
JS source updated to work with the d3.js v4: http://jsfiddle.net/a9f6gr0v/17/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
What is the license of your gist? I would like to reuse it in a GPLv2 project.
Regards,
Nicolas