Why Interactivity? Reactivity D3 and R D3 Alternatives D3 Tutorial HTML and DOM Reactivity Reactivity Reactivity HTML and DOM D3 and R Shiny and D3 SVG SVG SVG CSS SVG CSS HTML and DOM Binding data to graphical elements Web-based interactive visualization D3 and jupyter Interactive visualization Examples We saw previously that D3 can access external data through json Reduce data dimension : allow user to explore large datasets by quickly Politics : http://www.nytimes.com/interactive/2012/11/02/us/politics/paths- style attributes With intermediate objects: Interactivity and binding in Shiny achieved using reactive programming . Shiny: construct DOM and bind data (variables for example) to elements In general: Web pages are structured using Hypertext Markup Language Web pages are structured using Hypertext Markup Language Essential tool for exploration Elements have geometric attributes and style attributes. Elements have geometric attributes and style attributes. Cascading Style Sheets are used to style elements in the DOM. Scalable Vector Graphics (SVG) is special element used to create A standard paradigm for interactive (event-driven) application Example: Take advantage of HTML document description and the Document Slides With Shiny we can bind data objects to document elements. In jupyter you can use HTML and javascript directly, and use D3 and Web pages are structured using Hypertext Markup Language If you want to use a toolkit of standard charts based on d3: NVD3 rCharts: Most mature. Provides binding between R and a small set of Introduction to Data Science: graphics with text. More examples: http://shiny.rstudio.com/gallery/ to-the-white-house.html?_r=0 development switching between dimensions Object Model interface to bind data to page elements. (a slide control for example) http://shiny.rstudio.com other JS libraries through that. Where objects react to changes in other objects. javascript viz libraries. That's how we can pass data from R to the Javascript browser Helps manage high-dimensionality of data (don't go 3D, link charts!!) An alternative declarative library: Vega Interactive Visualization <circle cx="250" cy="25" r="25"/> body { <rect x="0" y="0" width="500" height="50"/> selectorA, <circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/> ggvis: Uses grammar of graphics like ggplot2, bindings to Vega to <!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html> The hierarchical structure of Basic idea is to only specify content Structure is provided by page Movies : http://www.nytimes.com/interactive/2013/02/20/movies/among- Overview first, zoom and filter, details on demand : Provide big picture, let A nice review paper: http://dl.acm.org/citation.cfm?id=2501666 D3: bind data to SVG element attributes (position, size, color, We can also bind data directly to graphical elements since using SVG For more info: https://blog.thedataincubator.com/2015/08/embedding-d3- Shiny: bind data to controls <svg width="50" height="50"> selectorB, background-color: white; < html > < html > < html > define JS charts. x : x-coordinate of left-top corner cx : x-coordinate of circle center elements. An important element can be styled by class as well and structure but not specify directly elements in a document are defined A no-hassle interactive vis library for multiple languages: the-oscar-contenders-a-host-of-connections.html these are also document elements (D3). the user explore details as they desire transparency, etc.) http://d3js.org in-an-ipython-notebook/ Data-driven Documents (d3.js): bind data to svg elements directly <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/> color: black; selectorC { htmlwidgets a formalization of how to bind R to JS libraries. Héctor Corrada Bravo < head > < head > < head > cy : y-coordinate of circle center y : y-coordinate of left-top corner how to render pages. we'll see later is the arbitrary by the Document Object Model </svg> property1: value; } Roll your own plotly R < title >Page Title</ title > < title >Page Title</ title > < title >Page Title</ title > svg .pumpkin { grouping/containment element div . width , height : width and height of rectangle r : radius of circle Linked views for high dimensions : There is a limit to the number of Sports : https://projects.fivethirtyeight.com/2018-march-madness- (DOM). property2: value; University of Maryland, College Park, USA plotly python </ head > </ head > </ head > fill: yellow; aesthetic mappings in a single graphic, make multiple graphics but link predictions/ property3: value; CMSC320: 2020-05-03 < body > < body > < body > plotly JS stroke: orange; data objects between them } < h1 >Page Title</ h1 > < h1 >Page Title</ h1 > < h1 >Page Title</ h1 > stroke-width: 5; < p >This is a really interesting paragrap < p >This is a really interesting paragrap < p >This is a really interesting paragrap } </ body > </ body > </ body > 16 / 24 19 / 24 15 / 24 24 / 24 23 / 24 10 / 24 18 / 24 22 / 24 12 / 24 14 / 24 17 / 24 20 / 24 21 / 24 13 / 24 11 / 24 6 / 24 8 / 24 7 / 24 9 / 24 3 / 24 4 / 24 1 / 24 2 / 24 5 / 24 <circle cx="25" cy="25" r="22" class="pumpkin"> </ html > </ html > </ html >
Why Interactivity? Reduce data dimension : allow user to explore large datasets by quickly switching between dimensions Overview first, zoom and filter, details on demand : Provide big picture, let the user explore details as they desire Linked views for high dimensions : There is a limit to the number of aesthetic mappings in a single graphic, make multiple graphics but link data objects between them 1 / 24
Examples Politics : 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 visualization Take advantage of HTML document description and the Document Object Model interface to bind data to page elements. Shiny: bind data to controls Data-driven Documents (d3.js): bind data to svg elements directly 3 / 24
HTML and DOM Web pages are structured using Hypertext Markup Language <!DOCTYPE html> Basic idea is to only specify content < html > and structure but not specify directly < head > how to render pages. < title >Page Title</ title > </ head > < body > < h1 >Page Title</ h1 > < p >This is a really interesting paragrap </ body > 4 / 24 </ html >
HTML and DOM Web pages are structured using Hypertext Markup Language <!DOCTYPE html> Structure is provided by page < html > elements. An important element < head > we'll see later is the arbitrary < title >Page Title</ title > grouping/containment element div . </ head > < body > < h1 >Page Title</ h1 > < p >This is a really interesting paragrap </ body > 5 / 24 </ html >
HTML and DOM Web pages are structured using Hypertext Markup Language <!DOCTYPE html> The hierarchical structure of < html > elements in a document are defined < head > by the Document Object Model < title >Page Title</ title > (DOM). </ head > < body > < h1 >Page Title</ h1 > < p >This is a really interesting paragrap </ body > 6 / 24 </ html >
CSS Cascading Style Sheets are used to style elements in the DOM. body { background-color: white; color: black; } 7 / 24
CSS In general: selectorA, selectorB, selectorC { property1: value; property2: value; property3: value; } 8 / 24
SVG Scalable Vector Graphics (SVG) is special element used to create graphics with text. <svg width="50" height="50"> <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/> </svg> 9 / 24
SVG Elements have geometric attributes and style attributes. <circle cx="250" cy="25" r="25"/> cx : x-coordinate of circle center cy : y-coordinate of circle center r : radius of circle 10 / 24
SVG Elements have geometric attributes and style attributes. <rect x="0" y="0" width="500" height="50"/> x : x-coordinate of left-top corner y : y-coordinate of left-top corner width , height : width and height of rectangle 11 / 24
SVG style 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; } 12 / 24 <circle cx="25" cy="25" r="22" class="pumpkin">
Recommend
More recommend
