Skip to content

Instantly share code, notes, and snippets.

@seliopou
Created Sep 3, 2014
Embed
What would you like to do?
Bar Chart - Solution
{"description":"Bar Chart - Solution","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}
var benchmarks = [
{ 'name' : 'backbone', value: 951.0 },
{ 'name' : 'ember', value: 2191.0 },
{ 'name' : 'angular', value: 1713.0 },
{ 'name' : 'react', value: 1381.0 },
{ 'name' : 'om', value: 685.0 },
{ 'name' : 'mercury', value: 262.0 },
{ 'name' : 'elm', value: 399.0 }
];
// The svg variable is assigned to a selection containing the svg
// element that's dispayed to the left of this text box. Perform
// operations on this selection and they will immediately appear
// to the left as you code.
//
var svg = d3.select("svg");
var max = d3.max(benchmarks, function(d) { return d.value; });
var bars = svg.selectAll('rect.item')
.data(benchmarks);
bars.enter().append('rect')
.attr('class', 'item')
.attr('fill', 'steelBlue')
.attr('x', 10)
.attr('height', 25);
bars
.attr('y', function(d, i) { return i * 50 + 30; })
.attr('width', function(d, i) { return (tributary.sw - 20) * d.value / max; });
var labels = svg.selectAll('text.label')
.data(benchmarks);
labels.enter().append('text')
.attr('class', 'label')
.style('fill', '#333')
.attr('font-size', '12pt');
labels
.attr('x', function(d, i) { return 10; })
.attr('y', function(d, i) { return i * 50 + 23; })
.text(function(d) { return d.name; });
var values = svg.selectAll('text.value')
.data(benchmarks);
values.enter().append('text')
.attr('class', 'value')
.style('fill', '#cccccc')
.attr('font-size', '10pt');
values
.attr('x', function(d, i) { return (tributary.sw - 20) * d.value / max - 26; })
.attr('y', function(d, i) { return i * 50 + 48; })
.text(function(d) { return d.value })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment