Programming Workshop

Bite-sized exercises you can do in 2-6 hours, designed to help you master HTML, CSS, or JavaScript.

Advanced CSS
Beginner JS
Advanced JS

Data Visualization

The point of this exercise is to learn to read, manipulate, and visualize data in JavaScript.

  • Find an interesting dataset in some sort of text format (XML, JSON, CSV, etc).
  • Store the dataset in your project folder.
  • Truncate it to a reasonable length if it’s very long (i.e. 1000 rows). Some possible sources are:
  • Create an empty webpage and load the dataset into your webpage using an AJAX or JSONP request. (See slides: AJAX/JSONP)
  • Display the data as a table with columns for each of the attributes. (See slides: HTML Tables)
  • Use the tablesorter jQuery plugin to make the table sortable. (See slides: jQuery)
  • Create a form above the table which lets users filter or manipulate the data somehow, i.e. a dropdown box to only show rows matching a particular query, or a way of summing up attributes. Whatever would be useful with the data. (See slides: DOM, Events)
  • Use the High Charts JS library to visualize a numerical aspect of the data. Or find a different library here.
  • If the data has a geographical aspect (locations), use the Google Maps API to plot it on a map. (See slides: JS APIs)
  • Use Twitter Bootstrap on the site to make it prettier, styling the buttons and table.