-
-
Save nick3499/4d3623d4972ada513bfebf5b613594de to your computer and use it in GitHub Desktop.
D3byEX 4.10: Bar Graph with Margin and Axis (Adapted to D3.js 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> | |
| <html> | |
| <meta charset=utf-8> | |
| <head> | |
| <script src='http://d3js.org/d3.v4.min.js'></script> | |
| <script src='https://d3js.org/d3-selection-multi.v1.min.js'></script> | |
| <meta name='description' | |
| content='D3.js v4, .axisLeft, .scaleLinear, Left Axis' /> | |
| </head> | |
| <body> | |
| <script> | |
| var data = [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85, 101, 95, 105, | |
| 114, 150, 180, 210, 125, 100, 71, 75, 72, 67]; | |
| var barWidth = 20, barPadding = 3; | |
| var maxValue = d3.max(data); | |
| var graphWidth = data.length * (barWidth + barPadding) - barPadding; | |
| var margin = { top: 10, right: 10, bottom: 10, left: 50 }; | |
| var totalWidth = graphWidth + margin.left + margin.right; | |
| var totalHeight = maxValue + margin.top + margin.bottom; | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', totalWidth).attr('height', totalHeight); | |
| svg.append('rect') | |
| // selection multi | |
| .attrs({width: totalWidth, height: totalHeight, | |
| fill: 'white', stroke: 'black', 'stroke-width': 1}); | |
| var mainGroup = svg | |
| .append('g') | |
| .attr('transform', | |
| 'translate(' + margin.left + ',' + margin.top + ')'); | |
| mainGroup.append('rect') | |
| .attrs({fill: 'rgba(0,0,0,0.1)', | |
| width: totalWidth - (margin.left + margin.right), | |
| height: totalHeight - (margin.bottom + margin.top)}); | |
| function xloc(d, i) { return i * (barWidth + barPadding); } | |
| function yloc(d) { return maxValue - d; } | |
| function translator(d, i) { | |
| return 'translate(' + xloc(d, i) + ',' + yloc(d) + ')'; } | |
| var barGroup = mainGroup.selectAll('g') | |
| .data(data) | |
| .enter() | |
| .append('g') | |
| .attr('transform', translator); | |
| barGroup.append('rect') | |
| .attrs({fill: 'steelblue', width: barWidth, | |
| height: function (d) { return d; } }); | |
| var textTranslator = 'translate(' + barWidth / 2 + ',0)'; | |
| barGroup.append('text') | |
| .text(function(d) { return d; }) | |
| .attrs({fill: 'white', 'alignment-baseline': 'before-edge', | |
| 'text-anchor': 'middle', transform: textTranslator}) | |
| .style('font', '10px sans-serif'); | |
| var leftAxisGroup = svg.append('g'); | |
| var axisPadding = 3; | |
| leftAxisGroup.attr('transform', | |
| 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')'); | |
| var scale = d3.scaleLinear() // v4 | |
| .domain([maxValue, 0]) // inverted | |
| .range([0, maxValue]); | |
| var axis = d3.axisLeft() // v4 | |
| .scale(scale); | |
| var axisNodes = leftAxisGroup.call(axis); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
View graph at Codepen: Bar Graph with Left Axis