D3 Workshop 2017 Code and Examples

Tasks and examples for the Introuction to d3.js workshop during IAP 2017

Slides Day 1 - https://goo.gl/GYNUf6 Slides Day 2 - https://goo.gl/QpmEL8

How to use this repository

1. Clone or download this repo
2. Use an HTTP server to run the HTML files You could use Python's HTTP Server. cd into this repository's directory and run

• python -m SimpleHTTPServer (for python 2)
• python3 -m http.server (for python 3)

3. Open Chrome or Firefox and navigate to localhost:8000

Workshop Requirements

1. A text editor: I recommend Sublime Text (https://www.sublimetext.com/)
2. A Web Browser: Chrome or Firefox
3. This repo and an HTTP Server: See above

What does this Workshop do?

This workshop attempts to introduce the basics of creating visualizations in D3. This involves:

1. Understanding SVG elements and their attributes.
2. Manipulating HTML and SVG elements using basic D3 functions.
3. Applying CSS with D3.
4. Basic user interaction in visualizations.
5. Using D3's scale, json/csv functions to manipulate data.
6. Visualizing geographic data with geojson and D3's projection functions.

Knowing these should be enough to get started on making basic visualizations and potentially start exploring some of the other sub-libraries of D3.

What do I need to know for this Workshop?

An understanding of JavaScript, HTML and CSS that is enough to create a simple web application should be enough. If you know the following, you should be good:

1. Basics of HTML elements and attributes.
2. CSS properties and applying them on HTML elements with classes,ids.
3. Using JavaScript to manipulate HTML elements.
4. Functions and loops or general programming knowledge
5. JavaScript events (onclick, onmouseover, etc)

If you haven't done web development before, that's fine. Picking up the above shouldn't be too difficult; I'd suggest getting started here if you're coming from a Digital World background : http://www.wooji-juice.com/blog/javascript-article.html