Interactive SVG and the ABC NRL Infographic

I recently worked on an infographic for ABC Grandstand Sport, show­ing an accu­mu­lated field of all the scores for each of the NRL grand finalists.

The Tech

The infographic uses a plain SVG file and a small amount of Javascript to per­form the task. The imple­ment­a­tion is actu­ally quite simple, with most of the heavy lift­ing to gen­er­ate the graphic being done on my PC before being uploaded to the server as a static SVG.

The ini­tial stages of the pro­ject involved access­ing the data and turn­ing it into some­thing we could visu­al­ise. I wrote a Node script to access the SportsFlash API and pull down every game of the sea­son. From there I cre­ated a Fiddle to do up some quick visu­al­isa­tions show­ing how the points relate to each other.

From there my col­leagues Ben and Lincoln dis­cussed how best to present the inform­a­tion, and worked on some actual designs.

Designing with SVG

Ben used Fireworks to cre­ate a few dif­fer­ent SVG vari­ations includ­ing all the line mark­ings to scale and a back­ground pat­tern we could repeat to save on bandwidth.

Fireworks out­put to SVG where I used Inkscape to make a few changes includ­ing cre­at­ing some empty group ele­ments for the auto-generated con­tent I was going to add later.

Adding the Data

I wrote another Node script to san­it­ise all the data from the SportsFlash API and sep­ar­ate out the two teams’ plays onto either side of the field.

Once the data was sor­ted it was a fairly simple mat­ter of cre­at­ing a circle ele­ment for each point, as well as a path link­ing each con­nec­ted dot together.

These were placed in two sep­ar­ate 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 even­tu­ally settled on what you see here.

Traditionally we’ve used client-side code such as D3 to imple­ment inter­act­ives and infograph­ics. This time the SVG was already gen­er­ated 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 actu­ally very little code required to imple­ment the inter­ac­tion, and pos­sibly points to the abil­ity to add anim­a­tion and inter­activ­ity to design-heavy infograph­ics in the future.

Browser Support & jQuery

Because we’re using SVG for this infographic, it only sup­ports IE9 and above. We added altern­at­ive con­tent for older browsers in the form of a static image, which is rel­at­ively 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 prop­erly with the external SVG file. We’re using an old ver­sion which doesn’t sup­port SVG well at all, so I had to rewrite bits of code to use the document.querySelectorAll call.

In future I won’t be using jQuery for SVG inter­act­ives because newer ver­sions of Javascript sup­port cool stuff like forEach, indexOf and querySe­lector, and there’s no need to sup­port older browsers in this case. Furthermore, pure Javascript can be included inside the SVG file which means more port­ab­il­ity and less dependencies.


While there’s a few things I’d do dif­fer­ently next time, I’m pretty happy with the res­ult here. The end product is a stan­dalone, inter­act­ive graphic that we can reuse elsewhere.

The browser sup­port is fairly good for this kind of thing these days, and the abil­ity to spe­cify fall­back con­tent is great for those that don’t sup­port it. There’s really no reason not to be using SVG for these kinds of things.

Bugs and errata

The Race

One inter­est­ing bug I noticed was that Chrome calls the window.onload method before the SVG doc­u­ment has fully loaded. This only seems to hap­pen once the HTML doc­u­ment has cached and can be repro­duced by click­ing back and for­ward to reload the page from cache.

The fix isn’t straight­for­ward and I ended up adding a quick timeout on load, but optim­ally you’d be able to bind to a load event on the object. I’ll look into this and report back.

Adobe SVG

The Adobe SVG plu­gin presents prob­lems for devel­op­ing inter­act­ive SVG graphics.

With this plu­gin installed, a SVG doc­u­ment embed­ded using an <object> ele­ment doesn’t load in Chrome and falls back to whatever altern­at­ive con­tent you’ve specified.

Furthermore, even though the SVG doc­u­ment loads in IE it doesn’t present the same API as a reg­u­lar SVG doc­u­ment so it requires extra code to get working.

I haven’t found any real work­arounds for this other than unin­stalling the Adobe SVG viewer. This plu­gin was dis­con­tin­ued with XP in 2009 so it shouldn’t be used these days, how­ever I don’t have any mar­ket share stats for this one.

Leave a Reply