w/ apex + open source graphing libsba6.us/content/presentations/2013-06-davidmann... · qualities...
TRANSCRIPT
![Page 1: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/1.jpg)
David Mann | @ba6dotus | http://ba6.us
Explore New Data Dimensionsw/ Apex + Open Source Graphing Libs
![Page 2: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/2.jpg)
Why do we Create Visualizations?Moving Beyond the Defaults w/examplesExtend Apex with F/OSS Libraries3 Popular JavaScript F/OSS Graphing ToolsIntegrating JavaScript Libraries With ApexLet’s Build a Visualization in Apex
TOPICS
![Page 3: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/3.jpg)
BIOGraphic Arts BackgroundDeveloper and DBAI Like Shiny Things
Work - DBI ConsultingArchitecture FocusAnalysis Opportunities
![Page 4: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/4.jpg)
WHY DO WE CREATE VISUALIZATIONS?
![Page 5: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/5.jpg)
QUALITIES OF A GOOD VISUALIZATIONRecognizable + Readable = Effective
55%20%
15%10%
2009 2010 2011 2012
![Page 6: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/6.jpg)
CHALLENGESDistill the essence of a data set into a clear visual representation
Mapping data to visualizations
Move beyond default graphing options when it makes sense
Construction and Implementation details
Stimulate Critical Thinking - Alternate ways of relating to data
Iterate - Don’t be afraid to fail!
![Page 7: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/7.jpg)
SOME VISUALIZATIONS ARE NOT GOOD
![Page 8: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/8.jpg)
Apex DefaultsLevels of AbstractionAdding More variables into the MixAlternate Filtering/AggregationSpatial RelationshipsTemporal RelationshipsCombinations of above
MOVING BEYOND THE DEFAULTS - SUBTOPICS
![Page 9: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/9.jpg)
APEX DEFAULTS
![Page 10: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/10.jpg)
LEVELS OF ABSTRACTION - TRY 1 & 2
![Page 11: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/11.jpg)
LEVELS OF ABSTRACTION - TRY 2 & 3
![Page 12: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/12.jpg)
LEVELS OF ABSTRACTION - TRY 3 & 4 LINK TO SOURCE
![Page 13: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/13.jpg)
MORE VARIABLES - PARALLEL SETS
http://www.jasondavies.com/parallel-sets/
![Page 14: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/14.jpg)
INTERACTIVE FILTERING
Cross Filter - http://square.github.com/crossfilter/
![Page 15: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/15.jpg)
RELATIONSHIPS & RELATIVE POSITIONSHierarchies - Parent/ChildNetwork Relations
Nodes/EdgesDirected Graphs
Map Projections
![Page 16: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/16.jpg)
HIERARCHIESselect lpad(' ',level*2,' ')||ename ename, empno, mgr from emp START WITH ENAME=‘JONES’ CONNECT BY PRIOR EMPNO = MGR;
ENAME EMPNO MGR--------------- ---------- ---------- JONES 7566 7839 SCOTT 7788 7566 ADAMS 7876 7788 FORD 7902 7566 SMITH 7369 7902
5 rows selected.
LINK TO SOURCE
![Page 17: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/17.jpg)
ADJACENCY RELATIONSHIPS
http://dl.dropbox.com/u/14196218/Share/d3ForceIntegrations.htmlhttp://evening-mountain-5731.herokuapp.com/index.html
Nodes connected by edgesNodes show endpoints
Can have attributes like Gender, Age, Weight, Volume
Edges show connections Can also have attributes like Force, Direction, Connection Date, Frequency of Contact, Direction of Relationship
![Page 18: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/18.jpg)
ADJACENCY RELATIONSHIPS
http://www.jasondavies.com/mobile-lawsuits/
Chord DiagramDirected Links between peer nodesInvolved in more relationships, more radial space taken
![Page 19: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/19.jpg)
PARALLEL SETS - SANKEY DIAGRAM
http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html
![Page 20: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/20.jpg)
MAP PROJECTIONS
EX. 2EX. 1
![Page 21: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/21.jpg)
TEMPORAL RELATIONSHIPS
RICKSHAW.JS
![Page 23: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/23.jpg)
COMBINING RELATIONSHIPS
http://www.datapointed.net/visualizations/color/men-women-color-names-d3/
![Page 24: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/24.jpg)
EXTEND APEX WITH F/OSS LIBRARIES
![Page 25: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/25.jpg)
- VS -
BUY / BUILD / ADAPT
![Page 26: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/26.jpg)
HOW FREE IS FREE?HOW FREE IS FREE?
![Page 27: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/27.jpg)
How is your relationship with JavaScript?
Rocky?
Much more stable and predictable lately
Dev Console is your friend
webplatform.org
JavaScript: “The Good Parts”
![Page 28: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/28.jpg)
POPULAR F/OSS GRAPHING OPTIONS
Google Chart API
Javascript Infovis Toolkit
D3 - Data Driven Documents + 'Helper' libraries
![Page 29: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/29.jpg)
GOOGLE CHARTS
![Page 30: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/30.jpg)
GOOGLE CHARTS PROS + CONSPros
Easy to get started with the “Playground”Excellent documentation & ExamplesBegin with defaults, customize with events if needed
ConsGoogle WhimsDependency on their servers
![Page 31: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/31.jpg)
GOOGLE EATS THEIR OWN DOG FOOD
![Page 32: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/32.jpg)
JavaScript Infovis Toolkit
HTTP://PHILOGB.GITHUB.COM/JIT/DEMOS.HTML
![Page 33: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/33.jpg)
JIT Pros + Cons
Pros:
Large assortment of spatial relationship and proportion graphs
Comprehensive examples with source code
Cons:
Development has slowed down
Smaller user base
![Page 34: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/34.jpg)
JavaScript Infovis Toolkit
![Page 36: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/36.jpg)
D3.js Pros + ConsPros:
PowerfulCustomizableLots of examplesLots of helpersActive development / User community
Cons:IE8 not supportedLow level toolkitDocumentation is evolvingSteep Learning Curve if rusty/new to JavaScript
![Page 37: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/37.jpg)
D3.JS HELPERS
DC.JSCUBISMNVD3
![Page 38: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/38.jpg)
INTEGRATING JAVASCRIPT LIBRARIES WITH APEX
![Page 39: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/39.jpg)
CONTEXT
SVG
![Page 40: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/40.jpg)
DATA MOVEMENTExpose server-side data to HTML pageInject HTML into your page with HTP.PRINTHTP.PRINT(‘<SCRIPT> ... </SCRIPT>’);
Dynamic ActionsJavascript call initiates call to PL/SQL functionPL/SQL returns results as character stringPlain Text/JSON/CSV/XML can be returned from Oracle to browser environment
![Page 41: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/41.jpg)
DEVELOPMENT ENVIRONMENTStart with HTML mock-upRemote development:
http://jsfiddle.netLocal development:
Basic HTTP ServerBrowser Developer ToolsBrowser Javascript Console + Debugger
![Page 42: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/42.jpg)
DEMOS
Real Time Update
Smooth transition for new data points
Visualizing Database Links
Node relationship
![Page 43: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/43.jpg)
REAL TIME UPDATE WITH TRANSITION
Link to Tutorial and Code : http://ba6.us/d3js_application_express_basic_dynamic_action
![Page 44: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/44.jpg)
JS & CSS REFERENCES FOR YOUR PAGEReference in Header Shared Components via
#WORKSPACE_IMAGES
![Page 45: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/45.jpg)
SET UP A DYNAMIC ACTION
Define an On Demand ProcessPage or App Level
Provide PL/SQL code to return a random number from 1-100 as a string
This will be called by JavaScript on the page
![Page 46: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/46.jpg)
WHERE THE MAGIC HAPPENSHTMLDB_GET asynch call to GetRandom Dynamic Action
Character result stored in JS variable
![Page 47: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/47.jpg)
IMPLEMENTATION - CODE TOURSetup - DIV placeholderCreate chartDraw Chartnext() function consumes results of Dynamic Action
Link to Tutorial and Code : http://ba6.us/d3js_application_express_basic_dynamic_action
![Page 48: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/48.jpg)
RESULT
Link to Tutorial and Code : http://ba6.us/d3js_application_express_basic_dynamic_action
![Page 49: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/49.jpg)
RADIAL NODE
Link to Mock Up : http://ba6.us/content/links1/links.html
![Page 50: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/50.jpg)
IMPLEMENTATION - DYNAMIC ACTIONDefine an On Demand Process
Provide code to return JSON as a string
This will be called by JavaScript on the page
JSON decoded to JavaScript object via JSON.parse()
![Page 51: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/51.jpg)
IMPLEMENTATION - JSON FORMAT[ {"name":"MONITOR1","linksto":["MONITOR2","HR1","HR2","HR3","HR4","FIN1", "FIN2","FIN3","FIN4","MANU1","MANU2", "MANU3","MANU4","SHIP1","SHIP2"]}, {"name":"MONITOR2","linksto":["MONITOR1","HR1","HR2","HR3","HR4","FIN1", "FIN2","FIN3","FIN4","MANU1","MANU2","MANU3","MANU4","SHIP1","SHIP2"]},
{"name":"HR1","linksto":["FIN1"]}, {"name":"HR2","linksto":["FIN2"]}, {"name":"HR3","linksto":["FIN3"]}, {"name":"HR4","linksto":["FIN4"]},
{"name":"FIN1","linksto":["SHIP1","HR2"]}, {"name":"FIN2","linksto":["SHIP2","HR1"]}, {"name":"FIN3","linksto":["SHIP1","HR4"]}, {"name":"FIN4","linksto":["SHIP2","HR3"]},
{"name":"MANU1","linksto":["SHIP1"]}, {"name":"MANU2","linksto":["SHIP1"]},...
SOURCE,TARGETMONITOR1,MONITOR2MONITOR1,HR1MONITOR1,HR2MONITOR1,HR3MONITOR1,HR4MONITOR1,FIN1MONITOR1,FIN2MONITOR1,FIN3MONITOR1,FIN4MONITOR1,MANU1
![Page 52: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/52.jpg)
IMPLEMENTATION - PL/SQL -> JSON
![Page 53: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/53.jpg)
IMPLEMENTATION - CODE TOURTension slider and Static TextJS IncludesJS Script
Setup
add a DIV, then add SVG canvasGet and parse dataRenderDynamic behavior + transition response to behavior
Based On : http://bl.ocks.org/mbostock/1044242
![Page 54: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/54.jpg)
RESULT
Mock Up
Example
![Page 55: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/55.jpg)
Where do we go from here?Browse tool offerings, check their examples & kick tires
Mock up an HTML/JS page with sample data
Work out method to generate live data
“Apexify” your page, test, and deploy
Don’t be afraid to fail. Iterate and Refine!
Interactivity - leverage animation and transformations to explore your data
![Page 57: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/57.jpg)
Project Siteshttps://developers.google.com/chart/
http://thejit.org
Nicolas Belmonte
http://d3js.org
http://AlignedLeft.com
http://JasonDavies.com
http://www.d3noob.org
http://FlowingData.com
http://EagerEyes.org
http://visual.ly
http://Visualizing.org
Viz Blogs
![Page 58: w/ Apex + Open Source Graphing Libsba6.us/content/presentations/2013-06-DavidMann... · QUALITIES OF A GOOD VISUALIZATION Recognizable + Readable = Effective 55% 20% 15% 10% 2009](https://reader034.vdocuments.mx/reader034/viewer/2022050410/5f86af468855ab5f176abbe1/html5/thumbnails/58.jpg)
Referenceshttp://groups.google.com/group/d3-jshttp://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/http://www.slideshare.net/RRomme/advanced-reporting-and-charting-with-oracle-application-express-40http://svgmagazine.com/jul2011/spotson_d3.js.htmlhttp://techslides.com/over-1000-d3-js-examples-and-demos/Viz of d3 related books: http://www.yasiv.com/amazon#/Search?q=d3&category=Books&lang=USMultiVariate Display Considerations