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.

Merry Christmas from V/R

By Chi-Loong Chan | | Animation

VslashR_xmas

It’s that time of the year again where we thank all our clients, suppliers, partners, friends and well-wishers.

To remember that no man is an island, and that we owe our success to those that have come before.

To be grateful for opened doors, mentorship, and great clients.

You folks rock.

Thank you for supporting V/R and having been part of this amazing journey for us.

Best wishes and have a great holiday season!

And oh, here’s a little interactive animated Christmas card that we wrote.

It’s an upgrade of the card we sent last year, but we often do these small pieces as experiments to test and push the boundaries of what can be done.

Written mainly in Greensock, JQuery, SoundJS, this is a responsive, procedurally generated Christmas tree.

We wanted to test several plugins and libraries: How to trace SVG objects so that they look like they were being drawn or erased. How to simulate falling snow with direction and windspeed. How to morph objects from one path to another (no, it is not an animated GIF).

This final piece is a composite of various animation tests that we wrote in order to better understand our craft.

Once again, thanks, and have a Merry Christmas and Happy New Year!