vida dashboard training
TRANSCRIPT
Summary
Architecture Overview
Dataset: Nasdaq 100 Index 1985-2012
Simple Dashboard
Event for Simple Dashboard
Crossfilter, dc.js, jQuery DataTables
Beta - Bug workaround: refresh browser
Simple Dashboard Demo
Nasdaq 100 Index 1985-2012
Nasdaq 100 Index 1985-2012 - Average Close
Simple Dashboard
Simple Dashboard Demo
1.Create Line chart - “[Jack] Line”
2.Create Bar chart - “[Jack] Bar”
3.Create Dashboard - “[Jack] Nasdaq 100
Index 1985-2012”
4.Add Line chart for - Open, Close, Volume
Simple Dashboard Demo - Styling
var X_DATA_TICK = d3.time.format("%b %y");
svg text { font-size: 12px }
xAxis.ticks(5)
Vida Document Structure
Visualization
Data PropertiesCode
HTML
JavaScript
Stylesheet
(Reusable)
Vida Document Loading
Visualization
Data(CSV, TSV, JSON)
Properties
// JavaScript
// var data contains Data in JSON
// format
// e.g. [1,2,3,4]
// var config contains Properties
// e.g. {width: 500, height: 500}
// draw visualization with data
// and config
HTML Stylesheet
canvas & canvas-svg
Vida Document Loading
1.Request Document object from Vida server
2.Append HTML (canvas-svg) to canvas
3.Append stylesheet to DOM
4.Execute JavaScript code
Dashboard (Composite Document)
Dashboard
Line Chart 1
(line-chart-id, 0)
Line Chart 2
(line-chart-id, 1)
Bar Chart 1
(bar-chart-id, 0)
Bar Chart 2
(bar-chart-id, 1)
Example - Component Document
Example - Dashboard
Example - Dashboard HTML
Dashboard Loading
1. Request Composite Document object from Vida server
2. Request component documents
3. For each component document
a. Replace #canvas-svg in HTML with div ID on
dashboard page
b. Replace #canvas-svg with div ID in JavaScript,
execute
#canvas-svg Replacement in HTML
Line Chart 1
document-N4kXZ8XaDw4JXTkod-0
Line Chart 2
document-N4kXZ8XaDw4JXTkod-1
#canvas-svg Replacement in JavaScript
Line Chart 1
#document-N4kXZ8XaDw4JXTkod-0
Line Chart 2
#document-N4kXZ8XaDw4JXTkod-1
Example - Dashboard Loading
Connect Component Documents
CompDoc.dispatch
Doc 1
config.dispatch
Doc 2
config.dispatch
Doc 3
config.dispatch
Connect Component Documents
CompDoc.dispatch = d3.dispatch("filter")
Trigger event
config.dispatch.filter(param);
Listen to event
config.dispatch.on(“filter.” + salt, function(param) {
});
Crossfilter, dc.js, jQuery DataTables
https://vida.io/documents/search?t=crossfilter
Import VIDA Document
if (config.ndx) {
var ndx = config.ndx;
} else {
var ndx = crossfilter(data);
}
Crossfilter, dc.js Dashboard Demo
Crossfilter, dc.js Dashboard Demo
Crossfilter, dc.js, DataTables Demo
Sample Dashboards
VC Industry 2011
https://vida.io/compositeDocuments/We9ESFtPuDDZ4GRge
VC Industry 2011 with jQuery DataTables
https://vida.io/compositeDocuments/vyGugvbsXJywPcrw2
University of California Campuses: Expense Function
https://vida.io/compositeDocuments/6A8GhSDgJQqbz7c3T
Twitter Dashboard
https://vida.io/compositeDocuments/sJcT5Q3CW8nw2xSFY
FAA Flights January 2015
https://vida.io/compositeDocuments/wXMrqy7JCYmtSDikB