Overview

[There are] two homework assignments you can complete for this week (you must do one, you may do both for extra credit). Your assignment[s] should be in the form of an HTML page, which I will be able to run locally. Refer to the file js_in_webpage.html on the GitHub page for instructions on setting up JavaScript to run on an HTML page, and how to run/debug. You should complete both [parts of each exercise] in 2 (or more) functions on one HTML page.

Exercise 1

This is geared towards those of you who have never worked with JavaScript before.

Part 1

Create a function to reverse any word that you type in. This can be typed into either an input box or an alert box, and then print the result in a box or on the webpage.

<script type="text/javascript">
function update_e1p1(word){
  var flip = word.split("").reverse().join("");
  var msg = word + ' in reverse is ' + flip;
  return(msg)
};
function callback_e1p1(){
  var t = document.getElementById("target_e1p1");
  t.innerHTML = update_e1p1(document.getElementById('word_e1p1').value);
}
</script>
<form>
  <input id="word_e1p1" type="text" size="20">
  <input type="button" value="Reverse" onClick="callback_e1p1();">
</form>
<div id="target_e1p1"></div>

Part 2

Create a function that takes an input number, and prints a table with the first 20 multiples of the number, in order \(5\times4\). Example: Type in “2” and it results in:

<table>
<tr><td>2</td><td>4</td><td>6</td><td>8</td></tr>
<tr><td>10</td><td>12</td><td>14</td><td>16</td></tr>
<tr><td>18</td><td>20</td><td>22</td><td>24</td></tr>
<tr><td>26</td><td>28</td><td>30</td><td>32</td></tr>
<tr><td>34</td><td>36</td><td>38</td><td>40</td></tr>
</table>

<script type="text/javascript">
function update_e1p2(num){
  var mult = Array.from(new Array(20), (x,i) => i + 1);
  var vals = mult.map(x => x * num);
  var elem = "";  
  for (var i = 0; i < vals.length; i++) {  
    if (i % 4 == 0) {
      elem += "<tr><td>" + vals[i] + "</td>";
    } else if (i + 1 % 4 == 0) {
      elem += "<td>" + vals[i] + "</td></tr>";
    } else {
      elem += "<td>" + vals[i] + "</td>";
    }  
  }
  var table = '<table>' + elem + '</table>';  
  return(table)
};
function callback_e1p2(){
  var t = document.getElementById("target_e1p2");
  t.innerHTML = update_e1p2(document.getElementById('num_e1p2').value);
}
</script>
<form>
  <input id="num_e1p2" type="number" size="4">
  <input type="button" value="Multiples" onClick="callback_e1p2();">
</form>
<div id="target_e1p2"></div>

Exercise 2

This is geared towards those of you who have worked with JavaScript before. Some core concepts of D3 are introduced in Chapter 5 of Interactive Data Visualization for the Web by Scott Murray. For D3 examples, check out some of Mike Bostock’s sites. Bl.ocks is Mike’s original shared gallery of D3 projects, and observableHQ is his new notebook environment that will let you play with D3 live. Seeing examples with plotly.js will be a good way to understand how an interactive visualization works in JavaScript. ObservableHQ and Bl.ocks are good ways of understanding D3 on their own, and hopefully combined with the above resources will give you a good start towards creating D3 visualizations.

Part 1

Write a function to load the presidents.csv data and display the data as an html table (you may use a .csv parser from any available library, though I encourage you to try the D3 one).

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update_e2p1(data,columns) {
  var table = d3.select('#target_e2p1').append('table')
  var thead = table.append('thead')
  var tbody = table.append('tbody')
  thead.append('tr').selectAll('th').data(columns).enter().append('th').text(function (d) { return d })
  var rows = tbody.selectAll('tr').data(data).enter().append('tr')
  var cells = rows.selectAll('td').data(function(row) {
    return columns.map(function (column) {
      return { column: column, value: row[column] } })
  }).enter().append('td').text(function (d) { return d.value })
  return table;
}
function clear_e2p1() {
  var table = d3.select('#target_e2p1').selectAll("table").remove();
}
function callback_e2p1(){
  var github = 'https://raw.githubusercontent.com/jzuniga123/SPS/master/DATA%20608/presidents.csv'
  var t = d3.csv(github,function (data) {
    var columns = ['Name','Height','Weight'];
    update_e2p1(data,columns); });
}
</script>
<form>
  <input type="button" value="Import CSV and Generate Table" onclick="clear_e2p1(); callback_e2p1()">
  <input type="reset" value="Clear" onclick="clear_e2p1()">  
</form>
<div id="target_e2p1"></div>

Part 2

Now that you have the presidents data loaded, write a function that will return that president’s height & weight when you type it in. This can be typed into either an input box or an alert box, and then print the result in a box or on the webpage.

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update_e2p2(data,columns) {
  var table = d3.select('#target_e2p2').append('table')
  var thead = table.append('thead')
  var tbody = table.append('tbody')
  thead.append('tr').selectAll('th').data(columns).enter().append('th').text(function (d) { return d })
  var rows = tbody.selectAll('tr').data(data).enter().append('tr')
  var cells = rows.selectAll('td').data(function(row) {
    return columns.map(function (column) {
      return { column: column, value: row[column] } })
  }).enter().append('td').text(function (d) { return d.value })
  return table;
}
function clear_e2p2() {
  var table = d3.select('#target_e2p2').selectAll("table").remove();
}
function callback_e2p2(){
  var pres = document.getElementById('word_e2p2').value
  var github = 'https://raw.githubusercontent.com/jzuniga123/SPS/master/DATA%20608/presidents.csv'
  var t = d3.csv(github,function (data) {
    var columns = ['Name','Height','Weight'];
    var subset = data.filter( function(d) { return d.Name.toLowerCase().indexOf( pres ) !== -1 } ); 
    update_e2p2(subset,columns) });
}
</script>
<form>
  <input id="word_e2p2" type="text" size="20">
  <input type="button" value="Filter" onclick="clear_e2p2(); callback_e2p2()">
  <input type="reset" value="Clear" onclick="clear_e2p2()">  
</form>
<div id="target_e2p2"></div>