This is a snapshot of the Reading Rainbow Kickstarter Campaign as of 9:07 PM MDT on May 30th, 2014.
Using a simple bar chart using D3.js, you can quickly see where most of the backers cluster.
This is a snapshot of the Reading Rainbow Kickstarter Campaign as of 9:07 PM MDT on May 30th, 2014.
Using a simple bar chart using D3.js, you can quickly see where most of the backers cluster.
Pledge | Backers | |
---|---|---|
5 | 13360 | |
10 | 9374 | |
25 | 5925 | |
35 | 4049 | |
50 | 16595 | |
75 | 2826 | |
100 | 2618 | |
110 | 750 | |
125 | 757 | |
175 | 224 | |
200 | 1380 | |
250 | 600 | |
350 | 100 | |
375 | 192 | |
400 | 126 | |
600 | 30 | |
700 | 1 | |
750 | 43 | |
800 | 34 | |
1500 | 9 | |
2500 | 10 | |
3000 | 1 | |
3500 | 10 | |
5000 | 5 | |
10000 | 6 |
<!Doctype html> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.bar { | |
fill: steelblue; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script type="text/javascript"> | |
var margin = {top: 20, right: 30, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .1, .2); | |
var y = d3.scale.linear() | |
.range([height, 0]).clamp(true).nice(); | |
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 + ")"); | |
d3.csv("backers.csv", | |
function(d) { | |
return { | |
Backers : +d.Backers, | |
Pledge : +d.Pledge | |
}; | |
}, | |
function(error,data) { | |
var max = d3.max(data, function(d) { return d.Backers; }); | |
var min = d3.min(data, function(d) { return d.Backers; }); | |
x.domain(data.map(function(d) { return d.Pledge; })); | |
y.domain([min,max]); | |
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").ticks(20).tickFormat(d3.format("d"))); | |
svg.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d.Pledge); }) | |
.attr("width", x.rangeBand()) | |
.attr("y", function(d) { return y(d.Backers); }) | |
.attr("height", function(d) { return height - y(d.Backers); }); | |
}); | |
</script> |