Explore Data Distributions Using D3.js
Geoff Escandon Technical Architect [email protected] @gjescandon
Level up by using visualization library D3.js
Convert the SFDC relational data into hierarchical JSON
Explore and present our data with D3.js visualizations
As your data becomes more complex...
Buddy Valastro, President & CEO, Carlo’s Bakery
Understanding and presenting data distributions is essential for success in sales, service, and platform performance.
What is D3.js
D3.js is a JavaScript library for manipulating documents based on data.
http://d3js.org/
D3 Concepts
Tree Layout - The tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm.
https://github.com/mbostock/d3/wiki/Tree-Layout
Demo #1: Custom Account Hierarchy View
1. Account Hierarchies (Account belongs to a parent Account)
2. Based on D3 – Collapsible Indented Tree
3. http://bl.ocks.org/mbostock/1093025
4. Dynamic color coding to highlight key metrics.
Code Sample #1: Custom Account Hierarchy View
1. Review VF structure
2. Show Soql query and results (hierarchical)
3. Show JSON output
4. Show JS which converts data
5. Source code available on github
Code Sample #1: Custom Account Hierarchy View
Using the Force.com AJAX toolkit...
How do we transform the above relational results to JSON (over there on the right >>) ?
Show Soql query and results
Demo #2: Account Sunburst
1. Based on D3 - Sunburst Partition
2. http://bl.ocks.org/mbostock/4063423
3. Dynamic sizing and color based on key metrics.
4. Dynamic levels.
Demo #3: Big Data Drill down
1. Based on D3 - Sunburst Partition
2. http://bl.ocks.org/mbostock/4063423
3. See high level distribution patterns in large data sets
4. Drill down for details
Demo #4: Processing Master – child Data
1. Opportunities that belong to Country__c and Region__c
2. Based on D3 - Partition Layers
3. http://mbostock.github.io/d3/talk/20111018/partition.html
Know your data quality and volumes
Know when to query whole sets or partials sets of data
Present visualizations to answer specific questions
As your data becomes more complex...
Buddy Valastro, President & CEO, Carlo’s Bakery
Gotchas
Demo #5: Gotchas
Gotcha: Poor or inconsistent Data Quality can lead to ugly visualizations.
Solution:
Understand how empty, null, or other invalid data will render in your visualization.
Demo #5: Gotchas
Gotcha: Depending on the implementation, some visualizations may hide details from you.
Solution:
Be sure to understand the implementation of the visualization.
Use sizing or color to highlight areas where details may be hidden.
Query partial data sets.
D3.js is sweet for exploring and presenting data
Convert hierarchical and relational data into JSON
Know the gotchas
What we have learned
Buddy Valastro, President & CEO, Carlo’s Bakery
Explore Data Distributions using D3.js
D3.js Reference
1. http://d3js.org/
2. https://github.com/gescandon/df15-explore-data-using-d3
3. https://leanpub.com/D3-Tips-and-Tricks
Top Related