wboykinm/data.csv

## data.csv

          
            bin
            min
            max
            freq

            
              1
              0
              25243
              76

            
              2
              25243
              32686
              111

            
              3
              32686
              32852
              48

            
              4
              32852
              38045
              65

            
              5
              38045
              38523
              26

            
              6
              38523
              40841
              21

            
              7
              40841
              44421
              135

            
              8
              44421
              45833
              80

            
              9
              45833
              50278
              162

            
              10
              50278
              53592
              308

            
              11
              53592
              55859
              183

            
              12
              55859
              56190
              80

            
              13
              56190
              57981
              192

            
              14
              57981
              63438
              412

            
              15
              63438
              69000
              371

            
              16
              69000
              71250
              110

            
              17
              71250
              78935
              696

            
              18
              78935
              88056
              458

            
              19
              88056
              96974
              215

            
              20
              96974
              134453
              699

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

.bar {
  fill: #9bd2ce;
}

.bar:hover {
  fill: #49ada6;
}

.axis {
  font: 8px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 10, right: 10, bottom: 15, left: 20},
    width = 380 - margin.left - margin.right,
    height = 80 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("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 + ")");

d3.csv("data.csv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.max; }));
  y.domain([0, d3.max(data, function(d) { return d.freq; })]);

  var fullSet = data.map(function(d) { return d.max; });

  xAxis.tickValues([fullSet[1], fullSet[7], fullSet[13], fullSet[19]]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.max); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.freq); })
      .attr("height", function(d) { return height - y(d.freq); });
});

function type(d) {
  d.freq = +d.freq;
  return d;
}

</script>
</body>
bin	min	max	freq
1	0	25243	76
2	25243	32686	111
3	32686	32852	48
4	32852	38045	65
5	38045	38523	26
6	38523	40841	21
7	40841	44421	135
8	44421	45833	80
9	45833	50278	162
10	50278	53592	308
11	53592	55859	183
12	55859	56190	80
13	56190	57981	192
14	57981	63438	412
15	63438	69000	371
16	69000	71250	110
17	71250	78935	696
18	78935	88056	458
19	88056	96974	215
20	96974	134453	699
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>

	.bar {
	fill: #9bd2ce;
	}

	.bar:hover {
	fill: #49ada6;
	}

	.axis {
	font: 8px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 10, right: 10, bottom: 15, left: 20},
	width = 380 - margin.left - margin.right,
	height = 80 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("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 + ")");

	d3.csv("data.csv", type, function(error, data) {
	x.domain(data.map(function(d) { return d.max; }));
	y.domain([0, d3.max(data, function(d) { return d.freq; })]);

	var fullSet = data.map(function(d) { return d.max; });

	xAxis.tickValues([fullSet[1], fullSet[7], fullSet[13], fullSet[19]]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.max); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.freq); })
	.attr("height", function(d) { return height - y(d.freq); });
	});

	function type(d) {
	d.freq = +d.freq;
	return d;
	}

	</script>
	</body>