This is a simple bar graph written using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
-
-
Save davo/4e6acbb7f117ec02616f9c5cceac23bc to your computer and use it in GitHub Desktop.
Simple bar graph in v4
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 */ | |
| .bar { fill: steelblue; } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var height, margin, svg, width, x, y; | |
| margin = { | |
| top: 20, | |
| right: 20, | |
| bottom: 30, | |
| left: 40 | |
| }; | |
| width = 960 - margin.left - margin.right; | |
| height = 500 - margin.top - margin.bottom; | |
| x = d3.scaleBand().range([0, width]).padding(0.1); | |
| y = d3.scaleLinear().range([height, 0]); | |
| 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 + ')'); | |
| d3.csv('sales.csv', function(error, data) { | |
| if (error) { | |
| throw error; | |
| } | |
| data.forEach(function(d) { | |
| d.sales = +d.sales; | |
| }); | |
| x.domain(data.map(function(d) { | |
| return d.salesperson; | |
| })); | |
| y.domain([ | |
| 0, d3.max(data, function(d) { | |
| return d.sales; | |
| }) | |
| ]); | |
| svg.selectAll('.bar').data(data).enter().append('rect').attr('class', 'bar').attr('x', function(d) { | |
| return x(d.salesperson); | |
| }).attr('width', x.bandwidth()).attr('y', function(d) { | |
| return y(d.sales); | |
| }).attr('height', function(d) { | |
| return height - y(d.sales); | |
| }); | |
| svg.append('g').attr('transform', 'translate(0,' + height + ')').call(d3.axisBottom(x)); | |
| svg.append('g').call(d3.axisLeft(y)); | |
| }); | |
| </script> | |
| </body> |
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
| salesperson | sales | |
|---|---|---|
| Bob | 33 | |
| Robin | 12 | |
| Anne | 41 | |
| Mark | 16 | |
| Joe | 59 | |
| Eve | 38 | |
| Karen | 21 | |
| Kirsty | 25 | |
| Chris | 30 | |
| Lisa | 47 | |
| Tom | 5 | |
| Stacy | 20 | |
| Charles | 13 | |
| Mary | 29 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment