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.

This is meant to be an introductory demo to expose students to HTML, CSS, JavaScript, D3.js, bl.ocks.org, and blockbuilder.org for the first time.

Videos

Below you can find videos related to this demo. Please note that some content is discussed in-class only.

References

Peter Piper Nursery Rhyme
Bar Chart Block by Mike Bostock

Inspirations

To get started with D3.js, I highly recommend you look at the fantastic tutorials below:

Let's Make a Bar Chart by Mike Bostock
Making a Bar Chart by Scott Murray

These tutorials give more explanation to how D3 works than you will find in this demo.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Letter Count Bar Chart</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script>

<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">

<script src="count.js" type="text/javascript"></script>

<script src="chart.js" type="text/javascript"></script>
</head>

<textarea></textarea>

// we can select specific elements in the "DOM" using d3
  var svg = d3.select("body").select("svg");

// get the calculated bounding box of the svg
  var bounds = svg.node().getBoundingClientRect();
  console.log("svg bounds:", bounds);

// add the rectangle to the svg
  // https://github.com/mbostock/d3/wiki/SVG-Shapes#svg_rect
  var border = svg.append("rect")
      .attr("id", "bounds")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", bounds.width)
      .attr("height", bounds.height);

/*
   * whoa, look at all those chained methods! this is very
   * common, but doesn't work with everything. see:
   * https://alignedleft.com/tutorials/d3/chaining-methods
   */

// suppose we wanted rounded corners. instead of chaining we could do:
  border = border.attr("rx", 10);
  border = border.attr("ry", 10);

// we will style this rectangle in css using its id
  // take a look at the css file

/*
   * load sample text to analyze. this external file request will be handled
   * asynchronously, meaning the browser will not wait for the file and will
   * instead continue executing the rest of this script. when the load is done,
   * the callback function will be called.
   */
  d3.text("peter.txt", function(error, data) { // anonymous function
    if (error) {
      console.warn(error);
      return;
    }

console.log(data);

/*
     * now we need to select the textarea from the DOM
     * https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
     * https://github.com/mbostock/d3/wiki/Selections#text
     */
    d3.select("body").select("textarea").text(data);

// we should draw the bar chart after the data is loaded
    drawBarChart();
  });

// bonus material (cover only if time)

/*
   * it would be nice to change the text and see our bar chart update! we can
   * do that by adding an event listener. every time a key press is completed
   * (the key is pressed down, and fully released), we will update our data
   * and our resulting visualization.
   */
  d3.select("body").select("textarea")
    .on("keyup", drawBarChart);
  </script>
</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js