Leveraging the Beautiful D3 Visualizations within your Sencha Applications by Gautam Argawal

Learn how you can add powerful D3 visualizations to your Ext JS applications by using our new D3 adapter available in Ext JS 6.2. With the D3 adapter, you can now empower your users to navigate and explore large and complex datasets using visual representations that are intuitive to understand.

Transcript

1. © 2016 Sencha Inc
   Leveraging the Beautiful D3 Visualizations
   within your Sencha Applications
   Gautam Agrawal
   Sr. Director, Product Management
   

   View Slide

2. © 2016 Sencha Inc
   Growth in data
   “The rate at which we're generating data is
   rapidly outpacing our ability to analyze it.”
   Professor Patrick Wolfe, Big Data Institute
   2
   

   View Slide

3. © 2016 Sencha Inc
   Some Mind Blowing Stats
   • More than 90% of the data in the world was created in just last 2 years.
   • We sent astronauts to moon in 1969 on an infinitesimal fraction of the data we
   have in our everyday products. 1 MacBook Air = 2 Million Space Trips.
   • By 2020, digital knowledge is expected to equal 44 Zettabytes, up from 4.4
   Zettabytes today.
   • 1 GB = 960 minutes of music, 1 ZB = 2 Billion minutes of music.
   3
   

   View Slide

4. © 2016 Sencha Inc
   Today, we’re drowning in data
   99.5% of the data in the world
   hasn’t even been looked at…
   4
   

   View Slide

5. © 2016 Sencha Inc
   Data Visualization is the Key
   5
   

   View Slide

6. © 2016 Sencha Inc
   Two Basic Types of Data Visualization
   • Explanatory
   - Turn large quantities of data into information
   - Present data coherently with intuitive sense
   - Tell a story to an audience
   • Exploratory
   - Discern the relationships in the data
   - Find the story that data is telling
   6
   

   View Slide

7. © 2016 Sencha Inc
   Data Visualization – Explanatory
   You are using Data Visualization as an effective
   means to communicate the story.
   7
   

   View Slide

8. © 2016 Sencha Inc
   Data Visualization – Explanatory
   • Tabular Displays
   - Fairly pervasive
   - Only effective with limited number of rows
   and columns
   • Tips for using tables a.k.a. grid when
   telling a story
   - Show only the most vital columns
   - Scroll in a single direction
   8
   

   View Slide

9. © 2016 Sencha Inc
   Data Visualization – Explanatory
   • Charts & Graphs
   - Provide more effective explanations
   - Add the much needed intuitiveness
   • Tips for using charts and graphs when
   telling a story
   - Inappropriate choices distort reality
   - Proportional axis scaling
   9
   

   View Slide

10. © 2016 Sencha Inc
    Data Visualization – Exploratory
    You are using Data Visualization as a tool to
    understand the story behind your data.
    10
    

    View Slide

11. © 2016 Sencha Inc
    Data Visualization – Exploratory
    • You are exploring the story
    - Hundreds of columns, thousands of rows
    - Unknown relationships
    • Identify patterns and relationships that
    are not obvious
    11
    

    View Slide

12. © 2016 Sencha Inc
    Rapid Adoption of D3 in Exploratory Data Visualization
    12
    • D3 (Data-Driven Documents) has
    become one of the most popular
    general purpose data visualization tool
    • But note (though you can do it):
    - D3 is not a chart library
    - D3 is not a map library
    - D3 doesn't work with bad browsers
    

    View Slide

13. © 2016 Sencha Inc
    Data Visualization in Ext JS
    • Sencha Charts
    • Explanatory Data Visualization
    • D3 Adapter (Integration with Ext JS)
    • Exploratory Data Visualization
    13
    

    View Slide

14. © 2016 Sencha Inc
    D3 Hierarchical Layouts - Treemap
    14
    

    View Slide

15. © 2016 Sencha Inc
    D3 Hierarchical Layouts - Tree
    15
    

    View Slide

16. © 2016 Sencha Inc
    D3 Hierarchical Layouts - Pack
    16
    

    View Slide

17. © 2016 Sencha Inc
    D3 Integration in Ext JS – Component Level
    17
    

    View Slide

18. © 2016 Sencha Inc
    D3 Integration in Ext JS – Component Level
    18
    

    View Slide

19. © 2016 Sencha Inc
    Demo
    19
    

    View Slide

20. © 2016 Sencha Inc
    Q & A
    20
    

    View Slide