Making D3.js Reusable With Templates

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.

India vs. China

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:

[ { "chart_title": "Population", "unit": "billion", "India": 1.22, "China": 1.36 }, // ... ]

Data for Apple vs. Orange:

[ { "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.

Wine Consumption
Hockey Players per 100k residents

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

View full blog post.

Views: 4200

Tags: analytics, data, javascript, visualization


You need to be a member of Data Science Central to add comments!

Join Data Science Central

Comment by Eron Lloyd on January 6, 2016 at 10:18am

Is that an SVG version of the US? I've been looking for one that has county-level shapes I can use for data visualizations powered by D3.js. I'll check it out, thanks!

© 2021   TechTarget, Inc.   Powered by

Badges  |  Report an Issue  |  Privacy Policy  |  Terms of Service