Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Irregular Histogram
Income People
0 245981
8.8 150444
30 126063
49.9 123519
70 115029
90.7 277149
109.1 355768
130 324246
150.3 353239
170.2 396008
190 396725
210 398640
230.1 401932
250 416079
270 412727
289.8 385192
309.7 343178
329.7 293707
349.6 239982
369.7 201557
389.3 165132
442.3 442075
543.4 196526
679.9 146784
883.9 48600
1555 44644
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
rect {
fill: steelblue;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 10, right: 20, bottom: 20, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var 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 + ")");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
d3.csv("income.csv", function(error, bins) {
if (error) throw error;
// Coerce types.
bins.forEach(function(bin) {
bin.Income = +bin.Income;
bin.People = +bin.People;
});
// Normalize each bin to so that height = quantity/width;
// see http://en.wikipedia.org/wiki/Histogram#Examples
for (var i = 1, n = bins.length, bin; i < n; i++) {
bin = bins[i];
bin.offset = bins[i - 1].Income;
bin.width = bin.Income - bin.offset;
bin.height = bin.People / bin.width;
}
// Drop the first bin, since it's incorporated into the next.
bins.shift();
// Set the scale domain.
x.domain([0, d3.max(bins.map(function(d) { return d.offset + d.width; }))]);
y.domain([0, d3.max(bins.map(function(d) { return d.height; }))]);
// Add the bins.
svg.selectAll(".bin")
.data(bins)
.enter().append("rect")
.attr("class", "bin")
.attr("x", function(d) { return x(d.offset); })
.attr("width", function(d) { return x(d.width) - 1; })
.attr("y", function(d) { return y(d.height); })
.attr("height", function(d) { return height - y(d.height); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis()
.scale(y)
.orient("left"));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.