BuildingEffectiveVisualizationToolsforEverydayBusiness:WebVisualizationFramework

1

CyberinfrastructureforNetworkScienceCenterDepartmentofIntelligentSystemsEngineeringSchoolofInformatics,Computing,andEngineeringIndianaUniversity,Bloomington,USA

October18,2017

OlgaScrivnerwithcontributionsbyAdamSimpson,GagandeepSingh,JiviteshPoojary,SaraBouchard,andKatyBörner

2

Ourmissionistoadvancedatasets,tools,andservicesforthestudyofbiomedical,socialandbehavioralscience,physics,andothernetworks.Aspecificfocusisresearchonthestructureandevolutionofscienceandtechnology(S&T)andthecommunicationof

resultsviastaticandinteractivemapsofscience.Learnmoreatcishell.org.

CNSToolsandServicesareusedbyhundredsofthousandsaroundtheglobe.

VisualAnalytics

3

44

TransformingDataintoInsight

Data-DrivenDecisionMaking(credits:PwC)

“Informationisthecurrencyofthisdigitalage”

CarlyFiorina,FormerCEOofHP

55

AResearchAgendafortheAnalyticsAge

Figure1.ATaxonomyofDisciplines(Mortensonetal.,2015andEvans,2012)

66

DresnerAdvisoryReport(2016):EmbeddedBusinessIntelligenceMarketStudy

Figure2.TechnologiesandInitiativesStrategictoBusinessIntelligence

77

Dashboards

What'shappening?What'shappened?What'sgoingtohappen?Checkthedashboard!(Markus,2006)

88

DataVisualization

The goal is to turn data intoinformation, and informationinto insight.(CarlyFiorina,2004)

The purpose of visualizationis insight, not pictures.(BenShneiderman,1999)

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)

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.

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/

12

GeneralArchitecture

ImageCredits:http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/

WebVisualizationFramework:Shiny

13

14

ShinyApplication

1. Primarylanguage:R2. ShinyisanRpackage

open-sourcedbyRstudioin2012

3. HTML,CSS,JavaScript,D3- optional

4. ShinydashboardsarecomparabletoBusinessIntelligence(BI)tools,suchasTableau,Spotfire,Qlikview

15

ShinyApplication:GetInspired

ShinyGallery

CNSShinyFramework:Examples

16

Visualization:Sankey

20Figure3.IUInformationVisualizationMassiveOpenOnlineCourse(IVMOOC)from2013– 2015

Visualization:Streamgraph

21Figure4.InteractiveStreamgraphVisualization

InteractiveTextMiningSuite

22www.interactivetextminingsuite.com

Figure5.OpenSourceInteractiveTextMiningSuite- ITMS

WebVisualizationFramework:WVF

20

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)

CNSWVFFramework:Examples

22

23

Visualization:TwitterNetworkProject:IAI

Figure6.SocialNetworkfromCTSAHubandNIHActivitiesonTwitter

24

Visualization:UCSDMapofScienceProject:ECONdemo.cns.iu.edu/client/econ-ucsdmap

Figure7.InteractiveMapforHigh-ImpactandTransformativeScienceMetrics

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

Visualization:Sankey

29

Project:STEMdemo.cns.iu.edu/webvis/stem

Figure9.STEMPathwaysVisualization

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

2018IVMOOC

28

Thiscourseprovidesanoverviewaboutthestateoftheartininformationvisualization.Itteachestheprocessofproducingeffectivevisualizationsthattaketheneedsofusersintoaccount.

Registerforfree:ivmooc.cns.iu.edu.ClassstartedJan9,2018.

29

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

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

Thankyou!

32

@obscrivn @cnscenter

PRESENTEDBY:

OlgaScrivnerCall (812) 349-8853or email obscrivn@indiana.edu

IndianaUniversity- Bloomington1320E.10th St.,WellsLibraryBloomington,IN47405USA