Upload
danielle-bilbruck
View
358
Download
1
Embed Size (px)
Citation preview
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.
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
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.
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
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
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
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
PRACTICE
Abstract a simple bar chart for re-use
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder
1971 8th St. Boulder, CO 80302303.579.9648
www.dfuzr.com
Twitter: @dfuzrindustries Facebook: Dfuzr Industries LinkedIn: Dfuzr Industries #D3Boulder