release homework 3

Author: haihan-lin

hw3/README.md

@@ -0,0 +1,118 @@
+# CS-5630 / CS-6630 Homework 3
+
+_Due: Friday, September 16, 11:59 pm._
+
+In this assignment, you will make interactive charts with JavaScript and D3 to explore Covid-19 data.
+
+## Implementation
+
+We have provided boilerplate code in [hw3.html](hw3.html) and in [script.js](script.js).
+
+As in previous homeworks, add your name, your e-mail address, and your uID to the HTML elements at the top.
+
+The project structure should look like this:
+
+    hw3/
+        hw3.html
+        README.md
+        script.js
+        data/
+            covid_us.csv
+            covid_utah.csv
+            covid_ca.csv
+            covid_ny.csv
+        figures/
+
+Remember, to be able to access the data files with JavaScript, we will need to be *serving* the homework directory, not just opening the HTML file in a browser. If your development environment doesn't provide a built-in server, start one with one of these commands:
+
+    $ cd path/to/hw3
+    # for python 3
+    $ python -m http.server 8080
+
+View the page at [http://localhost:8080](http://localhost:8080)
+
+## Part I: Basic Events and Setup
+
+In the boilerplate HTML we provide three controls: two “Select” menus for choosing a dataset and metrics, and a “Random Subset” checkbox. Attach event listeners to the menus and checkbox in the `setup()` function, so that they would call `changeData()` when the value changes. 
+
+For this homework, you can add to html so that you have `<svg>` and some `<g>` elements to work with, or add those required elements in the `setup()` function, that will only be called once. The HTML also has some styling that you can use for different charts. 
+
+## The Data
+*This section is informational only, no need to implement anything.*
+
+We've given you the code that loads and parses the CSV data depending on which option the user selects. `changeData()` imports the `.csv` file based on the output of menus, and output the corresponding data structure. The output is an array of objects, where the data has already been parsed:
+
+```JSON
+[...,
+{cases: 5842, date: "08/27", deaths: 144},
+{cases: 5383, date: "08/28", deaths: 148},
+...]
+```
+
+Make sure to familiarize yourself with the data structure, e.g., by printing the object and exploring it in the console. 
+
+Each object in the array has the date, cases, and deaths of COVID cases. `changeData()` calls `update()` with the output data, and `update()` is where the visualization will update based on the data. 
+
+Implement each chart with the `data` input of `update()`. 
+
+## Part II: Drawing the Visaulizations with D3
+
+The bar chart, line chart, and area chart uses the date for x-axis, and the selected metric of the Data Metric drop-down for the values rendered on the y-axis. 
+You can retrieve the value of the drop-down with `d3.select("#metric").node().value ;`. 
+
+The scatterplot uses the cases for x-axis, and the deaths for y-axis.
+
+1. Construct scales for each chart. (_hint: the y-axis for bar chart, line charts, and area charts are the same_)
+2. Draw axis for each chart. 
+3. Draw and update elements based on `data` input.
+
+Using some constant "margin" can be helpful when placing an axis on a chart so that the axis labels are shown within the svg. We have some constants defined globally that you might find useful. But make sure that the scales are also adjusted when margins are incorporated. The scales should use `[0, maximum]` of the data visualized currently. The axes need to be transformed to the appropriate place. The scales and axes should update based on any change in the data.
+
+For the bar chart and the scatterplot, use the data to populate your `rect` or `circle` elements. Position and size them correctly with the scales. 
+
+For the line chart and area chart, the drawing will use a single `path` element. You can add the path in your HTML or in the `setup()` function. Binding and array to a single element will be different from the bar chart and the scatterplot, `datum()` instead of `data()`.
+
+Note that `datum()` called with a data structure such as an array binds the **whole** array to a single element, instead of creating multiple elements. That makes sense for a line chart, because the `path` element we'll be using for that is just one element that is re-shaped based on all of the data, as opposed to multiple bars. 
+
+ Use `d3.line()` and `d3.area()` to generate `d` attribute for the path. We've given you (commented-out) code for the line and area constructors in `update()`. 
+
+We suggest to have the code for each chart in their seperate update functions, and call each chart update function in the main `update()` function. Adjust the chart update function inputs based on your need to draw the charts. 
+
+Your final result should look somewhat like this:
+
+![Bar chart](figures/screenshot.png)
+
+## Extra Credit 1: More Events
+
+We focus on interactivity in this class; you will usually implement interactivity with JavaScript. 
+We suggest using D3 events for these. 
+
+First, make rectangles in bar chart and points in scatter plot change color when the mouse hovers over it **using JavaScript**, not CSS hover styling. One way to do this is to make a `.hovered` class that uses a different fill. Assign elements to have the class when the mouse is on the element, and remove the class when the mouse leaves.
+
+Your second interactive component will be to add an onClick listener to circles. When clicked, the browser should console log the x and y coordinates of that point to the console. 
+
+
+
+## Extra Credit 2: Transitions
+
+For extra credit, animate each D3 transition (gradually change sizes, positions, and shapes when switching datasets, and fade new and old items with opacity). As we will learn later in the course, animation is _very_ attention-grabbing; make sure your animations are tasteful and subtle. 
+
+
+## Demo
+
+Here is a demo of how the interactions could look like. You can also check out a higher resolution version [here](figures/hw3_demo.mov).
+
+![Animated Result](figures/hw3_demo.gif)
+
+
+## Grading
+
+Your score on this assignment will be as follows:
+
+5%: The menus trigger the appropriate functions.  
+4 * 15%: Each chart is rendered properly on page load (15% for each chart)  
+15% The charts, including the axis update based on data change.  
+10%: Elements are removed when "Random Subset" loads a smaller dataset.  
+10%: Elements are created and styled appropriately when "Random Subset" loads a larger dataset.  
+5%: Extra Credit 1: Elements change styles on hover and console log the data points on click.  
+5%: Extra Credit 2: All D3 transitions are animated **tastefully**.

hw3/data/covid_ca.csv

@@ -0,0 +1 @@
+date,cases,deaths27-Aug,5842,14428-Aug,5383,14829-Aug,2670,6630-Aug,3134,1931-Aug,8197,971-Sep,4582,1502-Sep,4907,1673-Sep,4864,1554-Sep,4622,1555-Sep,2497,306-Sep,3379,387-Sep,2348,428-Sep,4954,819-Sep,3484,15310-Sep,2474,73

hw3/data/covid_ny.csv

@@ -0,0 +1 @@
+date,cases,deaths27-Aug,770,528-Aug,625,829-Aug,645,630-Aug,704,1131-Aug,651,61-Sep,746,92-Sep,696,63-Sep,867,44-Sep,851,65-Sep,788,56-Sep,724,77-Sep,519,88-Sep,597,209-Sep,576,010-Sep,739,1

hw3/data/covid_us.csv

@@ -0,0 +1 @@
+date,cases,deaths27-Aug,46184,111828-Aug,50564,103529-Aug,43274,116430-Aug,34834,42731-Aug,37428,4951-Sep,42477,10782-Sep,40683,11483-Sep,45995,10694-Sep,49629,9605-Sep,43062,7496-Sep,23468,5107-Sep,26074,2598-Sep,25766,4879-Sep,35886,125210-Sep,36554,1066

hw3/data/covid_utah.csv

@@ -0,0 +1 @@
+date,cases,deaths27-Aug,383,228-Aug,390,429-Aug,459,030-Aug,448,031-Aug,253,01-Sep,296,22-Sep,417,13-Sep,506,44-Sep,513,55-Sep,433,16-Sep,388,27-Sep,373,18-Sep,326,19-Sep,314,310-Sep,346,3

hw3/figures/hw3_demo.gif

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Homework 3</title>
+  <style>
+    /* style div and headers */
+    .chart,
+    h2 {
+      text-align: center;
+    }
+
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .toolbox span {
+      padding: 5px;
+    }
+
+    svg {
+      padding: 10px;
+      width: 500px;
+      height: 250px;
+    }
+
+    /* style of bar charts */
+    .bar-chart rect {
+      fill: rgb(79, 175, 211);
+    }
+
+    .bar-chart .hovered {
+      fill: #979696;
+    }
+
+    /* style of line charts */
+    .line-chart {
+      stroke: rgb(79, 175, 211);
+      stroke-width: 2;
+      fill: none;
+    }
+
+    text {
+      fill: black;
+    }
+
+    /* style of area charts */
+    .area-chart {
+      fill: rgb(79, 175, 211);
+    }
+
+    /* style of scatter plot */
+    .scatter-plot circle {
+      fill: rgb(79, 175, 211);
+    }
+
+    .scatter-plot .hovered {
+      fill: #979696;
+    }
+  </style>
+  <!-- d3 script -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+
+<body>
+  <h3>CS-5630 / CS-6630 Homework 3</h3>
+  <address>
+    <span>Your Name</span>
+    <span>Your Email</span>
+    <span>Your UID</span>
+  </address>
+  <br />
+  <hr />
+  <br />
+
+  <div class="toolbox">
+
+    <span>
+      <label>Dataset:</label>
+      <select id="dataset">
+        <option value="covid_us">The US</option>
+        <option selected value="covid_utah">Utah</option>
+        <option value="covid_ca">California</option>
+        <option value="covid_ny">New York</option>
+      </select>
+    </span>
+    <span>
+      <label>Data Metric</label>
+      <select id="metric">
+        <option value="deaths">Deaths</option>
+        <option value="cases">Cases</option>
+      </select>
+    </span>
+
+    <span> <input type="checkbox" id="random" /> Random Subset </span>
+  </div>
+  <br />
+
+  <div class="row chart">
+    <div class="chart">
+      <h2>Bar Charts</h2>
+      <div id="Barchart-div">
+      </div>
+    </div>
+
+    <div class="chart">
+      <h2>Line Charts</h2>
+      <div id="Linechart-div"></div>
+    </div>
+  </div>
+
+  <div class="row chart">
+    <div class="chart">
+      <h2>Area Charts</h2>
+      <div id="Areachart-div"></div>
+    </div>
+
+    <div class="chart">
+      <h2>Scatterplot</h2>
+      <div id="Scatterplot-div"></div>
+    </div>
+  </div>
+</body>
+<script src="script.js"></script>
+
+</html>

hw3/figures/hw3_demo.mov

@@ -0,0 +1,130 @@
+// Constants for the charts, that would be useful.
+const CHART_WIDTH = 500;
+const CHART_HEIGHT = 250;
+const MARGIN = { left: 50, bottom: 20, top: 20, right: 20 };
+const ANIMATION_DUATION = 300;
+
+setup();
+
+function setup () {
+
+  // Fill in some d3 setting up here if you need
+  // for example, svg for each chart, g for axis and shapes
+
+  changeData();
+}
+
+/**
+ * Render the visualizations
+ * @param data
+ */
+function update (data) {
+
+  // ****** TODO ******
+
+
+  // Syntax for line generator.
+  // when updating the path for line chart, use the function as the input for 'd' attribute.
+  // https://github.com/d3/d3-shape/blob/main/README.md
+
+
+  // const lineGenerator = d3.line()
+  //   .x(d => the x coordinate for a point of the line)
+  //   .y(d => the y coordinate for a point of the line);
+
+  // Syntax for area generator.
+  // the area is bounded by upper and lower lines. So you can specify x0, x1, y0, y1 seperately. Here, since the area chart will have upper and lower sharing the x coordinates, we can just use x(). 
+  // Similarly, use the function as the input for 'd' attribute. 
+
+  // const areaGenerator = d3.area()
+  //   .x(d => the x coordinates for upper and lower lines, both x0 and x1)
+  //   .y1(d => the y coordinate for the upper line)
+  //   .y0(d=> the base line y coordinate for the area);
+
+
+  //Set up scatter plot x and y axis. 
+  //Since we are mapping death and case, we need new scales instead of the ones above. 
+  //Cases would be the horizontal axis, so we need to use width related constants.
+  //Deaths would be vertical axis, so that would need to use height related constants.
+
+
+  //TODO 
+  // call each update function below, adjust the input for the functions if you need to.
+}
+
+/**
+ * Update the bar chart
+ */
+
+function updateBarChart () {
+
+}
+
+/**
+ * Update the line chart
+ */
+function updateLineChart () {
+
+}
+
+/**
+ * Update the area chart 
+ */
+function updateAreaChart () {
+
+}
+
+/**
+ */
+
+function updateScatterPlot () {
+
+}
+
+
+/**
+ * Update the data according to document settings
+ */
+function changeData () {
+  //  Load the file indicated by the select menu
+  const dataFile = d3.select('#dataset').property('value');
+
+  d3.csv(`data/${dataFile}.csv`)
+    .then(dataOutput => {
+
+      /**
+       * D3 loads all CSV data as strings. While Javascript is pretty smart
+       * about interpreting strings as numbers when you do things like
+       * multiplication, it will still treat them as strings where it makes
+       * sense (e.g. adding strings will concatenate them, not add the values
+       * together, or comparing strings will do string comparison, not numeric
+       * comparison).
+       *
+       * We need to explicitly convert values to numbers so that comparisons work
+       * when we call d3.max()
+       **/
+
+      const dataResult = dataOutput.map((d) => ({
+        cases: parseInt(d.cases),
+        deaths: parseInt(d.deaths),
+        date: d3.timeFormat("%m/%d")(d3.timeParse("%d-%b")(d.date))
+      }));
+      if (document.getElementById('random').checked) {
+        // if random subset is selected
+        update(randomSubset(dataResult));
+      } else {
+        update(dataResult);
+      }
+    }).catch(e => {
+      console.log(e);
+      alert('Error!');
+    });
+}
+
+/**
+ *  Slice out a random chunk of the provided in data
+ *  @param data
+ */
+function randomSubset (data) {
+  return data.filter((d) => Math.random() > 0.5);
+}