Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 9, 2016
Embed
What would you like to do?
Irregular Histogram (Lollipop)
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;
}
line.bin {
stroke: #000;
stroke-width: 3px;
}
.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;
});
// Set the scale domains.
x.domain([0, d3.max(bins.map(function(d) { return d.Income; }))]).nice();
y.domain([0, d3.max(bins.map(function(d) { return d.People; }))]).nice();
// Add the bins.
svg.selectAll(".bin")
.data(bins)
.enter().append("line")
.attr("class", "bin")
.attr("x1", function(d) { return x(d.Income); })
.attr("x2", function(d) { return x(d.Income); })
.attr("y1", height)
.attr("y2", function(d) { return y(d.People); });
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