Page 1
BuildingEffectiveVisualizationToolsforEverydayBusiness:WebVisualizationFramework
1
CyberinfrastructureforNetworkScienceCenterDepartmentofIntelligentSystemsEngineeringSchoolofInformatics,Computing,andEngineeringIndianaUniversity,Bloomington,USA
October18,2017
OlgaScrivnerwithcontributionsbyAdamSimpson,GagandeepSingh,JiviteshPoojary,SaraBouchard,andKatyBörner
Page 2
2
Ourmissionistoadvancedatasets,tools,andservicesforthestudyofbiomedical,socialandbehavioralscience,physics,andothernetworks.Aspecificfocusisresearchonthestructureandevolutionofscienceandtechnology(S&T)andthecommunicationof
resultsviastaticandinteractivemapsofscience.Learnmoreatcishell.org.
CNSToolsandServicesareusedbyhundredsofthousandsaroundtheglobe.
Page 4
44
TransformingDataintoInsight
Data-DrivenDecisionMaking(credits:PwC)
“Informationisthecurrencyofthisdigitalage”
CarlyFiorina,FormerCEOofHP
Page 5
55
AResearchAgendafortheAnalyticsAge
Figure1.ATaxonomyofDisciplines(Mortensonetal.,2015andEvans,2012)
Page 6
66
DresnerAdvisoryReport(2016):EmbeddedBusinessIntelligenceMarketStudy
Figure2.TechnologiesandInitiativesStrategictoBusinessIntelligence
Page 7
77
Dashboards
What'shappening?What'shappened?What'sgoingtohappen?Checkthedashboard!(Markus,2006)
Page 8
88
DataVisualization
The goal is to turn data intoinformation, and informationinto insight.(CarlyFiorina,2004)
The purpose of visualizationis insight, not pictures.(BenShneiderman,1999)
Page 9
9
WebApplicationversusSoftwareVisualization
1. Interactivedisplayandmanipulationofdata
2. Noinstallationrequired
3. Easytodevelopandsharewithclientsandprojectteams
4. Opensourcelibraries
The impact of data scientists' work depends on how wellothers can understand their insights to take further actions.(Jorge Castañón, 2016)
Page 10
10
Past:ImperativeWebFrameworks
The controller is essential and explicit: you have tospecify what to do when you receive user requests andwhat resources you are going to mobilize to carry outthe necessary tasks outlined in the model.
(Ribeiro 2016)
TheModel-View-ControllerwasinventedatXeroxParcbyTrygveReenskaugin1979.
Page 11
11
Present:ReactiveWebFrameworks
Reactive Systems are highly responsive, givingusers effective interactive feedback.
ReactiveManifesto- http://www.reactivemanifesto.org/Imagecredit:http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/
Page 12
12
GeneralArchitecture
ImageCredits:http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/
Page 13
WebVisualizationFramework:Shiny
13
Page 14
14
ShinyApplication
1. Primarylanguage:R2. ShinyisanRpackage
open-sourcedbyRstudioin2012
3. HTML,CSS,JavaScript,D3- optional
4. ShinydashboardsarecomparabletoBusinessIntelligence(BI)tools,suchasTableau,Spotfire,Qlikview
Page 15
15
ShinyApplication:GetInspired
ShinyGallery
Page 16
CNSShinyFramework:Examples
16
Page 17
Visualization:Sankey
20Figure3.IUInformationVisualizationMassiveOpenOnlineCourse(IVMOOC)from2013– 2015
Page 18
Visualization:Streamgraph
21Figure4.InteractiveStreamgraphVisualization
Page 19
InteractiveTextMiningSuite
22www.interactivetextminingsuite.com
Figure5.OpenSourceInteractiveTextMiningSuite- ITMS
Page 20
WebVisualizationFramework:WVF
20
Page 21
21
WVFSystemArchitecture
1. DevelopedbyCNSteam2. Primarylanguage:
JavaScript3. Buildsystem:Grunt,
NodeJS4. Libraries:Grunt,
AngularJS,D3,jQuery,HTML,CSS
5. Configuration-basedcustomization
FrameworkWorkspace- DefaultcodeandlibrariesPluginsWorkspace- D3visualizationcodeProjectWorkspace- Projectspecificcode(data,customization,styling,andinstancedscripts)
Page 22
CNSWVFFramework:Examples
22
Page 23
23
Visualization:TwitterNetworkProject:IAI
Figure6.SocialNetworkfromCTSAHubandNIHActivitiesonTwitter
Page 24
24
Visualization:UCSDMapofScienceProject:ECONdemo.cns.iu.edu/client/econ-ucsdmap
Figure7.InteractiveMapforHigh-ImpactandTransformativeScienceMetrics
Page 25
Visualization:Heatmap
28
Project:HSDdemo.cns.iu.edu/client/hsd/static/heatmap_group.html
Thisvisualizationshowshowwhitebloodcell(WBC)laboratorytestscorrelatewiththree-yearsurvivalrates.TheHSDdimensionofthedata(rows)isthetimeofthedayofthetest;andthree-yearsurvivalrate(numbersandcolorsintheboxes)isanoutcomevariable.
AggregationlevelfortheHSDtimeofdayareshown—three8hourblocks.ThelowestsurvivalratesareforpatientswithalowWBCvalueinthemorning(specificallyat6am).
Figure8.PatientSurvivalbyWhiteBloodCellCountandTimeofDay
Page 26
Visualization:Sankey
29
Project:STEMdemo.cns.iu.edu/webvis/stem
Figure9.STEMPathwaysVisualization
Page 27
27
Visualization:Outlook
1. Morerobustworkflow2. Public-facingcodeanddocumentation3. Morevisualizationlibrarysupport4. Bettercross-visualizationintegration5. Morevisualizationplugins
Allpapers,maps,tools,talks,pressarelinkedfromhttp://cns.iu.edu
Theseslidesareathttp://cns.iu.edu/presentations.html
CNSFacebook:http://www.facebook.com/cnscenter
Visualizations:http://cns.iu.edu/visualizations.html
Tools:http://cns.iu.edu/data_tools.html
Page 28
2018IVMOOC
28
Thiscourseprovidesanoverviewaboutthestateoftheartininformationvisualization.Itteachestheprocessofproducingeffectivevisualizationsthattaketheneedsofusersintoaccount.
Registerforfree:ivmooc.cns.iu.edu.ClassstartedJan9,2018.
Page 30
ReferencesBörner,Katy,Chen,Chaomei,andBoyack,Kevin.(2003).VisualizingKnowledgeDomains. InBlaise Cronin(Ed.),ARIST,Medford,NJ:InformationToday,Volume37,Chapter5,pp.179-255.http://ivl.slis.indiana.edu/km/pub/2003-borner-arist.pdf
Shiffrin,RichardM.andBörner,Katy(Eds.)(2004).MappingKnowledgeDomains.ProceedingsoftheNationalAcademyofSciencesoftheUnitedStatesofAmerica,101(Suppl_1).http://www.pnas.org/content/vol101/suppl_1
Börner,Katy(2010)AtlasofScience:VisualizingWhatWeKnow.TheMITPress.http://scimaps.org/atlas
Scharnhorst,Andrea,Börner,Katy,vandenBesselaar,Peter(2012)ModelsofScienceDynamics.SpringerVerlag.
KatyBörner,MichaelConlon,JonCorson-Rikert,Cornell,YingDing(2012)VIVO:ASemanticApproachtoScholarlyNetworkingandDiscovery.Morgan&Claypool.
KatyBörner andDavidEPolley (2014)VisualInsights:APracticalGuidetoMakingSenseofData.TheMITPress.
Börner,Katy(2015)AtlasofKnowledge:AnyoneCanMap.TheMITPress.http://scimaps.org/atlas2 30
Page 31
ReferencesJorgeCastañón.2016.Shiny:aDataScientist’sBestFriend.http://datascience.ibm.com/blog/shiny-a-data-scientist-best-friend/CarlyFiorina.2004.Information:thecurrencyofthedigitalage.http://www.hp.com/hpinfo/execteam/speeches/fiorina/04openworld.htmlMichaelJ.Mortenson,NeilF.Doherty,StewartRobinson.(2015).OperationalresearchfromTaylorismtoTerabytes:Aresearchagendafortheanalyticsage.EuropeanJournalofOperationalResearch,241,3,583-595.AaronMarcus.(2006).Dashboardsinyourfuture.Interactions13,1(January2006),48-60.BradleyNice.(2012).Front-EndvsBack-EndvsFullStackDevelopment.March2012.https://medium.com/level-up-web/front-end-vs-back-end-vs-full-stack-development-78267f545121DresnerAdvisoryReport.(2016).EmbeddedBusinessIntelligenceMarketStudy.http://www.marketwired.com/press-release/dresner-advisory-services-publishes-2016-embedded-business-intelligence-market-study-2174046.htmJava- https://www.planet-source-code.com/vb/default.asp?lngWId=14Python- https://realpython.com/learn/python-first-steps/
31
Page 32
Thankyou!
32
@obscrivn @cnscenter
Page 33
PRESENTEDBY:
OlgaScrivnerCall (812) 349-8853or email [email protected]
IndianaUniversity- Bloomington1320E.10th St.,WellsLibraryBloomington,IN47405USA