Visualization

A WebGL piece done for a client, this 3D photo directory was used as a showcase piece at a event in China, where this was shown on a gorgeous event screen the width of a banquet hall.

It was also designed for multi-browser, multi-form factor (desktops, mobiles) in mind, with end users being able to play with the piece on their devices, or on touchscreens.

The idea behind it was to allow participants to visually inspect all attendees of the event, and through filters and search be able to connect to and find information on people within their organization.

The 3D photo visualization piece that is linked is a sanitized demo version with randomly generated names and photos as the real piece has data that should not be shared publicly.

But the principles and ideas behind the piece still stands, and it might be interesting to go through some of the hurdles involved in building this piece of beautiful code art.

App features
This code art piece changed a lot along the way, from flat 2D photo planes that became cubes (because it fit in with the client’s event design theme).

Originally designed as a sort of a photo selfie mozaic, it morphed into a more useful visualization that could be easily updated and reused for next year.

Many modes were added along the way, like:

  • The base cube mode
  • The globe mode (which was designed to mimick the client’s circular logo – it has been changed in this version – and a bit of a “wow” factor during the presentation)
  • The showcase mode, which highlights a few important organization members
  • Gender sort, a way for organizing the data so that you can see the breakdown in the organization
  • Inspect mode, where you can type in a name and it will jump to that person
  • Filters like by profession and province, where you can see a selection of the data whilst the rest fades into the background

UX design
For each mode, care was taken such that when you transition between modes, there is some animation that gives a bit of a “wow” factor, as well as to cue to the user that the mode has been changed.

There are also various user interactions that allow users to interact with the visualization. This includes:

  • Zoom in/out using the mouse scroll (or for touch pinch in/out to zoom in/out)
  • Rotate left/right if you hold down the mouse button and draw across the screen (or for touch swipe left /swipe right)
  • When you start entering a name under inspect mode, it autocompletes all possible names that are available in the visualization, making it far easier to pick a name
  • When you click on any photo cube in any mode, it immediately jumps to that photo in inspect mode, letting you know who that person is.

Together with all the modes, sorts and filter functions, and by allowing the end user to search and photo inspect, the 3D viz allows users to explore the dataset in a fun and intuitive way.

Three.js: WebGL
The 3D portion of the piece is written in Three.js, one of the best well-known javascript libraries on 3D.

All the cubes are mesh objects located in 3D space, and their textures are the photos that have been mapped on 2 sides of the cube. We tried with more faces, but the amount of rendering involved was taxing on the piece, and 2 faces made for a more pleasing design.

The X, Y, and Z positions of the cubes are positioned using algorithms. For example, in the cube mode, a 10 x 10 x 10 addressing space was created and then randomly shuffled and packed with smaller cubes to give the idea of a packed cubic structure. Resting animations to make the cubes move and rotate were added to make the piece more interesting.

In the globe mode, the X, Y, and Z positions of the cubes were aligned according to circular cubic equations. For the filters, the photos are all arranged in squares of the filtered content (with a dynamic camera zoom based on the amount of people filtered).

Thus, when you switch between modes, you simply calculate the new cube positions based on the relevant equations, and then the transitions will occur.

Detecting if you could click a cube was based on raycasting collision detection with the camera. If the cube is hidden by another cube, you cannot click on that object.

Miscellaneous: libraries used
Hammer.js was my touch library of choice. Originally we used some of javascript’s native click and scroll functions, but they did not mimick as naturally the tap, swipe and pinch in/out functions on a touch screen. Hammer.js touch functions proved to feel more natural and was thus used in the final piece.

SVG and HTML animations for the piece was done using Greensock, my go-to library for animations. From the pop-up information displays, to the sidebar animations, these were done using Greensock.

For the real piece, because we read from a CSV data backend, I used papaparse.js to parse the data into JSON chunks to populate the viz. For this sanitized version, chance.js was the library of choice to generate the random names and data.

And lastly, to round off everything, JQuery and Underscore.js were used. Both of these popular libraries have very useful functions, from DOM manipulation to sorting/filtering.

We investigated the use of other libraries like a load library, but Three.js very basic load manager proved sufficient for the piece, so no load library needed. Phew!

Miscellaneous: challenges
Because of how browsers’ canvas renderer draws animation frames, whenever the focus of the page is lost (i.e. you switch to another app or tab), the animation frames are not updated and are “paused”. This became an issue because in the animation, the X, Y and Z coordinates of the cubes are still being updated even though the frames are not drawn. Thus, when you switch back to the piece, cubes being in the wrong position is very common.

The fix was a solution based on the clock timer. On detection of defocus, start a timer. When you get back to the piece, detect how much time has elapsed, then repaint the scene based on where the cubes are supposed to be.

Other interesting challenges were due to browser specific issues, especially for mobile. The touch functions required quite a bit of debugging to make sure they work decently with the piece.

All in all, I loved doing a code art piece as pleasing and beautiful as this!

The Singapore government just announced the 2018 budget on February 19th 2018.

As usual, we’ll take a look at the data from a macro lens across many years to see if there might be interesting trends we can glean from the 2018 budget visualization.

This is the fifth year running that I’ve been doing this. Many of the visualizations were pre-written, so I just added the latest data figures from MOF.

Here’s the work done in previous years, if you’re interested to compare:

The whole point of this series is to give readers a sense of the long-term trends in the budgets.

For chart embeds, simply cut and paste the following code snippets into your blog or website:
Note: You can change the height of the iFrame below to fit whatever screen height you prefer.

It would be nice if you choose to use these embeds to have a shoutout to V/R!

Revenue vs Expenditure Chart:


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

Expenditure Chart:


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

Revenue Chart:


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

And here is the new chart for this year!

Expenditure by sector:


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

This zoomable packed circle visualization I designed and wrote for a client of mine was an interesting piece to show part-in-part comparisons without cluttering up the visual space.

The ask was to write a visualization piece that could dynamically load and layout a complicated JSON tree in an aesthetically pleasing way, and yet look visually appealing.

In this case the visualization is adapted for my own Budget 2018 visualization project with a few tweaks.

Hierarchy trees can be displayed as trees (as a graph), as a treemap, sunbursts, or as packed bubble charts.

Personally I prefer packed bubble charts to treemaps. I think that circles are more aesthetically pleasing to the eye than rectangles, but this is me.

The key idea, though, was not to a show the whole hierarchy, but to have some kind of zoom-in and zoom-out transition at the node level so as not to clutter the entire visual field for complicated trees.

You may lose seeing the whole overall picture of the entire tree hierarchy, but for that you get to concentrate on a slice of the tree.

Was pretty happy with the zoom-in and zoom-out transitions as I hope it is intuitive to users.

One other interesting code portion was how to pack and scale words into the bubble so that it aesthetically fit within the bubble. After lots of experimentation to find a nice scaling algorithm, found something that works reasonably well.

Also had to tweak small portions of the code such that mouseover gives more information and context for desktop users, but this functionality does not clash for mobiles and tablets.

All in all, this was the final result, which I am quite happy about. 😀

All of the following code was written in D3.

This is behind the scenes work that we do for clients – designing UX interactions, animations / transitions, dashboard designs and form factor layout solutions.

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!