Preso for d3/Visualization Meetup

1. 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

2. DFUZR
DFUZR
Dfuzr: 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.
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

3. VALUEVALUE
We 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.
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

4. 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.
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

5. 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
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

6. WHAT IS D3 GOOD AT?
• Extensibility
• Customization
• Drawing
• Element attribution
• Some array functions
• Magic <— Not always what we want/need
• SCALES!!!!
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

7. PRACTICE
Abstract a simple bar chart for re-use
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder

8. THANK
THANK YOU
WE LOOK FORWARD TO
WORKING WITH YOU
YOU

9. 1971 8th St. Boulder, CO 80302
303.579.9648
www.dfuzr.com
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder