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 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 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


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

Wednesday, 17 July 2013



scale 1
width="400" height="320"

bcc & phone

scale 0.8
width="320" height="256"

community website

scale = 1.425
width="570" height="456"

media website

scale 2
width="570" height="456"

  1. bristol-weather/ 
  2. transport/
  3. bus-times/ 
  4. overweight/
  5. twitter/
  6. crime-stats/ 
  7. kwmc-survey/
  8. wheres-kala/
  9. house-prices/
  10. traffic/

Wednesday, 26 June 2013

Animated Bristol Weather

This is a png sprite animated with javascript. It shows the weather for Bristol recorded at Bristol airport fed through Wunderground, let me know if you'd like to use it for your location and I'll adapt the code.

Use this code to embed Bristol Weather into your website
<iframe style="border:0" src="" seamless width="400" height="320" scrolling="no"> </iframe>

Wunderground has a list of icons to cover all the different weather conditions across the world. I have been recording the wunderground weather feed since February and in four months these are the only condition codes used to describe all the different weather we've had in that time. Which has been freezing and really sunny at time. I think someone needs to re-evaluate the condition codes for weather and increase the vocabulary.

1 tstorms
31 snow
60 cloudy
78 fog
106 hazy
338 rain
764 clear
848 mostlycloudy
971 partlycloudy

A cron job reads the weather off a wunderground feed once an hour and stores the data in a local database. This is to cut down on the amount of calls to wunderground and also keeps our record of weather. I've only made seven animations as it's pretty much just cloudy.

Tuesday, 25 June 2013

Archived tweets and flickr pix

Shows a web-app version of CONNECTION / TIME an online tool that uses social media to document performances and events live.

You can program the app to show one or a combination of archived CONNECTION / TIME pages.


Get the latest tweet from KMWC

Displays the latest tweet tagged #knowlewestmedia OR from knowlewestmedia OR to knowlewestmedia.

Code to embed the web-app

<iframe style="border:0" src="" seamless width="400" height="320" scrolling="no"> </iframe>

Twitter changed their api in June 2013. With the old api I pulled the tweets into a database and used php to generate a json feed for javascript to ajax into an html page. This process no longer worked as twitter set up new authorisation procedures. This web-app uses a php oauth script by The script takes care of the oauth and generates a json feed. Now the web-app directly calls the twitter api so if it is on a busy web site it may crash if it over runs the number of legitimate calls.

Geo-tagged twitter feed

Where's Kala? pulls the latest tweet from KnowleWestGirl and her co-ordinates to place the tweet and Kala onto google maps so we can see where she is and what she is doing.

Apart from it doesn't at the moment as twitter changed their api and I don't know how to pull in just tweets with co-ordinates. I'm also unsure about pulling tweets directly off twitter. Before the api changed I used a cron job to call twitter once an hour and put the tweets in a mySQL database. The web-app would then only call the database and wouldn't overdo the number of calls to twitter and risk crashing from overuse.

Monday, 24 June 2013

Knowle West Media Survey

A community survey devised by Rachel Clarke Communications & Press Coordinator at Knowle West Media Centre. The survey is for the SoLa interface. SoLa is a join initiative with Western Power and Bristol City Council to install solar panels and batteries into housing in Filwood.
You can embed in three sizes

Interface version

This is used for the dashboard, see behind front of house for example
Use the code below to create an iframe.

<iframe style="border:0" src="" seamless width="400" height="320" scrolling="no"> </iframe>

Community Website version

This could be used for the community website, 570px is the width of the main content

<iframe style="border:0" src="" seamless width="570" height="456" scrolling="no"> </iframe>

KWMC version

This could be used for the KWMC website

<iframe style="border:0" src="" seamless width="800" height="640" scrolling="no"> </iframe>

Floor plan booking in svg

An svg file hooked into google calendar to show the booking for a floor plan. The architectural drawings have been taken from sketchup into illustrator and exported as svg. The ajax uses a script from

The code to embed medium size 400px wide

<iframe src="" style="border:0" seamless width="400" height="300" scrolling="no"> <p>Your browser does not support iframes.</p>

The code to embed large size 570px wide

<iframe src="" style="border:0" seamless width="570" height="560" scrolling="no"> <p>Your browser does not support iframes.</p>

The code to embed an extra large size 1024px wide

<iframe src="" style="border:0" seamless width="1024" height="1068" scrolling="no"> <p>Your browser does not support iframes.</p>

Monthly visualisation of solar panel electricity generation

Click a column to see the data for that day.

Click one of the lower dates to go back or forward a week.

This is the code to embed the web-app in a website.

<iframe src="" style="border:0" seamless width="400" height="320" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe>

This data-viz is a scalable vector graphic and reads a json file to get the latest energy readings.

For me this is a better workflow than using javascript libraries like d3. I designed the visuals as an svg in illustrator and inkscape and then used a text editor to insert the javascript.

The svg makes an ajax call by using an xmlhttp object from within the svg file. I assume that if you can see the svg you can pick up the xmlhttp object and you don't need cross browser compatibility as only modern browsers can see svg so by default they will have xmlhttp.

Look at the svg file - you can open it in inkscape or illustrator to see how it was designed, and open it in a text editor to see the javascript.

This doesn't work in ie 10, because internet explorer doesn't use SMIL animation, which is the animation svg uses natively. has no svg animation and so works in ie10

Sunday, 12 May 2013

Reconnaissance of Knowle West using flickr, twitter and google maps

Tuesday 14th May 2013

Connection Time

Using Connection Time to create a sketch of the Knowle West

Create a new twitter and flickr account

Then go to and create a new ct 

Geotagging pictures

Happy Hearts geotagged flickr pix
1. enable geo tagging on your phone
2. enable geotagging on flickr
3. in flickr group your pictures into a photoset
4. insert photoset id into url to see pictures on a map{your_photoset_id}&title={your_title}
for example