Skip to content

Instantly share code, notes, and snippets.

@davo

davo/index.html

Forked from d3noob/.block
Last active May 9, 2017
Embed
What would you like to do?
Simple bar graph in v4

This is a simple bar graph written using d3.js v4.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.bar { fill: steelblue; }
</style>
<body>
<!-- load the d3.js library -->
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var height, margin, svg, width, x, y;
margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
};
width = 960 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;
x = d3.scaleBand().range([0, width]).padding(0.1);
y = d3.scaleLinear().range([height, 0]);
svg = d3.select('body').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
d3.csv('sales.csv', function(error, data) {
if (error) {
throw error;
}
data.forEach(function(d) {
d.sales = +d.sales;
});
x.domain(data.map(function(d) {
return d.salesperson;
}));
y.domain([
0, d3.max(data, function(d) {
return d.sales;
})
]);
svg.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 height - y(d.sales);
});
svg.append('g').attr('transform', 'translate(0,' + height + ')').call(d3.axisBottom(x));
svg.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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment