Frequency Bar Chart

Posted on by Kathleen Marrs, Ph.D.
This simple bar chart originally by Mike Bostock is constructed from a TSV file storing the frequency of letters in the English language. The chart uses the following D3 features:
  • d3.tsv - loads and parses data from a tab separated file
  • d3.format - format percentages
  • d3.scale.ordinal - x-position encoding
  • d3.scale.linear - y-position encoding
  • d3.max - compute domains
  • d3.svg.axis = display axes
[d3-source canvas="wpd3-675-0"]
Source Files
WordPress users can adapt it as follows:
  1. Download the dependent js: ds.min.js (too big to show the code here).
  2. Create the data.tsv data file and CSS (shown below).
  3. Upload all three files to the media gallery noting their absolute paths.
  4. Copy the SVG canvas object code and paste in the WP-D3 editor.
  5. Make the following changes:
    1. var svg = d3.select(“.yourobjectname") - don't forget the dot!
    2. d3.tsv(“pathtoyourdatafile")
  6. Include the dependent files using the paths noted in step 3.
WP-D3 SVG Canvas Object Code
var margin = {top: 20, right: 20, bottom: 30, left: 40},
   width = 600 - margin.left - margin.right,
   height = 312 - 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 yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .ticks(10, "%");

var svg = d3.select(".wpd3-38-0").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.tsv("/wp-content/uploads/2014/10/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; })]);

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

svg.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");

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

function type(d) {
  d.frequency = +d.frequency;
  return d;
}
Data Source: 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
CSS
.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;
}
Kathleen Marrs, Ph.D.
Kathleen wants to live in a world filled with open books, open source, open hearts, and open minds in which diversity is embraced and creativity flourishes.

A long time CPA turned online professor, Kathleen’s life was transformed upon completion of her dissertation An Investigation of the Factors that Influence Faculty and Student Acceptance of Mobile Learning in Online Higher Education.

Her statistical analyses was called ”pioneering” by her committee chair Dr. Marlyn K. Littman and brought Kathleen full circle back to her number-crunching roots inspiring her to earn a second master’s in Business Intelligence.

Kathleen plans to continue her studies of contemporary issues related to teaching, learning, and technology and loves to help undergrad and grad students achieve their academic and professional goals. As a lifelong learner she also plans on continuing her quest to understand the problems posed by mobile and micro learning formats and find innovative ways of helping people maximize the benefits these emerging technologies afford.
[print-me]