jrrickard/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## backers.csv

          
            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

## index.html
<!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>
	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>