Victor Tsang

NetBase Klipfolio Visualizations

Connecting NetBase API to Klipfolio and creating data visualizations

NetBase Klipfolio Visualizations

My Role

  • Front-End Developer / Happiness Engineer
  • Connecting NetBase API to Klipfolio and creating data visualizations
  • Developed a development environment to increase workflow efficiency
  • Troubleshooting bugs and resolving client dashboards' issues

Tech Stack

  • HTML5 / CSS3
  • JavaScript
  • jQuery
  • D3.js
  • Node.js
  • Express.js
  • Gulp
  • Require.js

About this project

Klipfolio is a data analytics cloud app for building and sharing real-time business dashboards and reports on web browsers, TV monitors and mobile devices. It allows you to connect various data sources in one platform and our goal is to add NetBase API as one of their data sources. In this project I worked on various custom visualizations that Klipfolio natively do not have. Since this is a new platform for NetBase, I had to go through a lot of hoops in order to create the custom visualizations that we needed.

Even though Klipfolio allows you to build your own custom HTML/JS visualizations there wasn't a lot of examples or documentations that would help you get started. It also uses Require.js to import scripts, which added another step to the process when I transpose my local code to Klipfolio. Initially the workflow looked like this:

  • Connect data source in Klipfolio platform
  • Create visualization in Codepen with dummy data
  • Copy and paste the code in Klipfolio's HTML and JavaScript section
  • Save and check if the code works

Debugging, copying, pasting and saving took a lot of my time, so in order to fix my workflow issue, I created a development environment that outputs the code that Klipfolio requires. I used Node and Express to connect to NetBase API and created a route to store the data locally. On the front-end, I used AJAX to get the data and Require.js to import other libraries. If my code works locally then there is a good chance it will work on Klipfolio.

Thanks for reading!

View all projects

Made by Victor Tsang © 2019