This is a simple bar graph written using d3.js v4.
forked from d3noob's block: Simple bar graph in v4
license: mit |
This is a simple bar graph written using d3.js v4.
forked from d3noob's block: Simple bar graph in v4
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> /* set the CSS */ | |
.bar { fill: steelblue; } | |
</style> | |
<body> | |
<div id="chart"></div> | |
<!-- load the d3.js library --> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script src="https://rawgit.com/twitter/d3kit/v3/dist/d3kit.min.js"></script> | |
<script> | |
var chart = new d3Kit.SvgChart('#chart', { | |
margin: {top: 20, right: 20, bottom: 30, left: 40}, | |
initialWidth: 960, | |
initialHeight: 500, | |
}); | |
// set the ranges | |
var x = d3.scaleBand() | |
.range([0, chart.getInnerWidth()]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.range([chart.getInnerHeight(), 0]); | |
// get the data | |
d3.csv("sales.csv", function(error, data) { | |
if (error) throw error; | |
// format the data | |
data.forEach(function(d) { | |
d.sales = +d.sales; | |
}); | |
// Scale the range of the data in the domains | |
x.domain(data.map(function(d) { return d.salesperson; })); | |
y.domain([0, d3.max(data, function(d) { return d.sales; })]); | |
// append the rectangles for the bar chart | |
chart.rootG.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d.salesperson); }) | |
.attr("width", x.bandwidth()) | |
.attr("y", function(d) { return y(d.sales); }) | |
.attr("height", function(d) { return chart.getInnerHeight() - y(d.sales); }); | |
// add the x Axis | |
chart.rootG.append("g") | |
.attr("transform", "translate(0," + chart.getInnerHeight() + ")") | |
.call(d3.axisBottom(x)); | |
// add the y Axis | |
chart.rootG.append("g") | |
.call(d3.axisLeft(y)); | |
}); | |
</script> | |
</body> |
salesperson | sales | |
---|---|---|
Bob | 33 | |
Robin | 12 | |
Anne | 41 | |
Mark | 16 | |
Joe | 59 | |
Eve | 38 | |
Karen | 21 | |
Kirsty | 25 | |
Chris | 30 | |
Lisa | 47 | |
Tom | 5 | |
Stacy | 20 | |
Charles | 13 | |
Mary | 29 |