Author: Chi-Loong Chan

Firstbridge Montesorri

By Chi-Loong Chan | | Animation

We did this website project for Firstbridge Montesorri in 2017.

Unlike standard websites, the ask was to create a unique piece of artwork animation wise. This is a scroll-based animation website (pretty much like the main V/R website), where the animation is hooked to the scroll.

The animation tried in this piece is slightly different, where a lot of animations are line-based strokes. Combined with the color fills, it gives an idea of a children’s art piece, where the lines are drawn and coloured in.

The clouds are procedurally generated on the main page with random positioning, to give the effect that when you scroll downwards you’re actually moving through layers of clouds.

One thing to mention is that we took out all the parallax animations for mobile and tablet. The piece is heavy enough that it will work on the latest modern phones, but we wanted to give slightly less powerful mobile devices a fighting chance to run the site! 😀

Artwork is all custom (including all posters and logos) from our design end, and of course so is the animation design of this piece.

Small pieces of code to hook to the eBook platform that firstBridge publishes to, plus linking to all the latest photos on Facebook for the different schools on the site.

All in all, I loved doing something so pretty for the client.

moire2
In mathematics, physics, and art, moiré patterns are large scale interference patterns that can be produced when an opaque pattern with transparent gaps is overlaid on another similar pattern.
Besides being areas of study in mathematics and physics (e.g. in image processing and computer vision) they have real world applications like bank note forgery detection.

But as art itself, moiré patterns can be beautiful and hypnotic.

They are particularly suitable for visualization as procedurally generated art, and can create some really interesting optical illusions.
I was inspired by the below excellent Numberphile video on how random dots arranged on a page can create stunning optical dot illusions, and I wanted to duplicate the effect on an interactive medium.

So I coded up this interactive piece: A Study in Moire Patterns

Using D3 + Greensock

D3 (Data-Driven Documents) is an extremely popular javascript library often known for its use in creating data visualizations. However, it can also be used to create all kinds of fun code art experiments that have little to do with data visualization.

If you want to create SVG on the fly, I would well recommend D3. It is well supported, has excellent traction and there are lots of resources to find information. D3 is really excellent when it comes to binding data to the views.

For animation, my go-to library is Greensock. Sure, there are tons of other animation libraries out there. You can even do some nice transition work in D3. If it is simple, you can even just use CSS.

However I really like Greensock as it is pretty robust, and more importantly it provides a useful mental framework for animation using timelines and tweens.

The rest of the project used Bootstrap for easy responsive layout, and JQuery and JQuery UI was added to hook the interface together. One of the best things about vector-based graphics like SVG is that they are size invariant, and can look equally sharp on desktop to mobile.

There are tons of good reasons why animated SVG are a great way to build animations.

Code time

I’ve put up a few examples used for this project on bl.ocks.org, a viewer for mainly D3 code on Github’s Gist. (This, like D3, is created by Mike Bostock).

In them, you will see that the actual code is not that complicated. Draw the SVG using D3, then animate it using Greensock.

Final thoughts

The reason why we are able to build beautiful code so easily now is because of the amazing amount of high quality libraries, platforms and packages being released by the tech community as a whole.

So as coders we owe a huge debt to all the free tools and libraries we use to build our stuff.

At the same time it can easily feel overwhelming, and you constantly wonder why there are always so many things to learn. Here’s a humorous take on take on that. If you work in the frontend space, you’ll grok it immediately. 😀

Perhaps the answer is that there is no need to be an expert in everything because the simple answer is that you can’t be.

Just focus on an area that you like and work on that. Eventually like any craft if you do enough work in an area, you will acquire some experience and be better at it.

Once in a while, go learn something new because you are intrigued by something, not because it is the “next best thing” you need to learn.

And that is the way to keep the passion for your craft alive. 😀

Animation Foundry

By Chi-Loong Chan | | Animation, V/R, Visualization

animation_foundry

Add bling to your websites. No cod or infrastructure on your end needed!

Animation Foundry was an idea both Kok Keong and I had been toying around for some time.

We already did all of these beautiful interactive pieces that are embedded into sites via iFrames.

A lot of times the content is hosted locally at the client’s website, and the choice of iFrames is such that integration is easier (cross-code CSS pollution is a nightmare to fix).

At other times, the content is distributed to blogs, etc. and other content portals to use as part of their visualization work. Examples include the GE2015 visualization and more recently the 2016 Budget one.

I was thinking – why not turn all of these into a proper service?

You do not have to worry about code or infrastructure of any sort. Just give us your brief and we can work out and deliver an interactive piece that not only you can embed on your website, but any other blog can embed on their site.

What you get:

  • A beautiful interactive and/or animated piece.
  • Our animations and visualizations are typically responsive, and they work on desktops and mobiles/tablets.
  • Hosting and infrastructure is not something you have to worry about – we will take of this on our end. All we do is charge a simple maintenance fee (for a year) for hosting the code art on our servers.
  • Data visualizations can be updated live via live feeds.
  • You do not have to host it on our servers and host this locally on your servers. This typically makes more sense for data products or complicated pieces.
  • Costing wise, we expect that even for a wow-like responsive animation piece, it should be relatively affordable (below S$5K).

Drop us a ping if you’re intrigued!

Population by Housing

By Chi-Loong Chan | | Visualization

opengraph_map_housing

We just released a new Subzone: Housing visualization.

It was written up some time ago (together with Subzone: Age + gender), but due to it having some data and UI issues I didn’t have the time to fix and polish it, so didn’t release until now.

This visualization and the Subzone: Age + gender one now has been updated with the latest 2016 June information from the Department of Statistics of Singapore

There are lot of small UI improvements, which might be interesting for those who do UX/UI. Am going to detail some of them here.

Exceptions to data

As a visualization designer, I’ve chosen to set the chorolpleth buckets to be specific thresholds such that they reflect best what I think is most interesting for the story.

For example, in this case, the chorolpleth percentage scale is set from 0% to 40%, which I think gives a good representation for a lot of the data.

legend_bar

However, often because the data has a wide variance, the buckets can easily be exceeded. Anything that used to exceed the threshold of 40%, the colours often go out of whack, and for the legend bar, the pointer will go off the box.

The way to fix this is to add exception code to polish up the visualization. If it exceeds a certain threshold value, shade the area a specific colour. If the pointer exceeds the bar, trigger the exception. In this case it is flipping the pointer 90 degrees to the right to cue the reader that the threshold had been exceeded.

If the histogram bars are too short for the bar text to be within the bar, it is now outside the bar.

Hover vs tap interaction

The interaction between the histogram (or population pyramid for the Subzone: Age + gender one) and the map was one which took me some time to work out.

I was’t happy with the map changing on a hover on band interaction, and the on click interaction needed some kind of marker to show that that category was chosen.

So the change of exactly that – a new marker that showed which band you were pointing to, and the on hover interaction just highlights what band is chosen (but does not select it).

This also allowed using the category and gender icons itself as additional ways to switch bands, and I think the UI is overall more intuitive and functional, and the animation of the marker makes for an interesting effect!

Future Work

The visualizations are mostly complete, but there are ways to expand it further. For example:

  • Adding a new UI for allowing the user to select the threshold of the choropleth distribution. I have curated it with specific thresholds because I have looked at the data and felt that these thresholds make the most sense for me, but perhaps it would be good to let people explore.
  • Adding historical past year data sets (up to early 2000s). This could perhaps require optimization when downloading the dataset, which is not small.

dengue_zika2

Live Dengue + Zika case data visualization updates!

The NEA has recently started publishing Zika case updates for clusters, including total number of current cases per cluster.

Using this information, it was time to revamp the live dengue + zika visualization.

Because the two viruses are spread by the same vector (Aedes aegypti mosquito), it makes sense to plot cases where it might overlap. Thanks to more information from NEA, the visualization is now more useful.

Things added for ease of use (and asked for!):

  • New table with sort and search properties on Zika case clusters. Easy to immediately find the biggest Zika case cluster!
  • Dengue and zika case clusters use the same clustering mechanic on the same map, and this is intentional as you can see at a glance combined dengue + zika cases.
  • However, you can easily toggle between the two case sets by using the UI buttons at the top of the main visualization.
  • Also, the case markers, when you zoom down to the highest level, are different to help differentiate between the two.
  • Added 20th September: Ability to jump to zoomed map location by clicking on row of any of the tables.
  • Added 9th November: Data is finally live. We had to write a custom script to ping the site to get the data when it appears.

Will wait and see how stable the NEA site is in terms of format, plus how often they update before attempting such a feature. 🙂

Hope you find the updated visualization useful!

Zika data will be updated when NEA releases new information and time permits.