jswank · August 29, 2015 13:56 · Feb 27, 2014 · Feb 27, 2014 · Feb 27, 2014 · Feb 27, 2014
diff --git a/data.csv b/data.csv
@@ -0,0 +1,12 @@
+name,value
+brianf,4.97
+bmayhew,3.82
+dho,3.93
+jcorman,2.66
+jswank,3.73
+kgardner,4.91
+mfilosa,4.52
+psutela,3.20
+pvolkman,1.97
+rberg,0.48
+schauhan,1.26
diff --git a/data.tsv b/data.tsv
@@ -1,12 +0,0 @@
-name	value
-brianf	4.97
-bmayhew	3.82
-dho	3.93
-jcorman	2.66
-jswank	3.73
-kgardner	4.91
-mfilosa	4.52
-psutela	3.20
-pvolkman	1.97
-rberg	0.48
-schauhan	1.26

diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
 
 function renderChart(data) {
 
-// var data = d3.csv.parse(d3.select('#csv').text());
 var valueLabelWidth = 40; // space reserved for value labels (right)
 var barHeight = 20; // height of one bar
 var barLabelWidth = 100; // space reserved for bar labels
@@ -83,7 +82,7 @@
 
 }
 
-d3.tsv("data.tsv", null, function(error, data) {
+d3.tsv("data.csv", null, function(error, data) {
 	renderChart(data);
 });
 

diff --git a/data.tsv b/data.tsv
@@ -9,4 +9,4 @@ mfilosa	4.52
 psutela	3.20
 pvolkman	1.97
 rberg	0.48
-schauhan  1.26
+schauhan	1.26
diff --git a/data.tsv b/data.tsv
@@ -1,11 +1,12 @@
 name	value
-brianf	4.4
-bmayhew	3.2
-dho	1.0
-jcorman	3.2
-jswank	3.2
-kgardner	4.3
-mfilosa	1.2
-psutela	3.9
-pvolkman	1.2
-rberg	0.9
+brianf	4.97
+bmayhew	3.82
+dho	3.93
+jcorman	2.66
+jswank	3.73
+kgardner	4.91
+mfilosa	4.52
+psutela	3.20
+pvolkman	1.97
+rberg	0.48
+schauhan  1.26
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+A bar chart.
diff --git a/data.tsv b/data.tsv
@@ -0,0 +1,11 @@
+name	value
+brianf	4.4
+bmayhew	3.2
+dho	1.0
+jcorman	3.2
+jswank	3.2
+kgardner	4.3
+mfilosa	1.2
+psutela	3.9
+pvolkman	1.2
+rberg	0.9
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<div id="chart"></div>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+
+function renderChart(data) {
+
+// var data = d3.csv.parse(d3.select('#csv').text());
+var valueLabelWidth = 40; // space reserved for value labels (right)
+var barHeight = 20; // height of one bar
+var barLabelWidth = 100; // space reserved for bar labels
+var barLabelPadding = 5; // padding between bar and bar labels (left)
+var gridLabelHeight = 18; // space reserved for gridline labels
+var gridChartOffset = 3; // space between start of grid and first bar
+var maxBarWidth = 420; // width of the bar with the max value
+
+// accessor functions 
+var barLabel = function(d) { return d['name']; };
+var barValue = function(d) { return parseFloat(d['value']); };
+
+// scales
+var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
+var y = function(d, i) { return yScale(i); };
+var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
+var x = d3.scale.linear().domain([0, 10]).range([0, maxBarWidth]);
+// svg container element
+var chart = d3.select('#chart').append("svg")
+  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
+  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
+// grid line labels
+var gridContainer = chart.append('g')
+  .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); 
+gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
+  .attr("x", x)
+  .attr("dy", -3)
+  .attr("text-anchor", "middle")
+  .text(String);
+// vertical grid lines
+gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
+  .attr("x1", x)
+  .attr("x2", x)
+  .attr("y1", 0)
+  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
+  .style("stroke", "#ccc");
+// bar labels
+var labelsContainer = chart.append('g')
+  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
+labelsContainer.selectAll('text').data(data).enter().append('text')
+  .attr('y', yText)
+  .attr('stroke', 'none')
+  .attr('fill', 'black')
+  .attr("dy", ".35em") // vertical-align: middle
+  .attr('text-anchor', 'end')
+	.text(barLabel);
+
+// bars
+
+var barsContainer = chart.append('g')
+  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
+barsContainer.selectAll("rect").data(data).enter().append("rect")
+  .attr('y', y)
+  .attr('height', yScale.rangeBand())
+  .attr('width', function(d) { return x(barValue(d)); })
+  .attr('stroke', 'white')
+  .attr('fill', 'steelblue');
+// bar value labels
+barsContainer.selectAll("text").data(data).enter().append("text")
+  .attr("x", function(d) { return x(barValue(d)); })
+  .attr("y", yText)
+  .attr("dx", 3) // padding-left
+  .attr("dy", ".35em") // vertical-align: middle
+  .attr("text-anchor", "start") // text-align: right
+  .attr("fill", "black")
+  .attr("stroke", "none")
+  .text(function(d) { return d3.round(barValue(d), 2); });
+// start line
+barsContainer.append("line")
+  .attr("y1", -gridChartOffset)
+  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
+  .style("stroke", "#000");
+
+}
+
+d3.tsv("data.tsv", null, function(error, data) {
+	renderChart(data);
+});
+
+</script>
+
+</body>