INTRODUCTION TO D3 _by Oleksii Prohonnyi
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
INTRODUCTION TO D3
_by Oleksii Prohonnyi
DATA VISUALIZATION
Overview Data visualization is the presentation of data in a pictorial
or graphical format.
Reasons to use:
helps people see things that were not obvious to them before;
patterns can be spotted quickly and easily;
conveys information in a universal manner;
answer questions like “What would happen if we made an adjustment to that area?”.
Tools
Charts wizards (Libre Office, MS Office, Numbers)
Google Charts
Modest Maps (mapping tool)
Visual.ly
Tableau
RAW (from Density Design)
D3.js
See more
www.storytellingwithdata.com
vizwiz.blogspot.com
www.visualisingdata.com
flowingdata.com
helpmeviz.com
plot.ly (collaboration online tool)
D3 IS NOT A SILVER BULLET!
ALTERNATIVES
D3.js alternatives
Cytoscape.js
C3.js
Canvas.js
Datacopia
Panxpan
See more: alternativeto.net
ABOUT D3
Introduction
D3.js is a JavaScript library for manipulating documents based on data.
D3 - Data-Driven Documents
d3js.org
github.com/mbostock/d3
github.com/mbostock/d3/wiki/API-Reference
BAD PARTS
D3 is bad at
Being a chart library
Being Backward compatible
Rendering things for you
Abstracting basic graphic primitives
Source: ireneros.com
GOOD PARTS
D3 is good at
Providing a way to map data to documents.
Being a general purpose visualization library
Handling data transformation
Providing basic math & layout algorithms
Source: ireneros.com
D3 VS JQUERY
D3 is a little like jQuery (jQuery)
D3 is a little like jQuery (D3)
Source: bl.ocks.org
PRE-CONDITIONS
Index.html
SELECTIONS
Selections A selection is an array of elements pulled from the current
document. D3 uses CSS3 to select elements.
After selecting elements, you apply operators to them to do stuff. These operators can get or set attributes, styles, properties, HTML and text content.
d3.select(selector), d3.select(node)
d3.selectAll(selector), d3.selectAll(nodes)
See more: github.com/mbostock/d3/wiki/Selections
Select element and style it a bit
EXTERNAL DATA
External data files d3.csv - request a comma-separated values (CSV) file.
d3.html - request an HTML document fragment.
d3.json - request a JSON blob.
d3.text - request a text file.
d3.tsv - request a tab-separated values (TSV) file.
d3.xhr - request a resource using XMLHttpRequest.
d3.xml - request an XML document fragment.
See more: github.com/mbostock/d3/wiki/Requests
Create simple data file
DATA JOINTS
Data joints
The act of creating a mapping between data points and the objects representing them.
[1,2,3] -> µ £ ¥ [1,2,3] -> <div>1</div>
<div>2</div>
<div>3</div>
See more: github.com/mbostock/d3/wiki/Requests
Fetch data from file
SCALES
What do scales should be used?
Source: ireneros.com
Scale types
Quantitative Scales - for continuous input domains, such as numbers.
Ordinal Scales - for discrete input domains, such as names or categories.
Time Scales - for time domains.
Create scales for data
DYNAMIC PROPERTIES
What do dynamic properties do?
Styles, attributes, and other properties can be specified as functions of data in D3, not just simple constants.
Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions.
See more: d3js.org/#properties
Set label position due to data
Demo: <presentation-code-root>/index.html
OTHER D3 FEATURES
Layouts A layout encapsulates a strategy for laying out data elements
visually, relative to each other. Many layouts are built in to D3 itself:
Chord - produce a chord diagram from a matrix of relationships.
Partition - recursively partition a node tree into a sunburst or icicle.
Pie - compute the start and end angles for arcs in a pie or donut chart.
Tree - position a tree of nodes tidily.
etc.
See more: github.com/mbostock/d3/wiki/Layouts
Transitions
A special type of selection where the operators apply smoothly over time rather than instantaneously.
May have per-element delays and durations, computed using functions of data similar to other operators.
Multiple transitions may operate on any selection sequentially or in parallel.
See more: github.com/mbostock/d3/wiki/Transitions
Geography
Paths - display geographic shapes.
Projections - convert locations (latitude and longitude) to pixel coordinates.
Streams - streaming geometry transformations.
Even more
Formatting
Colors
Localization
Math
Time
etc.
MORE EXAMPLES
Source: theguardian.com
ONE MORE THING
How to select a chart type?
Main purpose of data visualization:
Comparison
Composition
Distribution
Relationship
See more: goo.gl/1jkVNk
Try by yourself: goo.gl/gl6Q4R
Source: storytellingwithdata.com
REFERENCES
References
d3js.org
bl.ocks.org/mbostock
christopheviau.com/d3list
“D3 Tutorials” by Scott Murray
“Introduction to D3” by Irene Ros
"Data Visualization with D3.js" by Lynda.com
"Data Visualization and D3.js" by Udacity
DIVE INTO D3
LvivJS 2015 presentation:
D3.JS TIPS & TRICKS(export to svg, crossfilter, maps etc.)
See and download: goo.gl/SSzp5C
THANK YOUFOR ATTENTION
Q&A
Oleksii Prohonnyi
fb.com/oprohonnyi
linkedin.com/in/oprohonnyi/en
Sources: goo.gl/xjCDk5
Related Documents
