Lab 2 - D3 Basic Bar

Project Description: Letter Count Bar Chart

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

<textarea></textarea>

<script src="https://d3js.org/d3.v4.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

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