PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT
Transcript of PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT
![Page 1: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/1.jpg)
1
PRACTICAL DATA* VISUALIZATION WITHJAVASCRIPT
WHEN, *WHAT, AND HOW
[email protected] Program Management @ the Harvard Library
Ceilyn Boyd
![Page 2: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/2.jpg)
2
ORIGINAL PRÉCISThis talk introduces a methodology intended to help you
decide:
When to use JavaScript to visualize your data (and when tochoose alternate means)What data, or aspects of your data to render visually, andHow best to use the tools at your disposal to visualize yourdata
![Page 3: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/3.jpg)
3
WHYBackground and Motivation
![Page 4: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/4.jpg)
4
SURVEYING THE LANDSCAPE
Image source.
Demand for, and popularity of data analysis, data mining,data-driven visualization has led to ...
![Page 6: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/6.jpg)
6
SO MANY OPTIONSProliferation of technologies, languages, platforms,applications, and tools with overlapping functionality
- - - - - - - - - -
- - -
Proliferation of graphics and visualization libraries & APIs - - - -
- - , - -
Excel (PowerPivot, Pivot Charts) Google Sheets/ChartsJupyter MATLABOctave OpenRe ne Plot.ly R SAS Stata Tableau
JavaScript Python RubyWebGL SVG
Bokeh Chart.js D3.js Dygraphs.js Google Charts APIjqPlot.js Processing.org Processing.js VisPy Vis.js
![Page 7: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/7.jpg)
7
SO MUCH DATALibrary-related data:
- - Harvard Libraryoperational data - -Program/project assessment data & results
Library-related APIs: - - -
Research data & APIs: - - -
-
ARL data Google AnalyticsHarvard Library Open Metadata
Dataverse API DPLA API HathiTrust WorldCat APILibrary Cloud
Census.gov Factiva API New York Times APIsSEC.gov Twitter API
![Page 8: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/8.jpg)
8
MANY QUESTIONS & CONSIDERATIONSWhen does visualization work best for libraries and librarydata?Data
How to model, structure, and manipulate data forvisualizationHow to work with data from different sourcesHow to decide when to use which visualization basedupon data
What makes a successful visualization?Concerns about knowledge, skills, and access totechnology and training
![Page 9: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/9.jpg)
9
WE HAVE DATA. WE WANT TO ANALYZE &VISUALIZE IT...WHAT NEXT?
Image source.
![Page 10: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/10.jpg)
10
PRÉCIS REDUX & REWRITTENThis talk will focus on a methodology intended to help you:
Choose amongst potential tools (including JavaScript) tovisualize your data
It will use three Library-related examples to:
Demonstrate the methodology in action, andDemonstrate how to use JavaScript for visualizationwork ows
![Page 11: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/11.jpg)
11
AUDIENCEPeople who:
Want to add interactive visualizations to their Webdocuments (to create Data-Driven Web Documents)Are new or relatively new to programming but who arefamiliar with HTML, CSS, and some JavaScriptFor whom programming is not a frequent part of their dailyworkHave experience with programming but who do not usuallywork with data, graphics, or visualizationNeed to decide how best to create sustainablevisualizations
![Page 12: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/12.jpg)
12
DATA VISUALIZATION WORKFLOWMETHODOLOGY & FRAMEWORK
Image source.
![Page 13: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/13.jpg)
13
Goal: Reporting, Storytelling
DATA VISUALIZATION WORKFLOW
![Page 14: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/14.jpg)
14
DATA VISUALIZATION WORKFLOWCOMPONENTS
![Page 15: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/15.jpg)
15
WORKFLOW COMPONENTSDATA SOURCE
A component that provides data to the work ow. It could bea repository for any kind of data, such as a database, a le, an
API, a program; or it could be a function. Multiple datasources might be used in a visualization work ow.
![Page 16: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/16.jpg)
16
WORKFLOW COMPONENTSDATA TRANSFORMER
A component that performs some kind of data processing,such as a lter or a le format converter. Multiple data
transformers may be needed in a work ow to prepare datafor visualizers.
![Page 17: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/17.jpg)
17
WORKFLOW COMPONENTSDATA VISUALIZER
A component that presents a graphical representation ofinformation or data that is suitable for display on a device(e.g. via a Web browser or app), in a document, or in print.
![Page 18: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/18.jpg)
18
DATA EXPLORATION WORKFLOW
![Page 19: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/19.jpg)
19
APPLICABLE TO USE-CASES, SYSTEMS, TOOLS, &LIBRARIES
![Page 20: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/20.jpg)
20
COMPARE DATA ANALYSIS & VISUALIZATIONOPTIONS
(See handout)
![Page 21: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/21.jpg)
21
WORKFLOW CONSIDERATIONSWHAT TO CONSIDER WHEN BUILDING A VISUALIZATION
![Page 22: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/22.jpg)
22
IMPLEMENTATION CONSIDERATIONS ARE...Related to an individual work ow componentRelated to implementation of a work ow segmentRelated to the entire work ow
![Page 23: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/23.jpg)
23
IMPLEMENTATION CONSIDERATION CATEGORIESINCLUDE...Legal & EthicalTechnicalUsabilitySustainabilityAesthetic
![Page 24: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/24.jpg)
24
COMPONENT CONSIDERATIONSComponent considerations involve:
DataComponent inputs & outputsRepresentation of the data within the componentPresentation of the data
![Page 25: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/25.jpg)
25
SEGMENT & FULL WORKFLOW CONSIDERATIONSSegment/Work ow considerations involve:
Resources: e.g. Skills & knowledgeLicenses & agreemenets affecting use, sharing,presentation of resultsTechnical: e.g. compute capacity, bandwidth, security,scalabilitySustainability, reuse, automation,preservation/reproduction of results
![Page 26: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/26.jpg)
26
SUMMARY OF COMPONENT & WORKFLOWCONSIDERATIONS
(See handout)
![Page 27: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/27.jpg)
27
EVALUATING VISUALIZATIONSTOWARDS A STRATEGY
Network Graph 'Hair Ball', Source.
![Page 28: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/28.jpg)
28
VISUALIZATION EVALUATION CRITERIA1. Data overview
The capacity of a visualizer to provide a global view of allsigni cant data elements simultaneously
2. Data navigationThe ease with which a user can use the visualizer tolocate/engage with a speci c data element
3. Expressive powerThe capacity of a visualizer to communicate the fullrange of relationships within the dataset
4. AestheticsThe visual utility and intuitive value associated with thevisualizer
Source: , Boyd & Wade, 2012.Visualizing Back-of-Book Indexes
![Page 29: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/29.jpg)
29
IMPLEMENTING VISUALIZATION WORKFLOWSWITH JAVASCRIPT
![Page 30: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/30.jpg)
30
BENEFITS OF JAVASCRIPTEstablished Web technology
Ubiquitous browser supportEasy integration with UI elements for buildingapplications (e.g. jQuery)Variety of frameworks for building applicationsMany visualization and data manipulation libraries
Standalone console & server-side support via Node.jsMany data manipulation librariesMany APIs/libraries for connecting to data sources (e.g.MySQL, MS-Access, Library Cloud, Dataverse)
![Page 31: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/31.jpg)
31
BENEFITS OF JAVASCRIPT (CON'T)One language for data acquisition, analysis, visualization,application development, and document deliveryEnd-to-end visualization work ow supportNatural t for Data-Driven DocumentsUseful for prototyping and productionNo licensing fees
![Page 32: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/32.jpg)
32
SUMMARY OF JAVASCRIPT CONSIDERATIONS
(See handout)
![Page 33: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/33.jpg)
33
EXAMPLESJAVASCRIPT FOR DATA-DRIVEN DOCUMENTS
![Page 34: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/34.jpg)
34
THREE HARVARD LIBRARY-RELATED EXAMPLES1. Selected Datasets for the Towards a Collections & Content
Development Strategic Plan Project (TCCDS) (HTML & CSS, with JavaScript & Node.js)
2. Selected Datasets for the Colonial North American Project (HTML & CSS, with JavaScript & Node.js)
3. OASIS Timeline Viewer Application (Data exploration: Browser only)
![Page 35: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/35.jpg)
35
TOWARDS A COLLECTIONS & CONTENTDEVELOPMENT STRATEGIC PLAN DATASETS
DEMO
![Page 36: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/36.jpg)
36
TCCDS WORKFLOW & CONSIDERATIONSWork ow
Considerations
![Page 37: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/37.jpg)
37
COLONIAL NORTH AMERICAN DATASETSDEMO
![Page 38: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/38.jpg)
CNA WORKFLOW & CONSIDERATIONSWork ow
Considerations
![Page 39: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/39.jpg)
3839
OASIS TIMELINE VIEWERDEMO
![Page 40: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/40.jpg)
OASIS VIEWER WORKFLOW & CONSIDERATIONSWork ow
Considerations
![Page 41: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/41.jpg)
4041
DATA-DRIVEN DOCUMENT TEMPLATE/** * Create the drivers bubble chart of number of mentions * * @param String String containing JSON/TSV data * @return Void */ function createVisualizationFunction(dataString) // parse the string and create JSON objects var data = JSON.parse(dataString); // // process the data to get it into the proper // format for the target visualizer // var processedData = processData(data); // create the visualizer, initialized with processedData, adding it to a DOM element var visualizer = createVisualizerUsingLibraryFunction('visualization'
![Page 42: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/42.jpg)
42
QUESTIONS?
![Page 43: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/43.jpg)
43
THE ENDThanks to Bobbi, Reinhart, and Gloria for the invitation, and...
Thanks to you all for participating!
![Page 44: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/44.jpg)
44
RESOURCES
![Page 45: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/45.jpg)
45
WEB AND JAVASCRIPT RESOURCESGeneral
. Includes online references for HTML, CSS, JavaScript(client-side), Web APIs, Graphics (SVG, WebGL),MathML
JavaScript
. John Resig, BearBibeault
. David Flanagan. Bibeault, Katz
Mozilla Web technology for developers
Mozilla JavaScript Language ReferenceJavaScript Design PatternsSecrets of the JavaScript Ninja
JavaScript: the De nitive GuidejQuery in Action
![Page 46: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/46.jpg)
46
VISUALIZATION RESOURCESVisualize This: the FlowingData Guide to Design,Visualization, and Statistics. Nathan YauDuke Library’s Introduction to Visualization LibGuideSunlight Foundation’s Visualization Style GuideData Visualization Catalogue
![Page 47: PRACTICAL DATA* VISUALIZATION WITH JAVASCRIPT](https://reader030.fdocuments.us/reader030/viewer/2022012418/61735057b065b928a712f4e0/html5/thumbnails/47.jpg)
47
NODE.JS RESOURCESAbout Node.js
Open-source, cross-platform JavaScript runtimeenvironment for developing server-side WebapplicationsUses , implemented in C++Runs on: Windows XP and later, Mac OS X 10.5+, LinuxServer-side, Event-driven, Asynchronous, Many modulesavailable
Node.js @ Lynda.com
Jim Wilson Cantelon, Harter, Holowaychuk, Rajlich
Chrome V8 JavaScript engine
Node.js home page and docsFelix's Node Guide
Node Beginner BookNode.js the Right Way.Node.js in Action.