JavaScript - PKU VIS
Download
Report
Transcript JavaScript - PKU VIS
可视化与可视分析
Introduction to Web
Programming for Visualization
陈思明
北京大学可视化与可视分析实验室
2016.10.19
可视化与可视分析
2
Visualization
可视化与可视分析
3
WWW Stuff
HTML
Product Manager
CSS
Art Designer
JavaScript
Programmer
Image Source: Pixel4kids.net
可视化与可视分析
4
HTML
HTML : HyperText Markup
Language
the standard markup
language used to create web
pages.
Structure
Header
Body
Embedded assets
Elements
<div>, <p>, <input>, <span>,
etc.
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
<link href="css/index.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>
可视化与可视分析
HTML : HyperText Markup
Language
HTML tags (www.w3schools.com)
5
可视化与可视分析
HTML Tag Examples
6
可视化与可视分析
HTML Tag Examples 2
Tables
Tr (Row)
th/td (Head / Column)
7
可视化与可视分析
DOM Tree
Property
class, text
Method
find, insert
Event
onclick, onload
8
可视化与可视分析
CSS
CSS : Cascading Style Sheet is a style sheet language used for
describing the look and formatting of a document written in a markup
language.
Inline CSS
External CSS
9
可视化与可视分析
10
CSS
CSS Selector : allow you to select and manipulate HTML element(s).
The element Selector
The id Selector keyword “id=…” on html tag
The class Selector keyword “class=…” on html tag
可视化与可视分析
11
JavaScript
Why JavaScript? : JavaScript is one of 3 languages all web
developers MUST learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages
Example Scenario
Web Page
(Client Side)
request
response
Web Engine
(Server Side)
The request format should be verified on the client side thus
verification process will not burden the web server
可视化与可视分析
JavaScript
In-line Script
External Script
http://www.w3schools.com/jsref/default.asp
12
可视化与可视分析
JavaScript
<html>
<body>
<script type=“text/javascript”>
document.write(“<h1>这是标题</h1>”);
document.write(“<p>这是段落。</p>”);
document.write(“<p>这是另一个段落。
</p>”);
</script>
</body>
</html>
13
可视化与可视分析
JSON
More compact storage than XML
JavaScript compatible
More restrict
Key must be double quoted
{“key1”:”value1”,”key2”:”value2”}
14
可视化与可视分析
Reference
http://www.w3schools.com
http://jquery.com
http://www.json.org
http://d3js.org
15
可视化与可视分析
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
16
可视化与可视分析
17
Hands-on
Build up a website in 5 minutes
http://www.bootcss.com/p/layoutit/
可视化与可视分析
D3.js
18
可视化与可视分析
D3.js
http://d3js.org
One sentence illustration -- Binding data to HTML elements
22
可视化与可视分析
SVG
<svg>
<circle cx="100"
cy="50"
r="40"
stroke="black"
stroke-width="2"
fill="red" />
</svg>
23
可视化与可视分析
Learning from the ‘Three Little Circle’ –
Step 1: Relationship between SVG and
D3
24
http://bost.ocks.org/mike/circles/
可视化与可视分析
25
Learning from the ‘Three Little Circle’ –
Step 2: Selection
http://bost.ocks.org/mike/circles/
可视化与可视分析
26
Learning from the ‘Three Little Circle’ –
Step 3: Binding Data
http://bost.ocks.org/mike/circles/
可视化与可视分析
D3 Core: Enter – Update Exit
27
可视化与可视分析
D3 Core: Enter – Update –
Exit Take-home code
First to ‘enter’ – when new data coming
Remember to ‘update’ – when existing data change values
Don’t forget to ‘exit’ – remove what we don’t want
28
可视化与可视分析
6 Steps to write a
visualization
29
可视化与可视分析
Deconstruct the visualization
into primitives
X-axis
Y-axis
X, Y mapping
Color encoding
Labeling
Any interactions
30
可视化与可视分析
31
Step 1: Loading the data
Loading Data
Preprocessing related
attributes
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
});
可视化与可视分析
32
Step 2: Mapping the data
Mapping the data
Defining the boundary
Defining the ‘d3.scale’
Choosing the mapping
mechanism – linear, log, etc.
Setting the ‘domain’ and
‘range’
var margin = {top: 20, right: 20, bottom:
30, left: 40},
width = 960 - margin.left margin.right,
height = 500 - margin.top margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
x.domain(d3.extent(data, function(d)
{ return d.sepalWidth; })).nice();
y.domain(d3.extent(data, function(d)
{ return d.sepalLength; })).nice();
可视化与可视分析
Step 3: Preparing for
drawing
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
SVG is the main canvas for drawing
X-axis and Y-axis is mapping with the x and y scale
33
可视化与可视分析
Step 4: Drawing the
primitives
Drawing the xAxis
Drawing the labels
Drawing the yAxis and lables
34
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Sepal Width (cm)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Sepal Length (cm)")
可视化与可视分析
35
Step 5: Drawing the Dot
Main parts of the drawing
Data binding
Data entering
Data updating
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return
x(d.sepalWidth); })
.attr("cy", function(d) { return
y(d.sepalLength); })
.style("fill", function(d) { return
color(d.species); });
可视化与可视分析
36
Step 6: Drawing the
Legends
Labels are the data of
categories, in this data is 3
categories
Adding the rect and text
Setting the contents
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return
"translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });