Last active
August 29, 2015 14:23
-
-
Save jebeck/90a75d5ba71c82df968e to your computer and use it in GitHub Desktop.
bar chart without groups
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 lang='en'> | |
| <head> | |
| <meta charset='utf-8'> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| } | |
| #main { | |
| background: #FFFFFF; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| path { | |
| fill: none; | |
| } | |
| .tick text { | |
| font-family: sans-serif; | |
| fill: gray; | |
| } | |
| </style> | |
| <title>A Tiny Bar Chart without Groups</title> | |
| </head> | |
| <body> | |
| <div id="main"></div> | |
| <script type="text/javascript"> | |
| // some variables | |
| var w = 600, h = 300; | |
| var margin = {top: 10, bottom: 50, left: 50, right: 10}; | |
| var textShift = 8; | |
| // create an SVG | |
| // D3's returns the SVG as a selection (i.e., a shortcut to d3.select('svg')) | |
| var svg = d3.select('#main').append('svg') | |
| .attr({ | |
| width: w + margin.left + margin.right, | |
| height: h + margin.top + margin.bottom | |
| }); | |
| // add a background rectangle to give us a visible canvas to work with | |
| svg.append('rect') | |
| .attr({ | |
| width: w + margin.left + margin.right, | |
| height: h + margin.top + margin.bottom, | |
| x: 0, | |
| y: 0, | |
| fill: 'white' | |
| }); | |
| // show where the margins are with another rect | |
| svg.append('rect') | |
| .attr({ | |
| width: w, | |
| height: h, | |
| x: margin.left, | |
| y: margin.top, | |
| fill: 'none', | |
| stroke: 'gray' | |
| }); | |
| var data = [{ | |
| framework: 'Ember', | |
| value: 2 | |
| }, { | |
| framework: 'Backbone', | |
| value: 4 | |
| }, { | |
| framework: 'Angular', | |
| value: 6 | |
| }, { | |
| framework: 'React', | |
| value: 8 | |
| }, { | |
| framework: 'Pure JavaScript', | |
| value: 10 | |
| }]; | |
| var xScale = d3.scale.ordinal() | |
| .domain(_.pluck(data, 'framework')) | |
| .rangeBands([margin.left, margin.left + w], 0.1, 0.2); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(_.pluck(data, 'value')) *1.2]) | |
| .range([margin.top + h, margin.top]); | |
| // draw bars | |
| svg.selectAll('rect.bar') | |
| .data(data) | |
| .enter() | |
| .append('rect') | |
| .attr({ | |
| x: function(d) { return xScale(d.framework); }, | |
| y: function(d) { return yScale(d.value); }, | |
| width: xScale.rangeBand(), | |
| height: function(d) { return margin.top + h - yScale(d.value); }, | |
| fill: '#20479D', | |
| 'class': 'bar' | |
| }); | |
| // annotate each bar with its value | |
| svg.selectAll('text') | |
| .data(data) | |
| .enter() | |
| .append('text') | |
| .attr({ | |
| x: function(d) { return xScale(d.framework) + textShift; }, | |
| y: function(d) { return yScale(d.value) + textShift * 2.5; }, | |
| 'font-family': 'sans-serif', | |
| 'font-weight': 'bold', | |
| fill: 'white' | |
| }) | |
| .text(function(d) { return d.value; }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment