Monday, 24 June 2013

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