A Quick (but detailed) Overview of D3 Han-Wei Shen Professor, - - PowerPoint PPT Presentation

▶
a quick but detailed overview of d3
SMART_READER_LITE
LIVE PREVIEW

A Quick (but detailed) Overview of D3 Han-Wei Shen Professor, - - PowerPoint PPT Presentation

Jun 04, 2023 426 likes •1.08k views

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:

slide-1
SLIDE 1

A Quick (but detailed) Overview of D3

Han-Wei Shen Professor, Department of Computer Science and Engineering The Ohio State University

slide-2
SLIDE 2

Data Visualization

  • Visualization:
  • To form a mental image
  • f;
  • To make visible.
  • Example: NYC subway

map

  • It provides external aids

to increased our memory, thought, and reasoning

slide-3
SLIDE 3

Data Visualization

  • https://www.youtube.com/watch?v=jbkSRLYSojo
slide-4
SLIDE 4

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
slide-5
SLIDE 5

D3.js

  • A JavaScript library
  • Support visualizing data with the aid of HTML, SVG, and CSS
slide-6
SLIDE 6

Technology Foundations

  • Web technologies
  • HTML
  • CSS
  • SVG
  • Javascript
slide-7
SLIDE 7

HTML - Hyper Text Markup Language

  • 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

slide-8
SLIDE 8

HTML - Codes and the Result

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/HTML%20-%20Basics.html

slide-9
SLIDE 9

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
slide-10
SLIDE 10

HTML - DOM

Document Root element: <html> Element: <head> Element: <title> Text: "HTML Tutorial" Element: <body> Element: <h1> Text: "HTML Basics" Element: <p> Element <strong> "HTML" "is designed for" Element: <em> "marking up text" "by adding tags such as" Element <code> "<p>" "to create HTML

  • elements. "

Element: <p> Element: <strong> “Example image” Element: <img> Attribute: "src" Attribute: "style"

slide-11
SLIDE 11

HTML - DOM

  • 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

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/HTML - DOM.html

slide-12
SLIDE 12

CSS - Cascading Style Sheets

  • 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
slide-13
SLIDE 13

SVG - Scalable Vector Graphics

  • 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

x y width: 500px height: 50px

slide-14
SLIDE 14

SVG - Shapes

x y

slide-15
SLIDE 15

SVG - Shapes + CSS

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/SVG - Basic Shapes.html

slide-16
SLIDE 16

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

slide-17
SLIDE 17

SVG - PATH

8: l 0 -200 1: M 100 500 (100, 500) (400, 500) 2: H 400 (500, 300) 3: l 100 -200 4: Z 5: m 500 100 (600, 600) (600, 800) 6: l 0 200 7: L 800 800 (800, 800) (800, 600) 9: Z http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-0/SVG - Path.html

slide-18
SLIDE 18

SVG - Transform

  • translate(dx, dy)
  • move a shape by (dx, dy)
slide-19
SLIDE 19

SVG - Transform

  • rotate(a, x, y)
  • rotate a shape by a degrees about a given point (x, y)
slide-20
SLIDE 20

SVG - Transform

  • scale(x, y)
  • scales both the shape’s size and its coordinates

(60, 20) (60*2=120, 20*3=60)

slide-21
SLIDE 21

SVG - Transform

  • Multiple functions

Transform in the reverse order, i.e. the order of rotate, translate, and scale

slide-22
SLIDE 22

SVG - Group + Transform

  • Group multiple shapes
  • <g> tag
slide-23
SLIDE 23

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
slide-24
SLIDE 24

D3 Tutorial

D3 Manipulation of DOM

slide-25
SLIDE 25

Selections - d3.select(selector)

  • d3.select(selector)
  • selects only the first element that matches the specified selector string

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-DOM/D3 - Selections.html

slide-26
SLIDE 26

Selections - d3.selectAll(selector)

  • d3.selectAll(selector)
  • selects all elements that matches the specified selector string
slide-27
SLIDE 27

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>”
slide-28
SLIDE 28

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
slide-29
SLIDE 29

Selections - selection.select(selector)

  • selection.select(selector)
  • For each selected element, selects the first descendant element that matches

the specified selector string

slide-30
SLIDE 30

Selections - selection.selectAll(selector)

  • selection.selectAll(selector)
  • For each selected element, selects all the descendant elements that match

the specified selector string

slide-31
SLIDE 31

Selections - selection.style(StyleName, value)

  • Set the CSS style property to the specified value on the selected

elements

slide-32
SLIDE 32

Selections - selection.attr(AttrName, value)

  • Set the attribute to the specified value on the selected elements

Attributes “r” means radius

slide-33
SLIDE 33

D3 Tutorial

Data Binding and Loading

slide-34
SLIDE 34

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!
slide-35
SLIDE 35

Data Binding - A simple example

  • 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 http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - A simple exmaple.html

slide-36
SLIDE 36

Data Binding - A simple example

  • Design
  • Uniform height of bars
  • 20 pixels
  • Uniform padding between bars
  • 10 pixels
  • Varying width of bars
  • Proportional to the data values

Uniform height: 20px Uniform padding: 10px 20px 40px 60px Data values: 20, 40, and 60

slide-37
SLIDE 37

Data Binding - A simple example

  • Initialize variables
  • First, we create variables

to store basic information.

slide-38
SLIDE 38

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.

slide-39
SLIDE 39

Data Binding - A simple example

  • 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.

x y

slide-40
SLIDE 40

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.
slide-41
SLIDE 41

Data Binding - If we don’t have bars initially

  • 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

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - No bars initially.html

slide-42
SLIDE 42

Data Binding - If we don’t have bars initially

  • What’s wrong with the previous codes?
  • We have no bars on the

screen initially so nothing will be selected! We bind data with “nothing”!

  • We need a method to create

bars

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - No bars initially.html

slide-43
SLIDE 43

Data Binding - If we don’t have bars initially

  • A more concise solution
  • We will insert rects into svg.
  • Declare that we intend to

bind data with rect tags, although we don’t have rects now.

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Data Binding - No bars initially.html

slide-44
SLIDE 44

Data Binding - If we don’t have bars initially

  • selection.enter()
  • Create placeholder nodes for data values that has NO corresponding DOM

element in the selection.

  • Create placeholders for data

values that have NO corresponding bars

  • Then, each placeholder will be

replaced by a rect tag

  • Finally, set the attributes
slide-45
SLIDE 45

Data Binding - Try a real data

  • Populations of cities

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Populations of cities.html

slide-46
SLIDE 46

Populations of cities

  • Represent populations by width of bars

?

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Data/D3 - Populations of cities.html

slide-47
SLIDE 47

Populations of cities - Texts

  • Initialize variables
  • First, we create variables to

store basic information

slide-48
SLIDE 48

Populations of cities - Texts

  • Bind data with text tags
  • Create text tags to show

names of cities

slide-49
SLIDE 49

Populations of cities - Texts

  • (x, y) of a text
  • Bottom left-hand corner
  • Set coordinates of texts

x y

text (x, y)

slide-50
SLIDE 50

Populations of cities - Texts

  • Font size and text content
  • Set font size and text content
slide-51
SLIDE 51

Populations of cities - Scaling

  • Scale populations
  • so that we can display bars within the screen
  • London:

86.74 pixels

  • New York: 84.06 pixels
  • Sydney:

42.93 pixels

  • Paris:

22.44 pixels

  • Beijing:

115.1 pixels

slide-52
SLIDE 52

Data Loading

  • Loading data from external files
  • d3.json, d3.csv, d3.html, d3.txt, d3.tsv, .d3xml
  • d3.json(input, callback)
  • callback function will be invoked after data is loaded

city_population.json

…… …… ……

slide-53
SLIDE 53

Data Loading - CSV

  • d3.csv(input, callback)
  • For example, draw ten points

points.csv

  • The variable points stores

the received csv data

  • The loaded data is in the

form of key: value

slide-54
SLIDE 54

Data Loading - CSV

  • d3.csv(input, callback)
  • For example, draw ten points

points.csv

  • Column names become

the keys

  • The points.columns is an

array of column names

slide-55
SLIDE 55

Data Loading - CSV

  • We then draw circles and a table
slide-56
SLIDE 56

D3 Tutorial

Shapes

slide-57
SLIDE 57
  • lineGenerator is a function that accepts an array of co-ordinates and
  • utputs a path data string

Lines – Line Generator

  • Constructs a new line

generator

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Line Generator.html

slide-58
SLIDE 58

Lines – Line Generator

  • Define an array of

coordinates

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Line Generator.html

slide-59
SLIDE 59

Lines – Line Generator

  • Now call lineGenerator,

passing in our data points

  • pathData is

"M0,80L100,100L200,30L30 0,50L400,40L500,80”

  • A path string for SVG to draw a line

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Line Generator.html

slide-60
SLIDE 60

Lines – Line Generator

  • Draw the line

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Line Generator.html

slide-61
SLIDE 61

Arc - d3.arc()

  • Arc generators produce path data from angle and radius values
  • Data can be encoded into angle and radius
  • Application: Pie Chart

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Arc generator.html

slide-62
SLIDE 62

Arc – Multiple arcs

  • Multiple arcs
  • A template of pie chart

http://web.cse.ohio-state.edu/~shen.94/5544/D3/D3-Shapes/D3 - Arc - Multiple Arcs.html

slide-63
SLIDE 63

More Information

Han-Wei Shen’s CSE 5544 Web Site: http://web.cse.ohio-state.edu/~shen.94/5544/

slide-64
SLIDE 64

More Information

  • W3School: Tutorial, Manual
  • HTML: https://www.w3schools.com/html/default.asp
  • CSS: https://www.w3schools.com/css/default.asp
  • SVG: https://www.w3schools.com/graphics/svg_intro.asp
  • JavaScript: https://www.w3schools.com/js/default.asp
  • MDN web docs: Tutorial, Manual
  • SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
  • MDN web docs also have tutorials and manuals for HTML, CSS, and JavaScript
  • D3.js: https://d3js.org/
  • Manual/API: https://github.com/d3/d3/blob/master/API.md
  • Examples: https://github.com/d3/d3/wiki/Gallery
  • Collection of Tutorials: https://github.com/d3/d3/wiki/Tutorials