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="http://whosedata.net/kwmc-apps/bristol-weather/" 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.

View CONNECTION / TIME

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="http://whosedata.net/kwmc-apps/kwmc-tweets/" 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 http://www.jonhurlock.com/. 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="http://whosedata.net/kwmc-apps/kwmc-survey/index.php?size=m" 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="http://whosedata.net/kwmc-apps/kwmc-survey/index.php?size=l" seamless width="570" height="456" scrolling="no"> </iframe>

KWMC version

This could be used for the KWMC website

<iframe style="border:0" src="http://whosedata.net/kwmc-apps/kwmc-survey/index.php?size=xl" 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 carto.net

The code to embed medium size 400px wide

<iframe src="http://whosedata.net/kwmc-apps/kwmc-booking/index.php?size=m" 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="http://whosedata.net/kwmc-apps/kwmc-booking/index.php?size=l" 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="http://whosedata.net/kwmc-apps/kwmc-booking/index.php?size=xl" 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="http://whosedata.net/kwmc-apps/kwmc-pv-month/" 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.

http://whosedata.net/kwmc-apps/kwmc-pv-month/kwmc-pv-month-no-anim.svg has no svg animation and so works in ie10