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).
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
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.
- 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.
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
lots of graphs about temperatures in evl on the same page
a whole bunch of simultaneous charts on the same page
- 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.
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.
- the console is your friend
- be careful what this is at each line in your code
- be careful with == and ===
- jshint is your friend - http://www.jshint.com/about/ and
- viewBoxes are your friends and make scaling up or down an
app much easier - see the startup functions in the sample
apps for some usage examples
multiple apps on the same webpage - see any of the examples
for how this can be done. Classes will also help you
integrate code from your team mates in the later projects
you are running the latest version of your code. One
solution is to run your own local web server via Python
Simple HTTPServer -
- when creating separate regions on a
web page it can help to initially give them each different
background colours to see how much space each region
app from loading
last revision 9/1/15 -
updated link to Shi's notes and added note about
allowing the browser to run 'unsafe' scripts