Recommended
More Related Content
What's hot
What's hot (20)
Similar to Dreamforce 2014 - Introduction to d3.js
Similar to Dreamforce 2014 - Introduction to d3.js (20)
Recently uploaded
Recently uploaded (20)
Dreamforce 2014 - Introduction to d3.js
- 1. Introduction to D3.js Ramanathan Pachaiyappan PwC
- 2. Agenda D3 Basics Introduction to D3.js Salesforce Analytics API Demo Q&A
- 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") D3 Selections 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 Circle SVG 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. Enter, Update, Exit Demo
- 10. Thinking in D3 YScale{0–500px} YValues{a-z} X Scale {0 - 500px} X Value {0 - 100000} Axis Axis Canvas f(n) f(n)
- 11. Bar Chart Rectangle SVG Syntax: <rect x="10" y="10" width="50" height="40" />
- 12. Wait!, it looks like … • 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
- 15. API Structure
- 16. Other Demos
- 17. Summary - D3.js vs 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
- 19. Questions
- 20. Demo Screenshots
- 21. Circle Update – Data Join Example
- 22. Bar Chart
- 23. Line Chart
- 24. Analytics API