D3 Tutorial
Introduction of Basic Components: HTML, CSS, SVG, and JavaScript
D3.js Setup
Edit by Jiayi Xu and Han-Wei Shen, The Ohio State University
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
HTML - Plain Text
• If we display the information only by plain text
HTML Basics
HTML is designed for marking up text by adding tags such
as <p> to create HTML elements.
Example image:
HTML - Codes and the Result
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
• 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 - 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
CSS
CSS - Box Model
CSS - Box Model
• Margin
• 20px 40px 60px
CSS - Box Model
• Border
• 10px 15px 20px
CSS - Box Model
• Border style
• solid dotted dashed
• Other styles
• double, groove, ridge, insert, outset, none, hidden
CSS - Box Model
• Padding
• 20px 15px 20px
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
width: 500px
x
height: 50px
y
SVG - Shapes
y
SVG - Shapes + CSS
SVG - Polygon and Polyline
x
• Use coordinates to specify path
(48, 16)
(0, 48) (96, 48)
(16, 96) (80, 96)
(05, 130)
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
(500, 300)
3: l 100 -200
4: Z
1: M 100 500
(100, 500) 2: H 400 (400, 500)
(600, 600) 9: Z (800, 600)
5: m 500 100
8: l 0 -200
6: l 0 200 (800, 800)
(600, 800) 7: L 800 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
SVG - No Layer
• Any pixel-paint applied later obscure any earlier paint and therefore
appear to be "in front"
JavaScript
• JavaScript works with HTML and CSS
• HTML to define the content of web pages
• CSS to specify the appearance of web pages
• JavaScript to program the behavior of web pages
• JavaScript is the programming language with C/C++ style syntax
• for, while, continue, break, if/else, switch are similar to C/C++
• operators (+,-,*,/,%) are also similar (except ==,!=,||)
JavaScript - Hello, Console
• Easy and quick way to test JavaScript code and debug
• The result of “console.log()” will appear here
• You can type JavaScript code directly into your browser in a web page
• The console accepts one line of code at a time
• Open Console
• Chrome
• Select View -> Developer -> JavaScript Console
• Firefox
• Tools -> Web Developer -> Web Console
• Safari
• Safari -> Preferences -> Advanced -> Show Develop menu in menu bar
• Develop -> Show JavaScript Console
JavaScript - Hello, Console
• An example using Chrome Console
• Line 1: var x = 3;
• Assign value 3 to the variable x
• The value of the statement “var x = 3; ” is
undefined
• Line 2: x + 1
• The Console evaluates the value of “x + 1”, which
is 4
• Line 3: console.log(x+1)
• Print the value of “x+1”, which is 4
• The value of the statement “console.log(x+1)” is
undefined
• Line 4: (function xplusone() { return x+1; })()
• Define a function to compute x+1 and then,
execute the function
JavaScript - Data Types
• Numbers
• 42, 3.1415926
• Logical
• true, false
• Strings
• "Hello", 'Hello’
• null
• undefined*
• Yes. undefined is not null!
• Usually to indicate a variable is not defined
JavaScript - Data Types
• functions
• function(x) { return x+1; }
• Can be assigned to variables like: var xPlusOne = function(x) { return x+1; }
• Same as: function xPlusOne(x) { return x+1; }
• Objects
• An object in JavaScript is an associative array of property names (Strings) and
values (Objects)
• {from: “Tom”, to: “Jerry”, message: “We are good friends!” }
• Arrays
• var numbers = [ 5, 10, 15, 20, 25];
• var mixedValues = [ 1,3, 4.5, 5.6, "string", null, undefined, true ];
JavaScript - Data Types
• Javascript uses dynamic typing
• var x = “The answer is ” + 42;
• The value of x is the string “The answer is 42”
• var x = “37” - 7;
• The value of x is the number 30
• var x = “37” + 7;
• The value of x is the string ”377”
• var x = “1.1” + “1.1”;
• String “1.11.1”
• var x = (+“1.1”)
• Number 1.1
• var x = (+“1.1”) + (+“1.1”);
• Number 2.2
JavaScript - Control Flow
• C-Style `for`, `while`, `continue`, `break`, `if`/`else`, `switch/case`
for (var i=0; i < 10; i++) {
if (condition) {
statement_1_runs_if_condition_is_true();
break;
}
else {
statement_2_runs_if_condition_is_false();
continue;
}
}
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.js
• A JavaScript library
• Support visualizing data with the aid of HTML, SVG, and CSS
D3.js - Downloading and Referencing D3
• Downloading
• Official website: https://d3js.org/
• Referencing
• Referencing without downloading
D3.js - Open Web Pages with D3.js
• Usually, you can view local HTML files directly in your web browser
• However, some browsers have restrictions that prevent them from
loading local files via JavaScript, for security reasons
• That means if your D3 code is trying to pull in any external data files (like CSVs
or JSONs), it will fail with no good explanation
• For this reason, it is much more reliable to load your page via a web server
• To set up a simple local server
• See D3 example to test your browser of our course website: http://web.cse.ohio-
state.edu/~shen.94/5544/
Good Resources
• 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
Recommended Book
