Visualization

vizsg_opengraph

When we started the Viz.sg site one and a half years ago, it was a showcase for our Singapore-based visualizations that we had written.

It morphed into a site where we think the visualizations are also genuinely useful to Singaporeans if they need to find out certain information. And then, one final evolution: A curation of excellent data visualizations on Singapore.

Setting up a business in a housing subzone and want to know what the population is like? Interested in getting up-to-date and historical information about dengue cases in Singapore? Wondering where are all the taxis at your current location and time? Want a data repository and timeline of all MRT breakdowns?

You can find the answers to these questions on the site and lots more as we link to and showcase some of the best visualizations on Singapore.

We’re not affiliated with the government in any way – this is an entirely ground-up project initiative.

The idea: A free repository of visualizations on Singapore by Singaporeans. Available for anyone to use. Students, businesses, civil servants, general public.

Coded with love, one dataset at a time.

The old website structure wasn’t cutting it, and so it was time for a redesign of the website, where we could easily add in more data cards and have it sortable and easy to access.

Thus the new viz.sg, with some animation bling and an easier way to categorize and find visualizations.

If you have any visualization on Singapore that you would like to showcase and have a link, please drop me a note at chiloong@vslashr.com. Thanks!

opengraph_map_age_gender

Interested in finding out what the population distribution is like (age and gender) for every subzone district in Singapore in detail?

We just released a new data visualization on Singapore: Population by age and gender, that we think is unique that no one else has yet. (I may be wrong, and if so, please drop me a note and we will correct it).

We had wanted to rewrite the original choropleth maps that we released about two years ago such that they have more granularity.

It would also give us an opportunity to update the visualization with a new responsive layout that would work well on mobile and tablet. Additionally a map tiling base was added so that you can have a sense of the actual URA subzone boundaries (and where each district was).

Because the data existed for the population values, the only major drawback was the map data. Ever since data.gov.sg was revamped last year, they started cleaning up their datasets. Late last year they released high fidelity versions of the subzone district maps, which made it far easier to mash-up the various datasets to come up with the visualization.

Note: The maps existed before, but the map data was not the cleanest, which meant it was necessary to do corrections. Also the map data itself had no meta-tagging (like district names), which would mean laborious work was needed to give the shapes context so you could mash-up the data.

For the final result, we went through over 10 revisions in the user interface (about the norm in UX projects) as we tweaked and iterated our way to a design we liked. This included the placement of the legend and slider display, how to toggle between the age bands (on click or on hover functionality), how to show missing data, etc.

Responsive design for mobile was also a challenge (as is expected), and the mobile UI is similar but also in subtle ways different from the desktop and tablet versions.

A lot of tools and libraries went into making this. The code base is mainly D3, but it also uses libraries like JQuery, Bootstrap (for responsiveness), Queue (for data loading). Map base we’re using Mapbox, which is built on top of Leaflet, and map data is Data.gov.sg’s GeoJSON data that we used cartoDB to help clean up a little.

For the data work R was used to both preprocess and transform the data into the JSON formats that feeds into the visualization. For minimization and deployment, Kok Keong likes to use his own custom bash script (rather than something like Grunt or a NPM script).

For the last three years we have been doing a simple update and analysis of the macro-trends of the announced Singapore government budget in February/March. Here are the 2014 and 2015 ones.

This year is no exception.

As the charts are more or less written already, what we do is to add in the new data points and use the charts to support the new macro analysis of the Singapore government budget.

This year, however, we have tweaked the charts a little in terms of design (especially the Revenue vs Expenditure one), and more importantly, we have made the charts embeddable for any website or blog that wants to use them in their analysis.

Like our GE2015 elections charts, just simply attribute and link back to us.

On 24th March Budget day, when the budget is released, all the new data will be updated and the data visualizations will update.

Simply cut and paste the embed code snippets into your blog or website:
Note: You can change the height of the iFrame below to fit whatever screen height you prefer. We suggest at least 600px (or more).

Singapore Government Revenue vs Expenditure Chart:


<iframe src="http://viz.sg/viz/budget2016/budget2016_revenue_vs_expenditure.html" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>


Singapore Government Expenditure Chart:


<iframe src="http://viz.sg/viz/budget2016/budget2016_expenditure.html" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>


Singapore Government Revenue Chart:


<iframe src="http://viz.sg/viz/budget2016/budget2016_revenue.html" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>

VslashR_opengraph

When you look back at the things that happen in a year, lots of things change.

Especially when you’re running a small SMB.

More connections. More clients. More projects.

V/R does quality interactive work for a living, and we thought that since we spend lots of time doing pretty stuff for clients, we should do the same for our own website.

And thus, when we have some time in between gigs we constantly write and rewrite old code, and our website is no exception.

It’s good to let potential clients know the range of interactive work we do – a blend of UX, web and app dev.

This marks the third year that we’ve changed our website, and this time the site is built from the bottom up from scratch.

It uses a lot of the techniques we’ve picked up in the last two years: SVG and canvas animations, visualizations (using D3), scroll-based animations (ScrollMagic as a base with GreenSock). There is a lot of javascript code we wrote and packaged together to get this look and feel.

Because it is our own site, we get to experiment with things that we want to try, like for example the procedurally generated parallax layers in the background (visible only on desktops mainly). This is pretty cool, but testing this with responsive layouts was so heavy that we decided to take this out for mobile/tablets.

Other examples include our own project picker/visualizer instead of using a popular library like Isotope.js (like our previous website). I wanted a 3D animated version with a rotating menu that had to be extensible and responsive, so we had to write our own.

Smooth SVG animations hooked to a scroll based mechanic (as opposed to animated gifs or videos). A canvas-based projected spinning globe (based on real geojson dataset!) rather than a flat globe image.

And because a lot of these SVG animations have a light size footprint, they load quite fast, and are reasonably sharp at any size, which is good fit for the new design. Here’s a good post by Sara Soueidan on SVG animations vs animated GIFs.

I often get asked this question by marketers: What is the reach of the work that you do? How many people see your content and what are the KPIs?

The answer is that for many of our clients I don’t know. Whilst we might help them install their analytic tracking code snippets, short of installing our own code (which we don’t do), only the client will know after we hand over the project code for them to host.

However, for the projects that we do for our own interest, development and showcase — e.g. the Visualizing Singapore site — we have a sense of how well they do. I am a firm believer in tracking and measurement; if you don’t track, you don’t know who is going to your website and what content they are looking at.

For example, the last SG elections website was a big hit during the elections weekend of 11th to 12th September as we were updating the elections results live on 11th evening / 12th morning.

Literally you could see the voting districts being filled in with colour and numbers as the voting results came in, both the sample vote results and also the real election results.

Specifically for the 24 hours from Friday evening to Saturday evening post results, we received almost 200,000 page views, mainly from our live embeds, which were on both the Online Citizen and the Middleground.

A big shoutout to them for covering the elections with such great content.

sg_elections_stats2

Google analytics statistics of the SG Elections website. The statistics here were from 11th to 14th September, but the bulk of the hits were during 11th and 12th.

Most of the traffic came from the embeds, specifically our vote share visualization which was embedded the most by TOC and TMG. Some came to the SG Elections website, mainly through word of mouth referred by social media and also by very kind shoutouts by our media partners.

I didn’t pay a single cent for social media advertising of any sort, and whilst I may have made a few posts on FB and Twitter, I didn’t spam my channels too much. I had a hope that with great content, and perhaps media who might be interested in the free easy-to-embed content (just attribute to us), that would be enough. The site wasn’t really marketed.

Page views aside, what I was most happy about was the engagement. An average of 3mins plus for the vote share visualization, and 6mins plus for our actual site — a rarity in an age where people move on very quickly.

I suspect it is folks just leaving the page open as the elections maps were being updated in real-time. Still, am humbled and happy that people found the visualizations useful, which was what Kok Keong and I wanted to do in the first place.

A quick word to those new to us. We’re not media, we don’t compete with media. We’re also not a marketing, PR, or even traditional creative/digital/social media agency (which in fact we do some work for agencies behind the scenes).

We’re a UX design outfit that uses data science and digital perspectives to present stories and insights in a better way.