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
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
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"/>
Data Joins - Enter, Update, ExitEnter – [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
Thinking in D3
Y S
cale
{0 –
500px}
Y V
alu
es {
a -
z }
X Scale {0 - 500px}
X Value {0 - 100000}
Axis
Axis
Canvas
f(n)
f(n)
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)
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
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
ReferencesGithub
https://github.com/ramanathansj/dreamforce2014-d3.js
Force.com Reference
http://blogs.developerforce.com/developer-relations/2013/09/using-the-salesforce-analytics-api-on-a-visualforce-page.htm
http://www.salesforce.com/us/developer/docs/pages/
http://blogs.developerforce.com/engineering/2013/08/designing-dashboards-and-reports-for-force-com-implementations-with-large-data-volumes.html
https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit
http://www.salesforce.com/us/developer/docs/api_analytics/index.htm
D3.JS
http://d3js.org
https://github.com/mbostock/d3/wiki/API-Reference
http://vis.stanford.edu/files/2011-D3-InfoVis.pdf
http://bost.ocks.org/mike/selection/
http://bost.ocks.org/mike/join/
http://bost.ocks.org/mike/nest/
http://www.youtube.com/user/d3Vienno
SVG
http://www.w3schools.com/svg/
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute