Introduction to D3.

js
Ramanathan Pachaiyappan
PwC

Agenda
D3 Basics
Introduction
to D3.js

Salesforce
Analytics API

Demo
Q&A
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

D3 Steps

Load

Select & Bind

Enter & Append

Transform & Translate

Transition

Exit




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"/>


Lets Build Circles

Circle SVG Syntax:

<circle cx="50" cy="75 r="40"/>
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 5 4 3
1 3 5 7
2 4
Enter, Update, Exit Demo

Thinking in D3
Y

S
c
a
l
e

{
0

5
0
0
p
x
}

Y

V
a
l
u
e
s

{

a

-

z

}

X Scale {0 - 500px}
X Value {0 - 100000}
A
x
i
s

Axis
Canvas
f(n)
f(n)
Bar Chart
Rectangle SVG Syntax:

<rect x="10" y="10"
width="50" height="40" />
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

Accessing Analytics API
API Structure
Use to
introduce a
demo, video,
Q&A, etc. Other Demos
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
References
Github
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



Questions
Demo Screenshots
Circle Update Data Join Example
Bar Chart
Line Chart
Analytics API
Conversion
Analysis