trebor · September 2, 2016 18:58
diff --git a/README.md b/README.md
diff --git a/comparison.png b/comparison.png
diff --git a/data.tsv b/data.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .bar {
  fill: steelblue;
 }

 .bar:hover {
  fill: brown;
 }

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

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

 .x.axis path {
  display: none;
 }

 </style>
 <body>
 <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
 <script src="https://rawgit.com/twitter/d3kit/v2.0.0/dist/d3kit.js" type="text/javascript"></script>
 <script>

 var skeleton = new d3Kit.Skeleton('body', {
  margin: {top: 20, right: 20, bottom: 30, left: 40},
  initialWidth: 960,
  initialHeight: 500
 });

 var x = d3.scaleBand()
  .paddingInner(0.1)
  .rangeRound([0, skeleton.getInnerWidth()]);

 var y = d3.scaleLinear()
  .range([skeleton.getInnerHeight(), 0]);

 var xAxis = d3.axisBottom()
  .scale(x);

 var yAxis = d3.axisLeft()
  .scale(y)
  .ticks(10, "%");

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

  skeleton.getRootG().append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + skeleton.getInnerHeight() + ")")
      .call(xAxis);

  skeleton.getRootG().append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");

  skeleton.getRootG().selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return skeleton.getInnerHeight() - y(d.frequency); });

 });

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

 </script>
diff --git a/ss.png b/ss.png
diff --git a/thumbnail.png b/thumbnail.png
	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">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

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

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

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
	<script src="https://rawgit.com/twitter/d3kit/v2.0.0/dist/d3kit.js" type="text/javascript"></script>
	<script>

	var skeleton = new d3Kit.Skeleton('body', {
	margin: {top: 20, right: 20, bottom: 30, left: 40},
	initialWidth: 960,
	initialHeight: 500
	});

	var x = d3.scaleBand()
	.paddingInner(0.1)
	.rangeRound([0, skeleton.getInnerWidth()]);

	var y = d3.scaleLinear()
	.range([skeleton.getInnerHeight(), 0]);

	var xAxis = d3.axisBottom()
	.scale(x);

	var yAxis = d3.axisLeft()
	.scale(y)
	.ticks(10, "%");

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

	skeleton.getRootG().append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + skeleton.getInnerHeight() + ")")
	.call(xAxis);

	skeleton.getRootG().append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Frequency");

	skeleton.getRootG().selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.letter); })
	.attr("width", x.bandwidth())
	.attr("y", function(d) { return y(d.frequency); })
	.attr("height", function(d) { return skeleton.getInnerHeight() - y(d.frequency); });

	});

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

	</script>