Slide 1
Slide 1 text
Visualization
over
Web
Slide 3
Slide 3 text
block / inline-block
table / list / flex …
static / relative
absolute / fixed …
Display Mode
Position Method
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Scalable Vector Graphics
SVG
Slide 6
Slide 6 text
Slide 7
Slide 7 text
Slide 8
Slide 8 text
hello world!
Slide 9
Slide 9 text
Slide 10
Slide 10 text
Slide 11
Slide 11 text
Slide 12
Slide 12 text
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
#abcdef
RG B
0 ~ 255 = 0 ~ ff
#adf = #aaddff
Slide 15
Slide 15 text
#abcdef
RG B
rgb(255,128,64)
rgba(255,128,64,0.8)
Slide 16
Slide 16 text
Slide 17
Slide 17 text
Exercise 1
Slide 18
Slide 18 text
?
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
M (x,y)+ - Move to (+ lineto)
Z - Close Path
L (x,y)+ - Line to
C (x1,y1,x2,y2,x,y)- Curve to
ctrl1 ctrl2
M1,1 L2,1 L 2,2 L1,2Z
Slide 22
Slide 22 text
M1,1 L2,1 L 2,2 L1,2Z
(1,1) (2,1)
(2,2)
(1,2)
M
L
L
L
Z
Slide 23
Slide 23 text
M (x,y)+ - Move to (+ lineto)
C (x1,y1,x2,y2,x,y)- Curve to
ctrl1 ctrl2
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Q (x1,y1,x,y)+ - Quadratic Bezier
T (x,y)+ - Quadratic Bezier
Slide 26
Slide 26 text
A (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
Slide 27
Slide 27 text
m (x,y)+ - Move to (+ lineto)
z - Close Path
l (x,y)+ - Line to
c (x1,y1,x2,y2,x,y)+ - Curve to
ctrl1 ctrl2
q (x1,y1,x,y)+ - Quadratic Bezier
a (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
Slide 28
Slide 28 text
M75,50.5l5-1.5c-0.1-2.2-0.4-4.3-0.9-6.3l-5.2-0.1c-0.2-0.6-0.4-1.1-0.
6-1.7l4-3.3c-0.9-1.9-2-3.8-3.2-5.5L69.2,34c-0.4-0.5-0.8-0.9-1.2-1.3l
2.4-4.6c-1.6-1.4-3.3-2.7-5.1-3.8l-3.7,3.6c-0.5-0.3-1.1-0.5-1.6-0.8l0.5
-5.2c-2-0.7-4-1.3-6.2-1.6l-2.1,4.8c-0.6-0.1-1.2-0.1-1.8-0.1l-1.5-5c-2.
2,0.1-4.3,0.4-6.3,0.9l-0.1,5.2c-0.6,0.2-1.1,0.4-1.7,0.6l-3.3-4c-1.9,0.9
-3.8,2-5.5,3.2l1.9,4.9c-0.5,0.4-0.9,0.8-1.3,1.2l-4.6-2.4c-1.4,1.6-2.7,3
.3-3.8,5.1l3.6,3.7c-0.3,0.5-0.5,1.1-0.8,1.6l-5.2-0.5c-0.7,2-1.3,4-1.6,6
.2l4.8,2.1c-0.1,0.6-0.1,1.2-0.1,1.8l-5,1.5c0.1,2.2,0.4,4.3,0.9,6.3l5.2,
0.1c0.2,0.6,0.4,1.1,0.6,1.7l-4,3.3c0.9,1.9,2,3.8,3.2,5.5l4.9-1.9c0.4,0.
5,0.8,0.9,1.2,1.3l-2.4,4.6c1.6,1.4,3.3,2.7,5.1,3.8l3.7-3.6c0.5,0.3,1.1,
0.5,1.6,0.8l-0.5,5.2c2,0.7,4,1.3,6.2,1.6l2.1-4.8c0.6,0.1,1.2,0.1,1.8,0.
1l1.5,5c2.2-0.1,4.3-0.4,6.3-0.9l0.1-5.2c0.6-0.2,1.1-0.4,1.7-0.6l3.3,4c
1.9-0.9,3.8-2,5.5-3.2L66,69.2c0.5-0.4,0.9-0.8,1.3-1.2l4.6,2.4c1.4-1.6
,2.7-3.3,3.8-5.1l-3.6-3.7c0.3-0.5,0.5-1.1,0.8-1.6l5.2,0.5c0.7-2,1.3-4,
1.6-6.2l-4.8-2.1C74.9,51.7,75,51.1,75,50.5zM50,65c-8.3,0-15-6.7-1
5-15c0-8.3,6.7-15,15-15s15,6.7,15,15 C65,58.3,58.3,65,50,65z
d=“
”
Slide 29
Slide 29 text
http://goo.gl/fPUFgv
SVG Editor
Slide 30
Slide 30 text
Exercise 2
Slide 31
Slide 31 text
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
transform=“
translate(x,y)
“
Slide 34
Slide 34 text
transform=“
rotate(r,x,y)
“
Slide 35
Slide 35 text
transform=“
scale(x,y)
“
Slide 36
Slide 36 text
helloworld!
Slide 37
Slide 37 text
Hello World!
Hello World!
Hello World!
start
middle
end
Hello World!
dominant-baseline
text-anchor
central
Slide 38
Slide 38 text
rotate=“ 30 60 90 120
150 180 210 240
270 300 330 360”
Slide 39
Slide 39 text
SMIL
Animation in SVG (IE not support)
Slide 40
Slide 40 text
屬性變化
線性轉換變化
路徑
Slide 41
Slide 41 text
discrete,paced,linear,spline
Slide 42
Slide 42 text
Slide 43
Slide 43 text
Slide 44
Slide 44 text
Coordinate
preserveAspectRatio=“None” or
x{Min,Mid,Max}Y{Min,Mid,Max}
Slide 45
Slide 45 text
width
height
(x1,y1)
(x2,y2)
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
preserveAspectRatio
xMin xMid xMax
yMin
yMid
yMax
Slide 48
Slide 48 text
D3JS
js library for manipulating documents based on data
d3.json(“data.json”, function(data) {
min = d3.min(data);
});
Slide 49
Slide 49 text
Data Driven
Document Model
Powerful
Visualizing Lib
d3js d3js d3js d3js d3js d3js d3js d3js d3js d3js
Slide 50
Slide 50 text
data data data data data
selection
enter exit
selection
Slide 51
Slide 51 text
data data data data
selection
enter exit
selection
d3.selectAll(“div”)
.data(data)
.enter().append(“div”)
.exit().remove()
d3.selectAll(“div”)
Slide 52
Slide 52 text
new
data
data
new
data.onChange
enter exit
selection
Slide 53
Slide 53 text
Topic 1 - Selections
Slide 54
Slide 54 text
d3.select(“body”)
.attr(“class”, “root”)
d3.select(“body”)
.style({
background: “#999”,
color: “#009”
})
d3.select(“body”)
.text(“123”);
d3.select(“body”)
.html(“123”);
Slide 55
Slide 55 text
d3.select(“body”).selectAll(“div”)
.style({
background: “#999”,
color: “#009”
})
d3.select(“body”).selectAll(“div”)
.style({
background: function() {
return “#f00”
},
color: “#009”
})
Slide 56
Slide 56 text
d3.select(“body”).selectAll(“div”)
.style({
background: function(d,i) {
return "rgba("+(i*85)+",128,192,1)";
},
color: “#009”
})
Slide 57
Slide 57 text
d3.select(“body”).selectAll(“div”)
.data([“#f00”,”#f90”,”#ff0”])
.style({
background: function(d,i){
return d;
},
color: “#009”
})
Slide 58
Slide 58 text
v = d3.select(“body”).selectAll(“div”)
.data([“#f00”,”#f90”,”#ff0”])
v.exit().remove();
v.enter().append(“div”);
d3.select(“body”).selectAll(“div”)
.style({
background: function(d,i){
return d;
},
color: “#009”
})
.text(function(d) { return d; });
Slide 59
Slide 59 text
Topic 2 - Utilities
Slide 60
Slide 60 text
Utility functions
d3.json(path, callback)
d3.csv(path, accessor, callback)
d3.html(path, callback)
d3.text(path, type, callback)
d3.xhr() …
Slide 61
Slide 61 text
Utility functions
d3.min(array)
d3.max(array)
d3.sum(array)
d3.mean(array)
d3.median(array)
d3.random.normal
d3.set
set.has
set.forEach
d3.map
map.has
map.forEach
d3.transition
d3.svg
Slide 62
Slide 62 text
Scale functions
d3.scale.linear().domain(array).range(array)
radius = d3.scale.linear()
.domain([d3.min(data), d3.max(data)])
.range([“#f00”,”#00f”])
ticks = radius.ticks(20);
d3.scale.pow().exponent(3).domain(array).range(array)
d3.scale.log().domain(array).range(array)
Slide 63
Slide 63 text
Scale functions
d3.scale.linear()
.domain([0,100])
.range([“#000”,”#f00”])
d3.scale.category10()
d3.scale.category20()
d3.scale.category20b()
d3.scale.category20c()
Slide 64
Slide 64 text
Topic 3 - Layout
Slide 65
Slide 65 text
Pack Layout
Slide 66
Slide 66 text
Pack Layout
nodes = d3.layout.pack().size([w,h])
.nodes(data)
structure of data:
{
value: ?,
children: [
]
}
{
value: ?,
children: [
],
parent, depth,
x, y, r
}
Slide 67
Slide 67 text
{
parent: null,
children: [
{value: 3},
{value: 1},
{value: 4},
{value: 1},
{value: 5},
…………
]
}
c = data.map(
function(d) {
return {value: d};
}
);
root = {
children: c
}
Slide 68
Slide 68 text
{
parent: null,
children: [
{value: 3},
{value: 1},
{value: 4},
{value: 1},
{value: 5},
…………
]
}
[
{value:0,depth: 0,
x:…, y:…, r:…},
{value:3,depth: 1,
x:…, y:…, r:…},
{value:1,depth: 1,
x:…, y:…, r:…},
{value:4,depth: 1,
x:…, y:…, r:…},
……
]
Slide 69
Slide 69 text
Pack Layout
d3.layout.pack()
.sort(function(a,b) {…})
.padding(5)
.size([w,h])
.nodes(data)
d3.layout.pack().links(nodes)
{ source: , target: }
Slide 70
Slide 70 text
Partition Layout
d3.layout.partition()
.sort(function(a,b) {…})
.size([w,h])
.nodes(data)
d3.layout.partition().links(data)
{ value: ?,
children: [],
parent, depth,
x, y, r, dx, dy
}
Slide 71
Slide 71 text
arc = d3.svg.arc()
.startAngle(function(d) {
return d.x;
}).endAngle(function(d) {
return d.x + d.dx;
}).innerRadius(function(d) {
return Math.sqrt(d.y);
}).outerRadius(function(d) {
return Math.sqrt(d.y + d.dy);
});
Use d3.svg.arc
* also check the pie layout
Slide 72
Slide 72 text
Force Layout
d3.layout.force()
.size()
.gravity()
.charge()
.friction()
.nodes()
.start()
d3.on(“tick”, callback)
[{…},{…},…]
[
{…, x:…, y:…},
{…, x:…, y:…},
{…, x:…, y:…},
…
]
Slide 73
Slide 73 text
data = [1,2,3,4].map(function(d) {
return {v:d};
});
force = d3.layout.force().nodes(data);
force.on(“tick”, function() {
d3.selectAll(“…”).attr({
x: function(d) { return d.x; },
y: function(d) { return d.y; },
…
});
force.start();
Slide 74
Slide 74 text
Cluster Layout
d3.layout.cluster()
.sort(function(a,b) {…})
.size([w,h])
.nodes(data)
d3.layout.cluster().links(data)
{ value: ?,
children: [],
parent, depth,
x, y
}