monte-hayward/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>D3 Bar Chart</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <svg class="chart vert"></svg>
        <script src="http://d3js.org/d3.v3.js"  charset="utf-8"></script>
        <script src="ordinal.js"></script>
    </body>
</html>

## letters.tsv

          
            name
            value

            
              A
              .08167

            
              B
              .01492

            
              C
              .02782

            
              D
              .04253

            
              E
              .12702

            
              F
              .02288

            
              G
              .02015

            
              H
              .06094

            
              I
              .06966

            
              J
              .00153

            
              K
              .00772

            
              L
              .04025

            
              M
              .02406

            
              N
              .06749

            
              O
              .07507

            
              P
              .01929

            
              Q
              .00095

            
              R
              .05987

            
              S
              .06327

            
              T
              .09056

            
              U
              .02758

            
              V
              .00978

            
              W
              .02360

            
              X
              .00150

            
              Y
              .01974

            
              Z
              .00074

## ordinal.js
    //prep - before data arrives
    var margin = {top: 20, right: 30, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
      VERTICAL= [height, 0],
      HORIZ = [0, width];
    var x = d3.scale.ordinal().rangeRoundBands(HORIZ, .1);
    var y = d3.scale.linear().range(VERTICAL);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient('bottom');
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left')
      .ticks(10, '%');
    var chart = d3.select('.chart')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
     .append('g')
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')' );
    d3.tsv(
      'letters.tsv',
      type,
      function(error, data){
        x.domain( data.map( function(d){ return d.name } ) );
      	y.domain([0, d3.max(data, function(d){ return d.value}) ]);

        chart.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis)
          .append('text')
            .attr('y', 16)
            .attr('dy', '.71rem')
            .text('Character of Alphabet');

        chart.append('g')
            .attr('class', 'y axis')
            .call(yAxis)
          .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', 6)
            .attr('dy', '.71rem')
            .style('text-anchor', 'end')
            .text('Frequency');


        var bars = chart.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr('class', 'bar')
          .attr('x', function(d) { return x(d.name) })
          .attr('y', function(d) { return y(d.value) })
          .attr('height', function(d) { return height - y(d.value) })
          .attr('width', x.rangeBand());
    });

    function type(d){
      d.value = +d.value; // coerce a number
      return d;
    }

## style.css
.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}


html * {
	box-sizing: border-box;
}

.axis text {
	font: 10px sans-serif;
}

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

.x.axis path {
	display:none;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>D3 Bar Chart</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<svg class="chart vert"></svg>
	<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
	<script src="ordinal.js"></script>
	</body>
	</html>
	name	value
	A	.08167
	B	.01492
	C	.02782
	D	.04253
	E	.12702
	F	.02288
	G	.02015
	H	.06094
	I	.06966
	J	.00153
	K	.00772
	L	.04025
	M	.02406
	N	.06749
	O	.07507
	P	.01929
	Q	.00095
	R	.05987
	S	.06327
	T	.09056
	U	.02758
	V	.00978
	W	.02360
	X	.00150
	Y	.01974
	Z	.00074
	//prep - before data arrives
	var margin = {top: 20, right: 30, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom,
	VERTICAL= [height, 0],
	HORIZ = [0, width];
	var x = d3.scale.ordinal().rangeRoundBands(HORIZ, .1);
	var y = d3.scale.linear().range(VERTICAL);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom');
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left')
	.ticks(10, '%');
	var chart = d3.select('.chart')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')' );
	d3.tsv(
	'letters.tsv',
	type,
	function(error, data){
	x.domain( data.map( function(d){ return d.name } ) );
	y.domain([0, d3.max(data, function(d){ return d.value}) ]);

	chart.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xAxis)
	.append('text')
	.attr('y', 16)
	.attr('dy', '.71rem')
	.text('Character of Alphabet');

	chart.append('g')
	.attr('class', 'y axis')
	.call(yAxis)
	.append('text')
	.attr('transform', 'rotate(-90)')
	.attr('y', 6)
	.attr('dy', '.71rem')
	.style('text-anchor', 'end')
	.text('Frequency');



	var bars = chart.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr('class', 'bar')
	.attr('x', function(d) { return x(d.name) })
	.attr('y', function(d) { return y(d.value) })
	.attr('height', function(d) { return height - y(d.value) })
	.attr('width', x.rangeBand());
	});

	function type(d){
	d.value = +d.value; // coerce a number
	return d;
	}
	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}


	html * {
	box-sizing: border-box;
	}

	.axis text {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display:none;
	}