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.


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.


The latest version of SG elections is up at

In addition to the original GE2011 data, the elector, map and candidate data have now been added for GE2015. There is also a new chloropleth map on where the opposition is contesting.

There has also been significant redesign of the UI and layout, especially the tables in how the information is presented.

This aligned with our goal of making the site more responsive, and the layout is cleaner for both desktops (you probably don’t need to scroll anymore to see all the details) and mobiles/tablets (It fits a vertical view better).

Making the piece responsive was a pain to write — had to make sure it mostly works on all the browsers and various form factors (mobile / tablet / desktop).

Lastly, we added in some bling factor with cool animations and transitions. Kok Keong did an absolutely amazing job with the year transitions and the change in districts!

Embedding chloropleth maps for GE2015

In addition to the above, we also created responsive embeddable election charts for any blog or media who wants to embed them! All we ask for is just to attribute back to either V/R or Thanks!

The five charts are listed below, with sample iFrame code that you can just copy and paste and it should work.

Seats and Candidates:

<div style="position: relative; padding-bottom: 70%; height: 0; overflow: hidden;"><iframe src="" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe></div>

Opposition Parties:

<div style="position: relative; padding-bottom: 70%; height: 0; overflow: hidden;"><iframe src="" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe></div>

The following charts are not populated yet because the election data is not in yet. We will update it live during the elections on 11th September 2015, which will colour the map. The following embeds are designed to self-refresh after 5 mins.

Stick them on your blog page and it will refresh live during the election on 11th September!

Vote Share:

<div style="position: relative; padding-bottom: 70%; height: 0; overflow: hidden;"><iframe src="" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe></div>


<div style="position: relative; padding-bottom: 70%; height: 0; overflow: hidden;"><iframe src="" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe></div>

Spoiled votes:

<div style="position: relative; padding-bottom: 70%; height: 0; overflow: hidden;"><iframe src="" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe></div>


An interesting project for BCN Global.

Besides doing the responsive bootstrap website design for them, the more interesting portion was helping them to come up with a real-time data visualization.

As you fill up their survey (done in SurveyGizmo), the data is pulled from their API to our database to be visualized in a cool and interesting way.

In doing this project, I learnt a few things.

It shows that visualization can not only be used for marketing needs, it can also be used to mine business insights and be used as a data product to be potentially sold to customers.

It requires the far-sighted boss or individual to see the potential of what such UX technology can do, and kudos to my client for this!

The rise of big open data

By Chi-Loong Chan | | Data

The following article is an original unpublished piece on the rise of open data initiatives around the world. – Chi-Loong

We are living in the age of data.

In fact, we are drowning in it.

According to Digital Universe 2020, a report by analyst firm IDC that came out in December 2012, the digital universe will grow by a factor of 300 from 2005 to 2020. The data universe is the amount of data created, replicated and consumed in a single year.

The report, which was sponsored by storage company EMC, estimates that we will hit 40 ZB (Zettabytes) by 2020, a doubling of the data universe ever year from 2012, which was estimated to be around 2 ZB.

To put things in perspective, 40 ZB is 40,000,000,000,000,000,000,000 bytes, or 40 billion terabytes. If the entire digital universe was downloadable in 2020, it would still take a person over 50 million years to download (assuming fast fiber rates of 200mbps).

Of course, the pertinent question is then: What do we do with all this data?

Therein lies the burgeoning trend of Big Data, and making sense of this deluge with data science.

Data science – a big, emerging science that encompasses disparate fields like statistics, data analytics and data-modeling – hopes to use data to understand the trends of the past, make sense of the present and predict the future.

Big data holds big potential for businesses and governments. Even though there is a lot of hype about this field – inevitable for a fast, nascent booming field – there is also a lot of real potential.

According to IDC’s latest Big Data report, they expect spending in the Asia Pacific region on Big Data technologies to reach US$1.02 billion in 2014, a 36.3 percent compound growth over 2013.

IDC expects growth rates to hold strong over the next 4 to 5 years, with a compound growth rate of 34.1 percent through 2017.

The future is open

There are many reasons for Big Data’s quick ascent:

  • The rise of the always-on 24/7 consumer, where services are expected to be available at any time of the day.
  • The proliferation of mobile devices and tablets, which make it easy for these consumers to connect to the virtual world.
  • Cheaper storage and sensor technology costs, which allows more data to be tracked and stored.
  • The rise of the data platform economy, where increasingly the business’ most valuable assets is its data, even more so than its services. For example, think about all the IT powerhouses in recent years. Facebook (social media), Google (search), and Amazon (e-commerce) make their money by understanding their consumers and targeting them correctly, all through the use of data.
  • The rise of social media. Through platforms like Facebook, Twitter and YouTube, we are creating reams of content like never before. On YouTube alone we are uploading 100 hours of video every minute.
  • The ascent of the cloud, which allow us to easily share, create and procure data without caring where our information is physically located.
  • Advances in many fields of data science, from in-memory analytics, Hadoop distributed computing, to data visualization and modeling.

One interesting subtrend of the Big Data space to emerge in recent years is the rise of open data.

Open data is data that can be freely used, reused and redistributed by anyone, subject only to attribution and sharealike policies, if any.

Open data shares a similar philosophy with open-source technology and creative commons. By allowing people free access to the resource, it invites participation and involvement.

The organizations with the biggest interest in open data initiatives are governments around the world, which should come as no surprise.

Governments have some of the largest repositories of data, but most importantly, much of government data is public by law.

Open government data can be used to create value in many areas:

  • Improved transparency and democratic control
  • Increased citizen participation and self-empowerment
  • Improved efficiency and effectiveness of government services
  • Improved or new private products and services
  • Innovation
  • Impact measurement of policies

For example, the US White House in December 2013 just recently announced their continued commitment to open data initiatives for improved transparency and citizen participation.

In Singapore, the Infocomm Development Authority (IDA) is spearheading open data through its data portal and geospatial data portal OneMap, which were set up in 2011.

Said Singapore Deputy Prime Minister and Minister for Finance, Mr Tharman Shanmugaratnam, at the eGOV Global Exchange Forum in June 2013: “By opening up more data, and through innovative use of technology, we can crowd-source ideas and co-create applications with the wider community.”

In fact, many governments around the world are committing to open data policies. The non-profit Open Data Index has documented 70 countries around the world with open data policies as of 2013.
Even though the trend is still new, there are already real-life examples of how open data solves difficult real world problems and even save lives.

For example, in the recent super typhoon Haiyan that struck Philippines in November 2013, more than 400 volunteers made three quarters of a million additions to free online map OpenStreetMap.

Those additions reflect the land before the storm, but this will help Red Cross workers and volunteers make critical decisions on where to send food, water and supplies, saving lives in the process.

In Africa, where food security is an issue, initiatives like Global Open Data for Agriculture and Nutrition (Godan) might just save lives. Godan was launched in October this year, and aims to share genomic data on agriculture to farmers.