abstracting visualization logic to create thousands of charts - d3.js boulder

D3.JS AND DATA VISUALIZATION MEETUP: ABSTRACTING VISUALIZATION LOGIC TO CREATE 1000S OF CHARTS

August 20, 2015

Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

DFUZR

DFUZRDfuzr: n. /d-fūz-er/Dfuzr is a full-service digital agency. Our small, high-performance teams of expert creative and technology consultants transform ideas into positive brand interactions through media and technology.


VALUEVALUEWe work side-by-side with clients across the globe to help them refine their product vision and turn ideas into actionable strategies.

We contribute where we create the highest impact: customer insights and research; personas and user journeys; information architecture and content strategy; graphic and interaction design; hi-fidelity / production-ready prototypes; application architecture and development; continuous integration and ongoing refinement.

WE WORK WITH YOU TO DETERMINE WHERE — TOGETHER — WE CAN

DELIVER THE MOST VALUE.


BACKGROUND

SITUATION: Client delivers highly customized complex visualizations to customers in the financial services industry. Their business is scaling rapidly. Their old approach of manually coding one-off charts per visualization “works” but it will not scale and is not easily maintained.

CHALLENGE: Architect and deliver a system that is massively scalable, easy to maintain and extend, and is capable of generating 1000s of visualizations.


APPROACH• Analyze 60+ visualizations

• Assess current off-the-shelf abstracted visualization solutions: c3, nvd3, etc.

• Because of the high level of customization required we decided no existing solution would be suitable without significant refactoring… so we borrowed concepts :)

• Define a common, reusable set of components

• Decide how to abstract tasks <—This is where “When to use d3 for what it is good at” came from

• Ingest: data parsing/preparation

• Digest: component instantiation

• Rendering and display

• Devise a json-based configuration format

• Hand code visualizations then abstract them <—This is where our code walkthrough will focus


WHAT IS D3 GOOD AT?

• Extensibility

• Customization

• Drawing

• Element attribution

• Some array functions

• Magic <— Not always what we want/need

• SCALES!!!!


PRACTICE

Abstract a simple bar chart for re-use


THANKTHANK YOUWE LOOK FORWARD TO WORKING WITH YOU

YOU

1971 8th St. Boulder, CO 80302303.579.9648

www.dfuzr.com


http://www.dfuzr.com

abstracting visualization logic to create thousands of charts - d3.js boulder

Technology