Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • How to add D3.js visualization to your Ext JS application Olga Petrova Sales Engineer @ Sencha

Slide 3

Slide 3 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • D3.js Adapter in Ext JS 6.2

Slide 4

Slide 4 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • 2 ways to add D3.js visualization

Slide 5

Slide 5 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Short way: use build-in visualizations • Tree • Treemap • Pack • Sunburst • Heatmap 5 from 10 minutes

Slide 6

Slide 6 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Long way: build your own visualization base on any visualization from D3.js samples gallery: https://github.com/d3/d3/wiki/Gallery 6 from a couple of hours up to a couple of days

Slide 7

Slide 7 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Build-in visualization: Tree 7 Component “xtype” Store width & height Styling Interactions Tooltip Platform-specific Styling

Slide 8

Slide 8 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Custom visualization: steps 8 • Choose the base visualization • Choose an engine: SVG or Canvas • Define data requirements: flat or hierarchical data, fields • Define axes: xAxis, yAxis, colorAxis, customAxis... • Define Legend requirements • Define Tooltip

Slide 9

Slide 9 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • UStates Visualization

Slide 10

Slide 10 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Base visualization, SVG engine http://bl.ocks.org/NPashaP/a74faf20b492ad377312 10

Slide 11

Slide 11 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Data requirements 11 • Flat Store: Ext.data.Store • “state” field and “value” field

Slide 12

Slide 12 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Axes 12 • mapAxis: “state” field • colorAxis: “value” field

Slide 13

Slide 13 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Legend 13 • Color ticks • Associated values with formatting

Slide 14

Slide 14 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Tooltip 14 • “state” field • ”color” field

Slide 15

Slide 15 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Visualization definition 15

Slide 16

Slide 16 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Visualization config 16 • get • set • apply • update Provided Methods:

Slide 17

Slide 17 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Apply methods 17

Slide 18

Slide 18 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • applyColorAxis 18

Slide 19

Slide 19 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • colorAxis Scale 19

Slide 20

Slide 20 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • applyStore 20

Slide 21

Slide 21 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Visualization rendering 21

Slide 22

Slide 22 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • renderScene 22 property contains SVG paths for states states SVG elements render states SVG elements position Legend

Slide 23

Slide 23 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • renderScene 23

Slide 24

Slide 24 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Usage example 24

Slide 25

Slide 25 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Demo

Slide 26

Slide 26 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Your way 26 • Take a short way if you can • If you need to take a long way: - Find the most similar example from the gallery - Define axes - Create a simple prototype using Axes and code from d3.js example - Add Legend and Tooltip - Customize

Slide 27

Slide 27 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • D3.js adapter offers 27 • Ready-to-use visualization components • Base and utility classes (Axis, Legend, Tooltip) to create your of custom visualization

Slide 28

Slide 28 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Source code 28 https://github.com/olga-petrova/SenchaMeetup

Slide 29

Slide 29 text

©  2016  Sencha  Inc.  • CONFIDENTIAL  • Thank you!