Monday, 19 August 2013

Using illustrator to create a data visualisation


We will be using illustrator to create an svg that illustrates the solar power generated on KWMC roof.

Visit http://whosedata.net/camp-kinect/ and copy the svg and html page to a file on your hard drive
  • Save the page to a folder on your local hard dive.
  • Save it as html only
  • Change the file name to your name
Get the svg file http://whosedata.net/camp-kinect/24bar.svg and save it in the same folder.

When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. If you use d3.xhr locally (including d3.json et al.), you must have a local web server. For example, you can run Python's built-in server:
  • open the terminal appications>Utilities>Terminal
  • python -m SimpleHTTPServer 8888 &
  • Once this is running, go to http://localhost:8888/ and find your file

Illustrator

Open 24bar.svg in illustrator. Each bar is on it's own layer. Change each layer to your own design.