Letter Count Bar Chart (2020 Edition)

Letter Count Bar Chart

In this demo, we asynchronously load a text file, use JavaScript to count the number of times each letter appears in that file, and generate a bar chart showing the letter count in D3.js v5.

This is meant to be an introductory demo to expose students to HTML, CSS, SVG, JavaScript, D3, Bl.ocks, Blockbuilder, and VizHub for the first time.

References

This example can be found at: Gist, Bl.ocks, Blockbuilder, VizHub

The starter template for this example can be found at: Gist

See the Wikipedia page Peter Piper Nursery Rhyme for the origins behind the text used in this example.

Inspirations

This example has undergone multiple iterations:

Using Observable Notebook and D3v5: https://observablehq.com/d/28ba93f58fb82f49
Using Bl.ocks and D3v5: https://bl.ocks.org/sjengle/1e23258249638a508426470a48ff2924
Using Bl.ocks and D3v3: https://bl.ocks.org/sjengle/e8c0d6abc0a8d52d4b11

Below you can find videos related to an older version of this example. Please note that some content was discussed in-class only:

The original inspirations come from the following excellent tutorials on creating a bar chart in D3 for the first time:

D3 Bar Chart by Mike Bostock, Observable Notebook using D3v5, published on November 2017.
Let's Make a Bar Chart by Mike Bostock, Blog Post using D3v3, published on November 2013.
Making a Bar Chart by Scott Murray, Blog Post using D3v3, updated on December 2018.

<!DOCTYPE html>

<title>Letter Count Bar Chart</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300italic" rel="stylesheet" type="text/css">

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<svg></svg>

<textarea></textarea>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script src="https://d3js.org/d3-array.v2.min.js"></script>

<script src="count.js"></script>
<script src="chart.js"></script>

<script type="text/javascript">
// inside the script tag, // and /* */ are comments
// outside the script tag,  are comments

// creating a global variable to hold our axis and scales
let chart = {};

console.log("before d3.text() call");

// we need to load the text file into the textarea
// this will be done asynchronously!
// https://github.com/d3/d3-fetch/blob/master/README.md#text
d3.text("peter.txt").then(function(text) {

// we will use the console and developer tools extensively
  console.log("data loaded:");
  console.log(text);

// we select the textarea from the DOM and update
  // https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

// select statements use css selectors to find elements in the DOM
  // https://github.com/d3/d3-selection/blob/master/README.md#select
  d3.select("body").select("textarea").text(text);

drawBarChart();
});

// this message will appear BEFORE the text is logged!
console.log("after d3.text() call");

// add an event listener to our text area and
// update our chart every time new data is entered
d3.select("body").select("textarea")
  .on("keyup", updateBarChart);
</script>

</body>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-array.v2.min.js