DS-4630 / CS-5630 / CS-6630 - Visualization for Data Science Homework 2

In this assignment, you will make interactive charts with JavaScript and D3 to explore data you generate.

Implementation

We have provided boilerplate code in hw2.html and in script.js. Create your GitHub repo, which includes the skeleton code by visiting https://classroom.github.com/a/0kf3xTLH.

Add name, e-mail address, and UID to the HTML elements at the top. Also make sure the submission is a valid HTML5 file. Check that it is valid by uploading it to the W3C HTML Validator.

Remember, to be able to access the data files with JavaScript, we will need to be serving the hw2 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/hw2
# for python 2
$ python -m SimpleHTTPServer 8080
# for python 3
$ python -m http.server 8080

View the page at http://localhost:8080

When making changes to code, Hard Refresh is very useful to see any changes in the browser. This will clear the browser cache on the current page and force the browser to use new scripts and styles for the page. This is different from the regular “Refresh”.

Part I: Use an LLM to Generate Data

First use an LLM to generate an input datasets in CSV format. The dataset can be on any topic of your choosing. However, it must have the following qualities: (1) it should be a time-series of 120 samples; (2) it should have 2 qualtitative attributes; (3) it should have 1 categorical attribute. As an example, 120 days of weather, including temperature (quantitative), pressures (quantitative), and weather conditions (categorical). You should generate at least 4 datasets (e.g., weather for 4 locations), which you should save in seperate files in a data directory. Try to do come up with something different than weather.

Part II: Basic Events and Setup

In the boilerplate HTML we provide two controls: a “Select” menus for choosing a dataset and metrics. 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.

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. Make sure to familiarize yourself with the data structure, e.g., by printing the object and exploring it in the console.

Implement each chart with the data input of update().

Part III: Drawing the Visaulizations with D3

You should draw 4 charts:

  • The histogram should bin the data into a reasonable number of categories based upon the selected metric of the Data Metric drop-down.
  • The line chart should show the attribute of the Data Metric drop-down for the y-axis and time on the x-axis.
  • The stacked area chart should stack both quantitative variables and show time on the x-axis.
  • The scatterplot uses both quantitative values for the x- and y-axes. Use your creativity to encode categorical attribute and the unused quantitative variable for any chart. Keep in mind, we’re looking for well designed charts that show information clearly and have good aesthetic.

Building the Charts with System Level Prompting with an LLM

First ask an LLM to build your visualizations by prompting it to build all 4 visualizations together. You will likely need to provide it the template code. Continue to provide prompts to improve the output. The result goes into the llm_system directory. For this version you should not write any code (i.e., prompting only!). Be sure to include a transcript in the llm_system/llm_transcript.html file.

Individual Visualization Prompting with an LLM

Next, you will use an LLM but you will build each visualization individually and composite them together. Again, you will likely need to provide the LLM some template code, and you will need to provide several prompts to improve the output. The result goes into the llm_vis directory. Once again for this version you should not write any code (i.e., only prompting!). Be sure to include the transcript llm_vis/llm_transcript.html file.

Fine-tuning By Hand

Finally, take the code from either of the prior two parts and begin fine-tuning it by hand to improve the visualizations. This result goes into the top level index.html, script.js, and style.css files. We expect that you will get into the code and make substantive improvements by hand to get full credit.

Extra Credit: 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.

Grading

Your score on this assignment will be as follows:

10% Datasets
15% System Level LLM Visualizations
15% Individual Level LLM Visualizations
40%: Final charts (10% for each chart)
20%: Page and visualization aesthetics
5%: Extra Credit: All D3 transitions are animated tastefully