CS 315 Lab - d3js

Overview

In this lab, you will be completing an introductory tutorial for d3js, a JavaScript library for creating dynamic data visualizations.

This lab will give you a chance to explore some of the programming options for making graphs and charts, as well as to get a taste of SVG (an alternative system for web-based graphics, which we will talk about more in class on Friday).

Necessary Files

You should download this quick HTML starter code. It contains a basic (mostly empty) HTML file, an empty script file (visualization.js), and a CSS stylesheet file (style.css).

Important: you will need to tweak the tutorial's provided code somewhat to work with our setup (e.g., to make it act like a "real program" and not just a hacked demo). See below for details.

Lab Details

You task is to complete the introductory tutorials for d3js:

You are also welcome to look at the many other tutorials available for the system, as well as to peek through the library's extensive examples.

A few notes on completing these tutorials:

In a nutshell, d3 lets you manipulate HTML elements in the same way jQuery does, but with explicit functions for creating visualizations in SVG (Scalable Vector Graphics). Thus you'll need to do a bit of HTML work, and think about your output in terms of HTML elements/attributes rather than pixel colors.
- You may find this is a nice abstraction!
The tutorial will have you edit three aspects of your website visualization: the HTML (the web page content), the CSS (styling for elements in the web page), and the JavaScript. It mixes all this code into a single HTML document; but you should divide up the pieces appropriately:
- The HTML (basically anything inside < > symbols) should go in your index.html file, nested in the <body> tag. The exception to this is content inside a <style> tag or inside a <script>.
- Code inside a <style> tag is CSS ("Cascading Style Sheets", a mark-up language for describing how elements look on a webpage). You should instead put this code inside the provided style.css file. Note that you do not put the html tag (the <style>) inside the .css file!
- Code inside a <script> tag is JavaScript. You should put this inside your visualization.js file. Note that you will need to put it inside the jQuery callback for $(document).ready() since d3 code manipulates the HTML, and we need to make sure the HTML is loaded!
- If you have any questions about what goes where, please ask!
You may need to adjust the paths to external files (e.g., data.tsv), as it's nice to put such data files in the assets/ folder!