Explore Data Distributions Using D3.js

Explore Data Distributions Using D3.js

 Geoff Escandon  Technical Architect  [email protected]  @gjescandon  

Geoff Escandon Technical Architect, Appirio

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

Code Sample #1: Custom Account Hierarchy View Show JS which converts hierarchical data

Demo #2: Account Sunburst

1.  Based on D3 - Sunburst Partition


3.  Dynamic sizing and color based on key metrics.

4.  Dynamic levels.

Demo #3: Big Data Drill down

1.  Based on D3 - Sunburst Partition


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

Code Sample #2: Processing Master-child Data Show JS which converts hierarchical data

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


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


Explore Data Distributions using D3.js

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

Thank you

Explore Data Distributions Using D3.js

Technology

Transcript of Explore Data Distributions Using D3.js