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 v4.
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.
This is based off the following example:
</sjengle/e8c0d6abc0a8d52d4b11>
It has been updated for D3.js v4 based on the following updated bar chart example:
https://bl.ocks.org/mbostock/3885304
Please see the original examples for videos and additional references.
forked from sjengle's block: Letter Count Bar Chart (d3v4)
xxxxxxxxxx
<!-- we are using html 5 -->
<head>
<meta charset="utf-8">
<title>Letter Count Bar Chart</title>
<!-- this allows us to use the non-standard Roboto web font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300italic" rel="stylesheet" type="text/css">
<!-- this is our custom css stylesheet -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- we will place our visualization in this svg using d3.js -->
<svg></svg>
<!-- we will place the text to analyze here using javascript -->
<textarea></textarea>
<!-- include d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- include custom javascript -->
<script src="count.js"></script>
<script src="chart.js"></script>
<!-- here is our core javascript -->
<script type="text/javascript">
// inside the script tag, // and /* */ are comments
// outside the script tag, <!-- --> are comments
// we need to load the text file into the textarea
// this will be done asynchronously!
// https://github.com/d3/d3-request/blob/master/README.md#text
d3.text("peter.txt", function(error, data) {
// we are creating a function within a method call here
if (error) throw error;
// we will use the console and developer tools extensively
console.log(data);
// now we select the textarea from the DOM and update
// https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
// https://github.com/d3/d3-selection/blob/master/README.md#select
d3.select("body").select("textarea").text(data);
// updateData();
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", drawBarChart);
</script>
</body>
https://d3js.org/d3.v4.min.js