Making D3.js Reusable With Templates

written

D3.js is an awesome library for visualization. However, it requires a developer to perform the magic. So far, it has not been so popular with traditional data analysts.

At vida.io, we set out to bring D3.js to less technically savvy users. We want to enable them to create amazing data visualizations with D3.js. Our approach is template.

What is a D3.js Template?

It’s a D3.js visualization that you can reuse by just plugging in new data. For example, one of our customers want to be able to compare metrics of two different entities. We made a template with multiple side-by-side bar charts. Below are comparisons of India vs. China and Apple vs. Orange.


Both visualizations share the same JavaScript and Stylesheet. User can clone India vs. China template, add new data, update colors to get Apple vs. Orange.

Data for India vs. China:

1
2
3
4
5
6
7
8
9
[
  {
    "chart_title": "Population",
    "unit": "billion",
    "India": 1.22,
    "China": 1.36
  },
  // ...
]

Data for Apple vs. Orange:

1
2
3
4
5
6
7
8
9
[
  {
    "chart_title": "Calories",
    "unit": "int",
    "Apple": 52,
    "Orange": 47
  },
  // ...
]

You can see data format for two visualizations are identical.

Reuse a D3.js Template

You can create new D3.js visualizations in 3 quick steps with vida.io tool.

  1. Clone a visualization template
  2. Apply new data
  3. Update styling and colors

More Templates

Here’s a complex template used by the Washington Business Alliance to display metrics of US states.

Check out the list of templates on vida.io/explore. If you need more, contact us at contact@vida.io.

With template, D3.js is easy to use, reuseable, and affordable. Add it to your toolbox for business intelligence and data analysis!


Comments