Last active
February 19, 2020 13:30
-
-
Save Overbrd/61fe3f83bfb65d66e445ddaa0375971f to your computer and use it in GitHub Desktop.
Sample Bar Chart in D3.js
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Sample D3 Chart</title> | |
| <meta name="description" content="Sample D3 Chart"> | |
| <meta name="author" content="Matthew Lind"> | |
| <style> | |
| .chart div { | |
| font: 10px sans-serif; | |
| background-color: steelblue; | |
| text-align: right; | |
| padding: 3px; | |
| margin: 1px; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Sample D3 Chart</h1> | |
| <div class="chart"></div> | |
| <script src="https://d3js.org/d3.v5.min.js"> | |
| <script> | |
| var data = [4, 8, 15, 16, 23, 42]; | |
| var x = d3.scale.linear() | |
| .domain([0, d3.max(data)]) | |
| .range([0, 420]); | |
| d3.select(".chart") | |
| .selectAll("div") | |
| .data(data) | |
| .enter().append("div") | |
| .style("width", function(d) { return x(d) + "px"; }) | |
| .text(function(d) { return d; }); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Using D3.js (Version 5, Minified) we create a chart of data based upon a variable in JavaScript called "data".
With this we have created a visual representation of JavaScript variable data that is displayed on a web page using html5 and css3.