Simple Bar Chart to Support Talk at London D3 Meetup
Simple version of bar chart code found in the Developing a D3.js Edge book. Written as an example to be referenced in the London D3 Meetup
Last active
December 19, 2015 19:08
-
-
Save cloudshapes/6003578 to your computer and use it in GitHub Desktop.
Simple Reusable Bar Chart (for a London D3 Meetup)
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 lang=en> | |
| <meta charset="utf-8"> | |
| <title>D3 Talk: Sample Simple Bar Chart Example</title> | |
| <style> | |
| svg { | |
| background: #ddd; | |
| font: 10px sans-serif; | |
| } | |
| <style> | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis path { | |
| fill: none; | |
| stroke: none; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| stroke: white; | |
| } | |
| #bar1, #bar2 {float: left;margin-left:10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bar1"></div> | |
| <div id="bar2"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // Bar chart Module | |
| ///////////////////////////////// | |
| // Declare namespace | |
| d3.cloudshapes = {}; | |
| // Declare component: (this outer function acts as the closure): | |
| d3.cloudshapes.barChart = function module() { | |
| var margin = {top: 20, right: 20, bottom: 40, left: 40}, | |
| width = 500, | |
| height = 500, | |
| gap = 0, | |
| ease = "bounce"; | |
| var svg; | |
| // Define the 'inner' function: which, through the surreal nature of JavaScript scoping, can access | |
| // the above variables. | |
| function exports(_selection) { | |
| _selection.each(function(_data) { | |
| var chartW = width - margin.left - margin.right, | |
| chartH = height - margin.top - margin.bottom; | |
| // Define x and y scale variables. | |
| var x1 = d3.scale.ordinal() | |
| .domain(_data.map(function(d, i) { return i; })) | |
| .rangeRoundBands([0, chartW], 0.1); | |
| var y1 = d3.scale.linear() | |
| .domain([0, d3.max(_data, function(d, i) { return d; })]) | |
| .range([chartH, 0]); | |
| // If no SVG exists, create one - and add key groups: | |
| if (!svg) { | |
| svg = d3.select(this) | |
| .append("svg") | |
| .classed("chart", true); | |
| var container = svg.append("g").classed("container-group", true); | |
| container.append("g").classed("chart-group", true); | |
| } | |
| // Transition the width and height of the main SVG and the key 'g' group: | |
| svg.transition().attr({width: width, height: height}); | |
| svg.select(".container-group") | |
| .attr({transform: "translate(" + margin.left + "," + margin.top + ")"}); | |
| // Define gap between bars: | |
| var gapSize = x1.rangeBand() / 100 * gap; | |
| // Define width of each bar: | |
| var barW = x1.rangeBand() - gapSize; | |
| // Select all bars and bind data: | |
| var bars = svg.select(".chart-group") | |
| .selectAll(".bar") | |
| .data(_data); | |
| // ENTER, UPDATE and EXIT CODE: | |
| // D3 ENTER code for bars! | |
| bars.enter().append("rect") | |
| .classed("bar", true) | |
| .attr({x: chartW, | |
| width: barW, | |
| y: function(d, i) { return y1(d); }, | |
| height: function(d, i) { return chartH - y1(d); } | |
| }) | |
| // D3 UPDATE code for bars | |
| bars.transition() | |
| .ease(ease) | |
| .attr({ | |
| width: barW, | |
| x: function(d, i) { return x1(i) + gapSize / 2; }, | |
| y: function(d, i) { return y1(d); }, | |
| height: function(d, i) { return chartH - y1(d); } | |
| }); | |
| // D3 EXIT code for bars | |
| bars.exit().transition().style({opacity: 0}).remove(); | |
| }); | |
| } | |
| // GETTERS AND SETTERS: | |
| exports.width = function(_x) { | |
| if (!arguments.length) return width; | |
| width = parseInt(_x); | |
| return this; | |
| }; | |
| exports.height = function(_x) { | |
| if (!arguments.length) return height; | |
| height = parseInt(_x); | |
| return this; | |
| }; | |
| exports.gap = function(_x) { | |
| if (!arguments.length) return gap; | |
| gap = _x; | |
| return this; | |
| }; | |
| exports.ease = function(_x) { | |
| if (!arguments.length) return ease; | |
| ease = _x; | |
| return this; | |
| }; | |
| return exports; | |
| }; | |
| // Usage | |
| ///////////////////////////////// | |
| // Create two instances of our chart components: | |
| var chart1 = d3.cloudshapes.barChart(); | |
| var chart2 = d3.cloudshapes.barChart(); | |
| // Function used to create a nice random data-set: | |
| function randomDataset() { | |
| return d3.range(~~(Math.random() * 50)).map(function(d, i) { | |
| return ~~(Math.random() * 1000); | |
| }); | |
| } | |
| // Select the div's, and call, i.e. actually initialise each chart: | |
| var data1 = randomDataset(); | |
| d3.select("#bar1") | |
| .datum(data1) | |
| .call(chart1); | |
| var data2 = randomDataset(); | |
| d3.select("#bar2") | |
| .datum(data2) | |
| .call(chart2); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment