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.
Below you can find videos related to this demo. Please note that some content is discussed in-class only.
To get started with D3.js, I highly recommend you look at the fantastic tutorials below:
These tutorials give more explanation to how D3 works than you will find in this demo.
xxxxxxxxxx<head> <meta charset="utf-8"> <title>Letter Count Bar Chart</title> <!-- include d3.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script> <!-- include google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:300,300italic" rel="stylesheet" type="text/css"> <!-- custom stylesheet for our visualization --> <link href="style.css" rel="stylesheet" type="text/css"> <!-- our javascript code for counting letters --> <script src="count.js" type="text/javascript"></script> <!-- our javascript code for our bar chart --> <script src="chart.js" type="text/javascript"></script></head><body> <!-- we will place our visualization in this svg --> <svg></svg> <!-- we will place the text that we'll analyze here --> <textarea></textarea> <script type="text/javascript"> /* * lets add a rectangle around our entire svg to help debug */ // 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