d3 egghead 2

by heavyhorse

HTML

<div class="surface"></div>https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

CSS

.surface { border: 1px dotted #ccc; }

.bar {
    fill: steelblue;
}

JavaScript

var dataset = [ 5, 10, 15, 20, 25 ];

var svg = d3.select('.surface')
			.append('svg')
			.attr('width', 500).attr('height', 300);

svg.selectAll('rect')
	.data(dataset)
	.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('width', 20)
	.attr('height', function(d,i) { return d * 5; })
	.attr('x', function(d,i) { return i * 24 })
	.attr('y', function(d) { return 300 - (d*5); });