Week 2

Introduction to Programming in Javascript and D3.js


Shi's notes: http://joysword.com/ta/d3.html



Here are links to some webpages that I created with D3 this summer to show various ways that D3 and SVG can be used to show data. Several of these make use of MeteoIcons by Alessio Atzeni.


All of these should work in Chrome, Firefox, Safari, and Internet Explorer. Note that you may want to open them in a new tab or window and may need to allow your browser to run unsafe scripts, depending on your settings (in chrome and firefox click on the little shield in the address bar).


historical temperatures inside evl as a line chart - shows almost a decade of noon-time temperatures in the various rooms of the lab loaded from local files and displayed as a line chart

historical temperatures inside evl as a heat map
- shows almost a decade of 24 hour temperatures in various rooms of the lab loaded from files on the web and displayed as a heat map.


temperatures inside evl - shows and updates the current temperature in the various rooms of the lab, loaded from a file on the web plus the weather outside loaded from weather underground.


combination current temperatures and heat map historical data in evl - combination of current data in F and C and past data as a heat map - this is why we like to create our visualizations in classes, so we can have more than one running on the same page at the same time


lots of graphs about temperatures in evl on the same page
- a whole bunch of simultaneous charts on the same page



US Weather - shows and regularly updates the current temperature and weather across the US. This ine makes use of D3, GEOJson to locate the data on the correct part of the planet, and suncalc to get time local time of sunrise and sunset.



Recent Crime around UIC - shows crimes within the last month and year from the Chicago data portal located on an interactive aerial view or map of the UIC campus area.



Some other thoughts on javascript:


Coming Next Time

The Basics

last revision 9/1/15 - updated link to Shi's notes and added note about allowing the browser to run 'unsafe' scripts