pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Reusable version of http://bl.ocks.org/mbostock/3885304" that handles negative values.

  
## barChart.js
function barChart() {

  var width = 960,
      height = 500,
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; };

  var margin = {top: 30, right: 30, bottom: 30, left: 30},
      xScale = d3.scale.ordinal(),
      yScale = d3.scale.linear(),
      xAxis = d3.svg.axis(),
      yAxis = d3.svg.axis();

  function chart(selection) {
    selection.each(function(data) {

      // Convert to standard data representation greedily;
      // this is needed for nondeterministic accessors.
      data = data.map(function(d, i) {
        return [ xValue.call(data, d, i), yValue.call(data, d, i) ];
      });

      // Update the x scale.
      xScale
          .rangeRoundBands([margin.left , width - margin.left - margin.right], .1)
          .domain(data.map(function(d) { return d[0]; }));

      // Update the y scale.
      yScale
          .range([height - margin.top - margin.bottom, 0])
          .domain(d3.extent(data, function(d) { return d[1]; }));

      // Update the x axis.
      var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient("bottom");

      // Update the y axis.
      var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left")
          .ticks(10, "%");

      // Update the inner dimensions
      var g = d3.select(this).append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      g.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + yScale.range()[0] + ")")
          .call(xAxis);

      g.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + margin.left + ", 0)")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Frequency");

      g.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return xScale(d[0]); })
          .attr("width", xScale.rangeBand())
          .attr("y", function(d) { return ( yScale(0) - yScale(d[1]) ) > 0 ? yScale(d[1]) : yScale(0); })
          .attr("height", function(d) { return Math.abs( yScale(0) - yScale(d[1]) ) });

      g.append("path")
          .datum([ [d3.min(xScale.range()), yScale(0)], [d3.max(xScale.range()) + xScale.rangeBand(), yScale(0)] ])
          .attr("d", d3.svg.line())
          .style("stroke", "#333")
          .style("stroke-width", "1")
    });
  }

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return xValue;
    yValue = _;
    return chart;
  };

  chart.width  = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  return chart;
}

## data.tsv

          
            letter
            frequency

            
              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

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

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

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

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

.x.axis path {
/*  display: none; */
}

#container {
  width: 100%;
  height: 0;
  padding-top: 52.1%;  /* aspect ratio 500/960 for width = 100% */
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="barChart.js"></script>
<script>

var margin = { top: 30, left: 30, bottom: 30, right: 30 };
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

d3.select("body").append("div").append("svg")
    .attr('viewBox', "0, 0, " + (width + margin.left + margin.right) + ", " + (height + margin.top + margin.bottom))
    .attr('preserveAspectRatio', "xMinYMid")
  .append("g")
    .attr("id", "container")
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

d3.select("#container").append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#ccc")

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  var chart = barChart()
    .x(function(d) { return d.letter; })
    .y(function(d) { return +d.frequency; })
    .width(width)
    .height(height);

  d3.select("#container")
    .datum(data)
    .call(chart);
});

</script>
	function barChart() {

	var width = 960,
	height = 500,
	xValue = function(d) { return d[0]; },
	yValue = function(d) { return d[1]; };

	var margin = {top: 30, right: 30, bottom: 30, left: 30},
	xScale = d3.scale.ordinal(),
	yScale = d3.scale.linear(),
	xAxis = d3.svg.axis(),
	yAxis = d3.svg.axis();

	function chart(selection) {
	selection.each(function(data) {

	// Convert to standard data representation greedily;
	// this is needed for nondeterministic accessors.
	data = data.map(function(d, i) {
	return [ xValue.call(data, d, i), yValue.call(data, d, i) ];
	});

	// Update the x scale.
	xScale
	.rangeRoundBands([margin.left , width - margin.left - margin.right], .1)
	.domain(data.map(function(d) { return d[0]; }));

	// Update the y scale.
	yScale
	.range([height - margin.top - margin.bottom, 0])
	.domain(d3.extent(data, function(d) { return d[1]; }));

	// Update the x axis.
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	// Update the y axis.
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(10, "%");

	// Update the inner dimensions
	var g = d3.select(this).append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + yScale.range()[0] + ")")
	.call(xAxis);

	g.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin.left + ", 0)")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Frequency");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return xScale(d[0]); })
	.attr("width", xScale.rangeBand())
	.attr("y", function(d) { return ( yScale(0) - yScale(d[1]) ) > 0 ? yScale(d[1]) : yScale(0); })
	.attr("height", function(d) { return Math.abs( yScale(0) - yScale(d[1]) ) });

	g.append("path")
	.datum([ [d3.min(xScale.range()), yScale(0)], [d3.max(xScale.range()) + xScale.rangeBand(), yScale(0)] ])
	.attr("d", d3.svg.line())
	.style("stroke", "#333")
	.style("stroke-width", "1")
	});
	}

	chart.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};

	chart.y = function(_) {
	if (!arguments.length) return xValue;
	yValue = _;
	return chart;
	};

	chart.width = function(_) {
	if (!arguments.length) return width;
	width = _;
	return chart;
	};

	chart.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return chart;
	};

	return chart;
	}
	letter	frequency
	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
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>bar</title>
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

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

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	}

	.x.axis path {
	/* display: none; */
	}

	#container {
	width: 100%;
	height: 0;
	padding-top: 52.1%; /* aspect ratio 500/960 for width = 100% */
	}

	svg {
	position: absolute;
	top: 0;
	left: 0;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="barChart.js"></script>
	<script>

	var margin = { top: 30, left: 30, bottom: 30, right: 30 };
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	d3.select("body").append("div").append("svg")
	.attr('viewBox', "0, 0, " + (width + margin.left + margin.right) + ", " + (height + margin.top + margin.bottom))
	.attr('preserveAspectRatio', "xMinYMid")
	.append("g")
	.attr("id", "container")
	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

	d3.select("#container").append("rect")
	.attr("width", width)
	.attr("height", height)
	.style("fill", "#ccc")

	d3.tsv("data.tsv", function(error, data) {
	if (error) throw error;

	var chart = barChart()
	.x(function(d) { return d.letter; })
	.y(function(d) { return +d.frequency; })
	.width(width)
	.height(height);

	d3.select("#container")
	.datum(data)
	.call(chart);
	});

	</script>