Scribd
Upload
8K views39 pages

D3 Tutorial: Introduction of Basic Components: HTML, CSS, SVG, and Javascript D3.Js Setup

D3.js is a JavaScript library for visualizing data using HTML, SVG and CSS. The document provides an introduction to basic components used in D3 including HTML, CSS, SVG and JavaScript. It then describes how to set up D3 by downloading the D3 JavaScript library and referencing it in an HTML file so it can be used to dynamically manipulate and visualize data in the browser.

Uploaded by

Hare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8K views39 pages

D3 Tutorial: Introduction of Basic Components: HTML, CSS, SVG, and Javascript D3.Js Setup

D3.js is a JavaScript library for visualizing data using HTML, SVG and CSS. The document provides an introduction to basic components used in D3 including HTML, CSS, SVG and JavaScript. It then describes how to set up D3 by downloading the D3 JavaScript library and referencing it in an HTML file so it can be used to dynamically manipulate and visualize data in the browser.

Uploaded by

Hare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

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

You might also like