I recently worked on an infographic for ABC Grandstand Sport, showing an accumulated field of all the scores for each of the NRL grand finalists.
The initial stages of the project involved accessing the data and turning it into something we could visualise. I wrote a Node script to access the SportsFlash API and pull down every game of the season. From there I created a Fiddle to do up some quick visualisations showing how the points relate to each other.
From there my colleagues Ben and Lincoln discussed how best to present the information, and worked on some actual designs.
Designing with SVG
Ben used Fireworks to create a few different SVG variations including all the line markings to scale and a background pattern we could repeat to save on bandwidth.
Fireworks output to SVG where I used Inkscape to make a few changes including creating some empty group elements for the auto-generated content I was going to add later.
Adding the Data
I wrote another Node script to sanitise all the data from the SportsFlash API and separate out the two teams’ plays onto either side of the field.
Once the data was sorted it was a fairly simple matter of creating a circle element for each point, as well as a path linking each connected dot together.
These were placed in two separate groups for convenience.
<circle r="7" cx="836" cy="406" id="t-1-e-3-0" class="first t-1-e-3" fill="maroon"><title>Round 14 - Try scored by Jorge Taufua (vs Canterbury-Bankstown Bulldogs)</title></circle>
Styling and Interaction
SVG is styleable with CSS so we could tweak the design on the fly, and eventually settled on what you see here.
Traditionally we’ve used client-side code such as D3 to implement interactives and infographics. This time the SVG was already generated so all it needed was a couple of onclick events to change change the CSS when someone clicked/hovered a point.
This meant there was actually very little code required to implement the interaction, and possibly points to the ability to add animation and interactivity to design-heavy infographics in the future.
Browser Support & jQuery
Because we’re using SVG for this infographic, it only supports IE9 and above. We added alternative content for older browsers in the form of a static image, which is relatively easy to add using the <object> tag.
<object width="100" height="100" data="myfile.svg">
<img src="myfile.png" alt="The roosters prove the long range threat."/>
One of the gotchas that I hit at the last minute was my use of jQuery didn’t work properly with the external SVG file. We’re using an old version which doesn’t support SVG well at all, so I had to rewrite bits of code to use the document.querySelectorAll call.
While there’s a few things I’d do differently next time, I’m pretty happy with the result here. The end product is a standalone, interactive graphic that we can reuse elsewhere.
The browser support is fairly good for this kind of thing these days, and the ability to specify fallback content is great for those that don’t support it. There’s really no reason not to be using SVG for these kinds of things.
Bugs and errata
One interesting bug I noticed was that Chrome calls the
window.onload method before the SVG document has fully loaded. This only seems to happen once the HTML document has cached and can be reproduced by clicking back and forward to reload the page from cache.
The fix isn’t straightforward and I ended up adding a quick timeout on load, but optimally you’d be able to bind to a load event on the object. I’ll look into this and report back.
The Adobe SVG plugin presents problems for developing interactive SVG graphics.
With this plugin installed, a SVG document embedded using an <object> element doesn’t load in Chrome and falls back to whatever alternative content you’ve specified.
Furthermore, even though the SVG document loads in IE it doesn’t present the same API as a regular SVG document so it requires extra code to get working.
I haven’t found any real workarounds for this other than uninstalling the Adobe SVG viewer. This plugin was discontinued with XP in 2009 so it shouldn’t be used these days, however I don’t have any market share stats for this one.