Downloaded 68 times
![Data Joins - Enter, Update, Exit
Enter – [1, 2, 3, 4, 5]
Update – [1, 3, 5, 7]
Exit – (since there is no data in scope for this elements)
Circle.exit().remove(); (this line will trigger remove element , continued from last example)
1 2 543
1 3 5 7
2 4](https://image.slidesharecdn.com/introductiontod3-public-copy-141222194816-conversion-gate01/75/Dreamforce-2014-Introduction-to-d3-js-8-2048.jpg)
More Related Content
Similar to Dreamforce 2014 - Introduction to d3.js
Dreamforce 2014 - Introduction to d3.js
- 1. Introduction to D3.js RamanathanPachaiyappan PwC
- 2.
- 3. Introduction to D3.js •D3 stands for Data Driven Documents • D3.js is a low level visualization library based on Web standards (HTML, CSS, JS, SVG) • Uses DOM as Container, Transparent Representation, Easy to debug, No Intermediate layer (like Flash, etc) • D3 is divided into Core, Scale, Layouts, Behaviors (events), SVG, Geometry, etc • D3.js is Open Source
- 4. D3 Steps • Load •Select & Bind • Enter & Append • Transform & Translate • Transition • Exit
- 5. Selection Examples d3.selectAll("p b") d3.selectAll("p").select("b") d3.selectAll("p").selectAll("b") D3Selections D3 provides broad range of Selectors like JQuery and supports similar predicates D3 binds data to individual elements property called __data__ not just in DOM Select matches first, while SelectAll matches all elements Hierarchical/Nested selections are supported, when selections used in combination order is maintained
- 6. Basic SVG Shapes •Circle <circle cx="50" cy="75" r="40" stroke="orange" fill="orange" stroke-width="5"/> • Rectangle <rect x="10" y="10" width="50" height="40" stroke="orange" fill="orange" stroke-width="5"/> • Ellipse <ellipse cx="75" cy="75" rx="30" ry="10" stroke="orange" fill="transparent" stroke-width="5"/> • Line <line x1="50" x2="10" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> • Path <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="orange" stroke-width="5"/> • Polygon <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="orange" fill="transparent" stroke-width="5"/>
- 7. Lets Build Circles CircleSVG Syntax: <circle cx="50" cy="75“ r="40"/>
- 8. Data Joins -Enter, Update, Exit Enter – [1, 2, 3, 4, 5] Update – [1, 3, 5, 7] Exit – (since there is no data in scope for this elements) Circle.exit().remove(); (this line will trigger remove element , continued from last example) 1 2 543 1 3 5 7 2 4
- 9.
- 10. Thinking in D3 YScale{0–500px} YValues{a-z} XScale {0 - 500px} X Value {0 - 100000} Axis Axis Canvas f(n) f(n)
- 11. Bar Chart Rectangle SVGSyntax: <rect x="10" y="10" width="50" height="40" />
- 12. Wait!, it lookslike … • Can I do similar stuff in Javascript or replace with other framework? • Most frameworks assumes DOM exist and perform some operation, D3 starts with Data and performs Data Joins which results in DOM operations • D3 provides toolsets like Layouts, Scales, Axes, Math, Date functions which is not easy to roll out. • D3 help us to think charting in terms of data/abstract functions and performs underlying operation (ex: process of creating chart, SVG Path generation)
- 13. Salesforce Analytics API •REST API to access Salesforce reports data/metadata as JSON, GA Since Winter 14 • Possible to automate complex aggregation using reports without coding (ex: group by, summary) • Access to report API can be synchronous or asynchronous • Supports report filter criteria like reporting engine • Use report metadata API information to parse report data values
- 14.
- 15.
- 16.
- 17. Summary - D3.jsvs Others • D3 does not provide any Out of the box charting like Other libraries • D3.js development involves some steep learning curve in beginning • Writing a configurable charts needs greater understanding. • Consider D3 when you want to rollout a branded Visualizations or something unique or your own creative side • Other options to consider: Visualforce Charting, Google Charts and HighCharts
- 18.
- 19.
- 20.
- 21. Circle Update –Data Join Example
- 22.
- 23.
- 24.
- 25.