Transcript tollkit-assignment-d3

D3.JS
JUSTIFY YOUR CHOICE
JUSTIFY YOUR CHOICE
 Build the data visualization framework that you want;
JUSTIFY YOUR CHOICE
Based on JavaScrip
---Easy to extend functionality
---Vast Array of plugins
JUSTIFY YOUR CHOICE
 static/interactive
JUSTIFY YOUR CHOICE
Open Source and Active Communities
---Easy to find answers to questions/get support
---Tons of Sample Code
JUSTIFY YOUR CHOICE
 Free to use(vs. Tableau, Many Eyes, Adobe, etc.)
JUSTIFY YOUR CHOICE
Build the data visualization framework that you want;
Based on JavaScrip
---Easy to extend functionality
---Vast Array of plugins
static/interactive
Open Source and Active Communities
---Easy to find answers to questions/get support
---Tons of Sample Code
Free to use(vs. Tableau, Many Eyes, Adobe, etc.)
TOOL HISTORY & SOCIETY
 D3.JS’S CREATOR--
TOOL HISTORY & SOCIETY
TOOL HISTORY & SOCIETY
 D3.JS INTEGRATED INTO WEB STANDARDS AND
DOCUMENT OBJECT MODEL(DOM) AT THE CORE OF
HTML.
 CREATE HIGH-PERFORMANCE DATA DASHBOARDS AND
SOPHISTICATED DATA VISUALIZATION AND TO UPDATE
TRADITIONAL WEB CONTENT.
USE CASES / EXAMPLES
USE CASES / EXAMPLES
USE CASES / EXAMPLES
USE CASES / EXAMPLES
USE CASES / EXAMPLES
CONSTRAINTS / CHALLENGES
TUTORIAL --- D3.JS
 D3 is set based
 Data is Bound to DOM elements-this is called a join
 You define the binding operation and let it happen; there is no for loop
 Attributes---Operations can use the attributes of the data
 Get your data
 Select DOM nodes you want to work with
 Translate the data objects into DOM elements and attributes
 Bind your data to DOM elements (join)





Enter-New data, for which there were no existing elements
{Update-New data joined successfully to a new element}
{Exit- Existing elements, for which there were no new data}
_data_-Data objects are bound to this Attribute
Key Function- determines the “Primary Key” used in Update / Exit
TUTORIAL --- D3.JS
Tutorial --- D3.js
https://www.dashingd3js.com/table-of-contents