Letter Count Bar Chart
This interactive bar chart displays the frequency of each letter in the text of the “Peter Piper” nursery rhyme, loaded asynchronously via `d3.text()`. Users can edit the text in a textarea to update the counts live, with the visualization re-rendering on each keyup event. The chart uses D3 v5 scales (`d3.scaleLinear` for counts, `d3.scaleBand` for letters), SVG rectangles for bars, and axes (`d3.axisBottom`, `d3.axisRight`). Letter counting is implemented in JavaScript with a `Map` object, and updates use D3’s data join.
AI-generated descriptionLetter 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.