Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active February 9, 2016 01:04
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/1624660 to your computer and use it in GitHub Desktop.
Save mbostock/1624660 to your computer and use it in GitHub Desktop.
Irregular Histogram
license: gpl-3.0
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="//d3js.org/d3.v3.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