This is a simple graph demonstrating the addition of a table with several 'tricks' and a graph (open in full screen to see the table).
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.
Last active
January 19, 2022 21:35
-
-
Save d3noob/8003069e5e12a698e34900041042cfbf to your computer and use it in GitHub Desktop.
Graph and table with tricks in v7
This file contains hidden or 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 hidden or 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
| date | close | open | |
|---|---|---|---|
| 1-May-12 | 68.13 | 34.12 | |
| 30-Apr-12 | 63.98 | 45.56 | |
| 27-Apr-12 | 67.00 | 67.89 | |
| 26-Apr-12 | 89.70 | 78.54 | |
| 25-Apr-12 | 99.00 | 89.23 | |
| 24-Apr-12 | 130.28 | 99.23 | |
| 23-Apr-12 | 166.70 | 101.34 | |
| 20-Apr-12 | 234.98 | 122.34 | |
| 19-Apr-12 | 345.44 | 134.56 | |
| 18-Apr-12 | 443.34 | 160.45 | |
| 17-Apr-12 | 543.70 | 180.34 | |
| 16-Apr-12 | 580.13 | 210.23 | |
| 13-Apr-12 | 605.23 | 223.45 | |
| 12-Apr-12 | 622.77 | 201.56 | |
| 11-Apr-12 | 626.20 | 212.67 | |
| 10-Apr-12 | 628.44 | 310.45 | |
| 9-Apr-12 | 636.23 | 350.45 | |
| 5-Apr-12 | 633.68 | 410.23 | |
| 4-Apr-12 | 624.31 | 430.56 | |
| 3-Apr-12 | 629.32 | 460.34 | |
| 2-Apr-12 | 618.63 | 510.34 | |
| 30-Mar-12 | 599.55 | 534.23 | |
| 29-Mar-12 | 609.86 | 578.23 | |
| 28-Mar-12 | 617.62 | 590.12 | |
| 27-Mar-12 | 614.48 | 560.34 | |
| 26-Mar-12 | 606.98 | 580.12 |
This file contains hidden or 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> /* set the CSS */ | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 2px; | |
| } | |
| td, th { | |
| padding: 1px 4px; | |
| border: 1px black solid; | |
| } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script> | |
| // set the dimensions and margins of the graph | |
| var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // parse the date / time | |
| var parseTime = d3.timeParse("%d-%b-%y"); | |
| // set the ranges | |
| var x = d3.scaleTime().range([0, width]); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| // define the line | |
| var valueline = d3.line() | |
| .x(function(d) { return x(d.date1); }) | |
| .y(function(d) { return y(d.close); }); | |
| // append the svg obgect to the body of the page | |
| // appends a 'group' element to 'svg' | |
| // moves the 'group' element to the top left margin | |
| 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 + ")"); | |
| // Get the data | |
| d3.csv("data2.csv").then(function(data) { | |
| // format the data | |
| data.forEach(function(d) { | |
| d.date1 = parseTime(d.date); | |
| d.close = +d.close; | |
| d.open = +d.open; // <= added this for tidy house keeping | |
| d.diff = Math.round(( d.close - d.open ) * 100 ) / 100; | |
| }); | |
| // Scale the range of the data | |
| x.domain(d3.extent(data, function(d) { return d.date1; })); | |
| y.domain([0, d3.max(data, function(d) { return d.close; })]); | |
| // Add the valueline path. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("d", valueline); | |
| // Add the X Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // Add the Y Axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)); | |
| // The table generation function | |
| function tabulate(data, columns) { | |
| var table = d3.select("body").append("table") | |
| .attr("style", "margin-left: 360px") | |
| .style("border-collapse", "collapse") | |
| .style("border", "2px black solid"), | |
| thead = table.append("thead"), | |
| tbody = table.append("tbody"); | |
| // append the header row | |
| thead.append("tr") | |
| .selectAll("th") | |
| .data(columns) | |
| .enter() | |
| .append("th") | |
| .text(function(column) { return column; }); | |
| // create a row for each object in the data | |
| var rows = tbody.selectAll("tr") | |
| .data(data) | |
| .enter() | |
| .append("tr"); | |
| // create a cell in each row for each column | |
| var cells = rows.selectAll("td") | |
| .data(function(row) { | |
| return columns.map(function(column) { | |
| return {column: column, value: row[column]}; | |
| }); | |
| }) | |
| .enter() | |
| .append("td") | |
| .attr("style", "font-family: Courier") // sets the font style | |
| .html(function(d) { return d.value; }); | |
| return table; | |
| } | |
| // render the table | |
| var peopleTable = tabulate(data, ["date", "close", "open", "diff"]); | |
| peopleTable.selectAll("tbody tr") | |
| .sort(function(a, b) { | |
| return d3.descending(a.close, b.close); | |
| }); | |
| peopleTable.selectAll("thead th") | |
| .text(function(column) { | |
| return column.charAt(0).toUpperCase() + column.substr(1); | |
| }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment