introduction to data science€¦ · plotly r plotly python plotly js 20 / 24 andr we saw...
TRANSCRIPT
![Page 1: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/1.jpg)
Why Interactivity?Reduce data dimension: allow user to explore large datasets by quicklyswitching between dimensions
Overview first, zoom and filter, details on demand: Provide big picture, letthe user explore details as they desire
Linked views for high dimensions: There is a limit to the number ofaesthetic mappings in a single graphic, make multiple graphics but linkdata objects between them
1 / 24
ExamplesPolitics: http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0
Movies: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html
Sports: https://projects.fivethirtyeight.com/2018-march-madness-predictions/
2 / 24
Web-based interactive visualizationTake advantage of HTML document description and the DocumentObject Model interface to bind data to page elements.
Shiny: bind data to controlsData-driven Documents (d3.js): bind data to svg elements directly
3 / 24
Basic idea is to only specify contentand structure but not specify directlyhow to render pages.
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 4 / 24
Structure is provided by pageelements. An important elementwe'll see later is the arbitrarygrouping/containment element div.
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 5 / 24
The hierarchical structure ofelements in a document are definedby the Document Object Model(DOM).
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 6 / 24
CSSCascading Style Sheets are used to style elements in the DOM.
body {
background-color: white;
color: black;
}
7 / 24
CSSIn general:
selectorA,
selectorB,
selectorC {
property1: value;
property2: value;
property3: value;
}
8 / 24
SVGScalable Vector Graphics (SVG) is special element used to creategraphics with text.
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
9 / 24
SVGElements have geometric attributes and style attributes.
<circle cx="250" cy="25" r="25"/>
cx: x-coordinate of circle centercy: y-coordinate of circle centerr: radius of circle
10 / 24
SVGElements have geometric attributes and style attributes.
<rect x="0" y="0" width="500" height="50"/>
x: x-coordinate of left-top cornery: y-coordinate of left-top cornerwidth, height: width and height of rectangle
11 / 24
SVGstyle attributes
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
can be styled by class as well
svg .pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
<circle cx="25" cy="25" r="22" class="pumpkin"> 12 / 24
Shiny and D3Shiny: construct DOM and bind data (variables for example) to elements(a slide control for example) http://shiny.rstudio.com
D3: bind data to SVG element attributes (position, size, color,transparency, etc.) http://d3js.org
13 / 24
ReactivityInteractivity and binding in Shiny achieved using reactive programming.Where objects react to changes in other objects.
14 / 24
ReactivityExample:
15 / 24
ReactivityWith intermediate objects:
16 / 24
ReactivityA standard paradigm for interactive (event-driven) applicationdevelopment
A nice review paper: http://dl.acm.org/citation.cfm?id=2501666
17 / 24
Binding data to graphical elementsWith Shiny we can bind data objects to document elements.More examples: http://shiny.rstudio.com/gallery/
We can also bind data directly to graphical elements since using SVGthese are also document elements (D3).
18 / 24
D3 TutorialSlides
19 / 24
D3 AlternativesIf you want to use a toolkit of standard charts based on d3: NVD3
An alternative declarative library: Vega
A no-hassle interactive vis library for multiple languages:
plotly Rplotly pythonplotly JS
20 / 24
D3 and RWe saw previously that D3 can access external data through jsonThat's how we can pass data from R to the Javascript browser
21 / 24
D3 and RrCharts: Most mature. Provides binding between R and a small set ofjavascript viz libraries.ggvis: Uses grammar of graphics like ggplot2, bindings to Vega todefine JS charts.htmlwidgets a formalization of how to bind R to JS libraries.Roll your own
22 / 24
D3 and jupyterIn jupyter you can use HTML and javascript directly, and use D3 andother JS libraries through that.
For more info: https://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/
23 / 24
Interactive visualizationEssential tool for exploration
Helps manage high-dimensionality of data (don't go 3D, link charts!!)
24 / 24
Introduction to Data Science:Interactive Visualization
Héctor Corrada Bravo
University of Maryland, College Park, USACMSC320: 2020-05-03
![Page 2: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/2.jpg)
Why Interactivity?Reduce data dimension: allow user to explore large datasets by quicklyswitching between dimensions
Overview first, zoom and filter, details on demand: Provide big picture, letthe user explore details as they desire
Linked views for high dimensions: There is a limit to the number ofaesthetic mappings in a single graphic, make multiple graphics but linkdata objects between them
1 / 24
![Page 3: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/3.jpg)
ExamplesPolitics: http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0
Movies: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html
Sports: https://projects.fivethirtyeight.com/2018-march-madness-predictions/
2 / 24
![Page 4: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/4.jpg)
Web-based interactive visualizationTake advantage of HTML document description and the DocumentObject Model interface to bind data to page elements.
Shiny: bind data to controlsData-driven Documents (d3.js): bind data to svg elements directly
3 / 24
![Page 5: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/5.jpg)
Basic idea is to only specify contentand structure but not specify directlyhow to render pages.
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 4 / 24
![Page 6: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/6.jpg)
Structure is provided by pageelements. An important elementwe'll see later is the arbitrarygrouping/containment element div.
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 5 / 24
![Page 7: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/7.jpg)
The hierarchical structure ofelements in a document are definedby the Document Object Model(DOM).
HTML and DOMWeb pages are structured using Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragrap
</body>
</html> 6 / 24
![Page 8: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/8.jpg)
CSSCascading Style Sheets are used to style elements in the DOM.
body {
background-color: white;
color: black;
}
7 / 24
![Page 9: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/9.jpg)
CSSIn general:
selectorA,
selectorB,
selectorC {
property1: value;
property2: value;
property3: value;
}
8 / 24
![Page 10: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/10.jpg)
SVGScalable Vector Graphics (SVG) is special element used to creategraphics with text.
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
9 / 24
![Page 11: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/11.jpg)
SVGElements have geometric attributes and style attributes.
<circle cx="250" cy="25" r="25"/>
cx: x-coordinate of circle centercy: y-coordinate of circle centerr: radius of circle
10 / 24
![Page 12: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/12.jpg)
SVGElements have geometric attributes and style attributes.
<rect x="0" y="0" width="500" height="50"/>
x: x-coordinate of left-top cornery: y-coordinate of left-top cornerwidth, height: width and height of rectangle
11 / 24
![Page 13: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/13.jpg)
SVGstyle attributes
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
can be styled by class as well
svg .pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
<circle cx="25" cy="25" r="22" class="pumpkin"> 12 / 24
![Page 14: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/14.jpg)
Shiny and D3Shiny: construct DOM and bind data (variables for example) to elements(a slide control for example) http://shiny.rstudio.com
D3: bind data to SVG element attributes (position, size, color,transparency, etc.) http://d3js.org
13 / 24
![Page 15: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/15.jpg)
ReactivityInteractivity and binding in Shiny achieved using reactive programming.Where objects react to changes in other objects.
14 / 24
![Page 16: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/16.jpg)
ReactivityExample:
15 / 24
![Page 17: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/17.jpg)
ReactivityWith intermediate objects:
16 / 24
![Page 18: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/18.jpg)
ReactivityA standard paradigm for interactive (event-driven) applicationdevelopment
A nice review paper: http://dl.acm.org/citation.cfm?id=2501666
17 / 24
![Page 19: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/19.jpg)
Binding data to graphical elementsWith Shiny we can bind data objects to document elements.More examples: http://shiny.rstudio.com/gallery/
We can also bind data directly to graphical elements since using SVGthese are also document elements (D3).
18 / 24
![Page 20: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/20.jpg)
D3 TutorialSlides
19 / 24
![Page 21: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/21.jpg)
D3 AlternativesIf you want to use a toolkit of standard charts based on d3: NVD3
An alternative declarative library: Vega
A no-hassle interactive vis library for multiple languages:
plotly Rplotly pythonplotly JS
20 / 24
![Page 22: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/22.jpg)
D3 and RWe saw previously that D3 can access external data through jsonThat's how we can pass data from R to the Javascript browser
21 / 24
![Page 23: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/23.jpg)
D3 and RrCharts: Most mature. Provides binding between R and a small set ofjavascript viz libraries.ggvis: Uses grammar of graphics like ggplot2, bindings to Vega todefine JS charts.htmlwidgets a formalization of how to bind R to JS libraries.Roll your own
22 / 24
![Page 24: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/24.jpg)
D3 and jupyterIn jupyter you can use HTML and javascript directly, and use D3 andother JS libraries through that.
For more info: https://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/
23 / 24
![Page 25: Introduction to Data Science€¦ · plotly R plotly python plotly JS 20 / 24 andR We saw previously that D3 can access external data through json That's how we can pass data from](https://reader035.vdocuments.net/reader035/viewer/2022070804/5f035fef7e708231d408e6f3/html5/thumbnails/25.jpg)
Interactive visualizationEssential tool for exploration
Helps manage high-dimensionality of data (don't go 3D, link charts!!)
24 / 24