Bar Chart - Solution

_.md

[ Launch: Bar Chart - Solution ] e413b47a9205365c38ca by seliopou
[ Launch: Bar Chart - Solution ] ee0b62869c6c9d3efac9 by seliopou

config.json

{"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}

inlet.js

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 })