Case Study:

HTML5 Canvas Content Visualization

Advanced HTML5 Canvas Experience

Building a dynamic content discovery experience with hundreds of creatively animated, interactive dots.

The client was an investment management company with a focus on healthcare - with hundreds of content items on their website for users to browse and discover. Alongside an agency that worked on data aggregation, I put together a dynamic, interactive HTML5 canvas experience for their website to feature.

HTML5 Canvas Content Visualization

Project Details

This project entailed taking an agency's design mock-up and working alongside them to develop a custom HTML5 canvas element that was highly flexible, dynamic, and customizable. The idea was that each dot represents an article of content on their website, as organized from the company's Swiftype API. Each dot would animate into place, and be interactive so that on hover a card could show a summary, and on click we'd move into the full content details.

As expected from the large concentric rings, a ton of trigonometry went into place to calculate where each dot would land. Not only did the network need to appear to be categorized correctly and color coded, but ranging brightness levels and placement towards the inner of the network signaled a level of relevance towards the overall category. This extended into a flexible search feature, so that no matter what the user types in, the network will re-arrange and filter itself to show the most appropriate, relevant content front-and-center.

Lastly, the client wanted a fluid-style animation effect, including a full introduction animation before the network forms that shows the dots coming together to form their core values. This process involved not only working to simultaneously load data and swap out psuedo-elements, but a custom SVG filter was developed with some clever trickery to allow the dots to "blob" together when near each other, in an almost liquid manner.

Overall, this project took a few months of hard work between myself and the team at White Rhino (the agency that designed the initial concept and built the search logic), and the end result is a fast, performant, and beautifully intricate network of dots that's fun to browse around and filter as you discover all of the content the client has to offer.

HTML5 Canvas Content Visualization HTML5 Canvas Content Visualization HTML5 Canvas Content Visualization
Libby Louis

"This is awesome! Nice work!! Thank you so much, we appreciate your help pulling this together.”

Libby Louis

White Rhino

Want to chat?

Have a project in mind? Feel free to get in touch to chat!

Get in Touch
  • HTML
  • CSS3
  • JS
  • VueJS

Have a project in mind?

I'd be happy to chat, and see if we'd be a good fit...