A Quick (but detailed) Overview of D3 Han-Wei Shen Professor, Department of Computer Science and Engineering The Ohio State University
Data Visualization Visualization: • To form a mental image • of; To make visible. • Example: NYC subway • map It provides external aids • to increased our memory, thought, and reasoning
Data Visualization • https://www.youtube.com/watch?v=jbkSRLYSojo
Hans Rosling • https://www.youtube.com/watch?v=jbkSRLYSojo • https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you _ve_ever_seen • https://www.youtube.com/watch?v=FACK2knC08E
D3.js • A JavaScript library • Support visualizing data with the aid of HTML, SVG, and CSS
Technology Foundations • Web technologies • HTML • CSS • SVG • Javascript
HTML - H yper T ext M arkup L anguage • HTML is the standard markup language for creating Web pages • HTML describes the structure of Web pages using markup • HTML elements • HTML elements are the building blocks of HTML pages • represented by tags • Tags • HTML tags label pieces of content such as • <head> tag for “heading” • <p> for “paragraph” • <table> for “table” and so on • Browsers do not display the HTML tags, but use them to render the content of the page
HTML - Codes and the Result http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/HTML%20-%20Basics.html
HTML - DOM • When a web page is loaded, the browser creates a Document Object Model of the page • The HTML DOM model is constructed as a tree of Objects
HTML - DOM Document Root element: <html> Element: Element: <head> <body> Element: Element: Element: Element: <p> Element: <p> <title> <h1> <img> "to create Text: "HTML Text: "HTML Element "is designed Element: "by adding Element Element: Attribute: Attribute: HTML Tutorial" Basics" <strong> for" <em> tags such as" <code> <strong> "src" "style" elements. " "marking up “Example "HTML" "<p>" text" image”
HTML - DOM http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/HTML - DOM.html • With the object model, JavaScript can create dynamic HTML by manipulating the objects: • JavaScript can change all the HTML elements in the page • Change all the HTML attributes in the page • Change all the CSS styles • Remove existing HTML elements and attributes • Add new HTML elements and attributes • React to all existing HTML events in the page • Create new HTML events in the page
CSS - C ascading S tyle S heets • CSS describes how HTML elements are to be displayed on screen • CSS saves a lot of work • It can control the appearance of multiple elements and web pages all at once
SVG - S calable V ector G raphics • SVG defines vector-based graphics for the Web • svg HTML tag • <svg width=“500” height=“50”> </svg> • Create a SVG canvas with 500px width and 50px height • svg coordinates system width: 500px x height: 50px y
SVG - Shapes x y
SVG - Shapes + CSS http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/SVG - Basic Shapes.html
SVG - PATH • M x y – Move to (x,y) • m dx dy – Move by (dx,dy) • L x y – Line to (x,y) • l dx dy • H x, V y – draw horizontal and vertical lines • h dx, v dy • Z, z close path • Curve commands (Bezier Curves and Arcs) • https://developer.mozilla.org/en- US/docs/Web/SVG/Tutorial/Paths?redirectlocale=en- US&redirectslug=SVG%2FTutorial%2FPaths#Curve_commands
SVG - PATH http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/SVG - Path.html (500, 300) 3: l 100 -200 4: Z 1: M 100 500 (100, 500) (400, 500) 2: H 400 (600, 600) 9: Z (800, 600) 5: m 500 100 8: l 0 -200 6: l 0 200 (800, 800) 7: L 800 800 (600, 800)
SVG - Transform • translate( dx, dy ) • move a shape by ( dx, dy )
SVG - Transform • rotate( a, x, y ) • rotate a shape by a degrees about a given point ( x, y )
SVG - Transform • scale( x, y ) • scales both the shape’s size and its coordinates (60, 20) (60*2=120, 20*3=60)
SVG - Transform • Multiple functions Transform in the reverse order, i.e. the order of rotate, translate, and scale
SVG - Group + Transform • Group multiple shapes • <g> tag
JavaScript - Manipulating DOM • As mentioned, with the HTML DOM, JavaScript can access and change all the elements of an HTML document. • But, the JavaScript APIs for DOM are complex • Link of JavaScript DOM methods • https://www.w3schools.com/js/js_htmldom.asp • We will learn how to use D3.js to manipulate DOM in a simple way
D3 Tutorial D3 Manipulation of DOM
Selections - d3 .select( selector ) http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-DOM/D3 - Selections.html • d3 .select( selector ) • selects only the first element that matches the specified selector string
Selections - d3 .selectAll( selector ) • d3 .selectAll( selector ) • selects all elements that matches the specified selector string
Selections - Selectors • .select( selector ) or .selectAll( selector ) • D3 uses CSS Selectors • Selectors • “TagName” • Select web objects with the specified tag name • < TagName > </ TagName > • E.g., select(”circle”) is to select web objects of “<circle> </circle>” • “ # idName” • Select web objects with the specified id name • < AnyTag id =" idName "> </ AnyTag > • E.g., select(”#5thBook”) is to select web objects of “<AnyTag id=“5thBook”></AnyTag>”
Selections - Selectors • Selectors • “ . className” • Select web objects with the specified class name • < AnyTag class =" className "> </ AnyTag > • E.g., select(”.Book”) is to select web objects of “<AnyTag class=“Book”></AnyTag>” • “ [ AttributeName = ‘Value’ ] ” • Select web objects with the attribute value • < AnyTag AttributeName =” Value "> </ AnyTag > • E.g., select(”[width=‘500’]”) is to select web objects of “<AnyTag width=“500”></AnyTag>” • More information of CSS Selectors • https://www.w3schools.com/cssref/css_selectors.asp • https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
Selections - selection .select( selector ) • selection .select( selector ) • For each selected element, selects the first descendant element that matches the specified selector string
Selections - selection .selectAll( selector ) • selection .selectAll( selector ) • For each selected element, selects all the descendant elements that match the specified selector string
Selections - selection .style( StyleName, value ) • Set the CSS style property to the specified value on the selected elements
Selections - selection .attr( AttrName, value ) • Set the attribute to the specified value on the selected elements Attributes “r” means radius
D3 Tutorial Data Binding and Loading
D3 - Da Data -Driven Documents • D3 can map data to HTML/SVG elements • We can construct the DOM from Data • Each data value has a corresponding HTML/SVG element (graphical marks) • D3 helps you maintain this mapping!
Data Binding - A simple example http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - A simple exmaple.html • What we have • three bars scattering on the screen • three data values: 20, 40, and 60 • Goal: we want to encode data values into the widths of bars Data values: 20, 40, and 60 ?
Data Binding - A simple example Data values: 20, 40, and 60 • Design • Uniform height of bars 20px • 20 pixels • Uniform padding between bars Uniform height: 20px 40px • 10 pixels • Varying width of bars • Proportional to the data values Uniform padding: 10px 60px
Data Binding - A simple example • Initialize variables • First, we create variables to store basic information.
Data Binding - A simple example • selection .data( dataArray ) • Bind the specified array of data with the selected elements • Select all the three rect tags and bind data with them.
x Data Binding - A simple example y • Set the start point (x, y) of each bar. • x is always 0 • Pass a function(d, i) to modify y values • The variable d represents each data value; • i represents the index of each data value and starts from 0.
Data Binding - A simple example • Set the width and height of each bar • The width of each bar is proportional to the corresponding data value. • The height of each bar is fixed.
Data Binding - If we don’t have bars initially http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - No bars initially.html • We just have three data values: 20, 40, and 60 • No bars are on the screen initially • Goal • We want to create three bars and encode data values into the widths of bars Data values: 20, 40, and 60 ? Empty Screen
Recommend
More recommend
