w/ GraphicHunters.nl, December 7 + 8 2017, Utrecht
Preparation
Please bring your own computer to the workshop. Windows-, MacOS and Linux machines are fine. Chromebooks or tablets will not work.
Software
CHROME: Please download and install the latest version of the Google Chrome browser on your machine. We'll be using its developer tools intensely. Plus: all the websites we build will run fastest on Chrome - which makes the whole experience much more fun :)
TEXT EDITOR: We'll be writing a lot of code in this workshop, so make sure to have a good text editor installed. My recommendations are either Visual Studio Code (free) or Sublime Text ($80, can be tested for free) . Both are available for Windows, MacOS and Linux.
WEBSERVER: Many things in webdev land need a local webserver running to work properly. There are various options out there, but here are some easy and lightweight ones. Also, you only need one of these options running. And they're all equally valid.
Option 1: python (recommended): Try typing "python -m SimpleHTTPServer" in your terminal/cmd/bash. If the machine tells you "Serving HTTP on 0.0.0.0 port 8000..." - great! You're all set! If not, you probably have to install Python.
Option 2: php: If you have PHP installed, you should be able to run "php -S localhost:8080" in your terminal/cmd/bash. If you read "Listening on http://localhost:8080 etc. etc." your PHP-based webserver is running. If not, you probably need to install PHP.
Option 3: Mongoose: If you'd like to have something without a command line involved, the Mongoose Web Server Free Edition could be for you. Make sure to point it at a directory containing an index.html file and see if you can find that in your browser.
More info on setting up a local webserver
Schedule
Thursday, December 7
Day 1 is about introductions to data visualization and web development in general, simple tools for quickly creating online charts and ends on a first deep dive into d3.js.
| 09:30 | Begin, introductions
| 10:00 | Introduction to Data Visualization
| 10:45 | Coffee break
| 11:00 | Webdev basics + developer tools
| 11:30 | Simple online charts (RAW, DataWrapper, TauCharts)
| 12:15 | Data wrangling in Javascript (d3, Lodash)
| 13:00 | Lunch
| 14:00 | Intro to d3.js
| 14:30 | d3 + SVG
| 15:15 | d3: data joins
| 15:45 | Coffee break
| 16:00 | d3: scales
| 16:30 | d3: axes
| 17:00 | End day 1
Friday, December 8
Day 2 has us explore the most interesting nooks and crannies of d3.js. Plus, we get to build maps, learn about color in datavis in general and how to make responsive and fast charts.
| 09:30 | Colors in (online) visualizations
| 10:00 | d3: animations + interaction
| 10:45 | Coffee break
| 11:00 | d3: layouts
| 12:00 | d3: shapes
| 13:00 | Lunch
| 14:00 | Maps with leaflet and MapboxGL
| 15:00 | Responsive + fast charts
| 15:45 | Coffee break
| 16:00 | d3: force + voronoi
| 17:00 | End day 2
Materials
Please download the code examples from here to follow along: https://github.com/dominikus/online-data-visualization
You can find all slides here: https://do.minik.us/other/online-data-visualization
PDF Slides
Here are the PDF versions of the slides:
DAY 1 (PDF, 12.6MB)
DAY 2 (PDF, 12.1MB)
Further resources
To prepare for the workshop, have a look at these materials:
Web development / Javascript
For a very basic introduction to web development in general check out this Mozilla tutorial.
For a very basic introduction to Javascript have a look at Javascript for cats.
If you're bored by these introductions - great! You probably know enough to follow the whole workshop! We're really using only very simple Javascript, and can live without knowing about things like scope, closures, prototype inheritance or other advanced JS features.
Finally, if your Javascript is a bit rusty, consider signing up for Codewars, which gives you little JS puzzles of varying difficulty.