Skip to content

Instantly share code, notes, and snippets.

@greggnakamura
Created February 25, 2014 06:01
Show Gist options
  • Save greggnakamura/9203537 to your computer and use it in GitHub Desktop.
Save greggnakamura/9203537 to your computer and use it in GitHub Desktop.
D3: Simple Bar Chart code
// Array of data
var dataSet = [ 8, 48, 14, 31, 23 ];
// SVG container
svg = d3.select('body').append('svg').attr({
width: 600,
height: 400
});
// SVG Elements
svg.selectAll('rect') // Select all elements (rectangles); empty selection
.data(dataSet) // Bind data to selection(s), elements
.enter() // Returns placeholders for missing elements; does not create elements
.append('rect') // Create missing elements with 'append'
.attr({
x: function(d, i) { return i * 101; }, // 'd' data; 'i' position in dataSet
y: function(d, i) { return 400 - (d * 5); },
width: 100,
height: function(d) { return d * 5; },
fill: 'orange'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment