Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVG + D3.JS Course Slide
Search
tkirby
May 28, 2015
Education
0
240
SVG + D3.JS Course Slide
tkirby
May 28, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
530
Theory of Graphical Perception
tkirby
0
560
Open Refine Course
tkirby
0
210
Language Reference
tkirby
0
110
新聞記者的程式設計第一課
tkirby
0
580
Visualization over Web
tkirby
0
130
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
770
Rasterize D3.js
tkirby
7
1.7k
資料新聞學手冊導讀
tkirby
0
280
Other Decks in Education
See All in Education
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
140
プレゼンテーション実践
takenawa
0
12k
演習問題
takenawa
0
12k
”育てる”から”育つ”仕組みへ!スクラムによる新入社員教育
arapon
0
100
情報科学類で学べる専門科目38選
momeemt
0
550
社外コミュニティと「学び」を考える
alchemy1115
2
170
2025年度春学期 統計学 第10回 分布の推測とは ー 標本調査,度数分布と確率分布 (2025. 6. 12)
akiraasano
PRO
0
210
2025年度春学期 統計学 第8回 演習(1) 問題に対する答案の書き方(講義前配付用) (2025. 5. 29)
akiraasano
PRO
0
130
Webリテラシー基礎
takenawa
0
12k
2025/06/05_読み漁り学習
nag8
0
180
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1.1k
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
200
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Six Lessons from altMBA
skipperchong
28
3.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building an army of robots
kneath
306
45k
KATA
mclloyd
32
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Side Projects
sachag
455
43k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
Music & Morning Musume
bryan
46
6.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Visualization over Web
HTML <a href=“link”>content</a> <img src=“blah.png”> <br> <a href=“link”> this link
</a> links to a page <br> <p><a href=“link”> this link </a> links to a page </p>
block / inline-block table / list / flex … static
/ relative absolute / fixed … Display Mode Position Method
None
Scalable Vector Graphics SVG
<p> <svg> … </svg> </p>
<svg> <rect x=“10” y=“10” width=“20” height=“20”> </svg>
<circle> <ellipse> <line> <path> <text> hello world!
<circle cx=“10” cy=“10” r=“10” >
<ellipse cx=“10” cy=“10” rx=“20” ry=“10” >
<line x1=“10” y1=“10” x2=“20” y2=“20” >
<circle cx=“10” cy=“10” r=“10” stroke=“color” fill=“color” stroke-width=“size” >
None
#abcdef RG B 0 ~ 255 = 0 ~ ff
#adf = #aaddff
#abcdef RG B rgb(255,128,64) rgba(255,128,64,0.8)
<circle cx=“10” cy=“10” r=“10” stroke=“black” fill=“#8fc” stroke-width=“5” >
Exercise 1
?
None
None
<path d=“....”> 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
<path d=“....”> M1,1 L2,1 L 2,2 L1,2Z (1,1) (2,1) (2,2)
(1,2) M L L L Z
<path d=“....”> M (x,y)+ - Move to (+ lineto) C
(x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2
None
<path d=“....”> Q (x1,y1,x,y)+ - Quadratic Bezier T (x,y)+ -
Quadratic Bezier
<path d=“....”> A (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
<path d=“....”> 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
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=“ ”
http://goo.gl/fPUFgv SVG Editor
Exercise 2
<path d=“……” fill=“…” stroke=“…” stroke-width=“size” stroke-dasharray=“…” stroke-dashoffset=“…” transform=“ translate(x y)
rotate(r x y) scale(x y) ” >
None
transform=“ translate(x,y) “
transform=“ rotate(r,x,y) “
transform=“ scale(x,y) “
<text x=“0” dx=“0” y=“0” dy=“0” text-anchor=“middle" dominant-baseline="central" textLength=“100" rotate=“ 30
60 90 120 150 180 210 240 270 300 330 360”> helloworld! </text>
Hello World! Hello World! Hello World! start middle end Hello
World! dominant-baseline text-anchor central
rotate=“ 30 60 90 120 150 180 210 240 270
300 330 360”
SMIL <path d=“……”> <animate/> <animateTransform/> <animateMotion/> Animation in SVG (IE
not support)
<animate/> 屬性變化 <animateTransform/> 線性轉換變化 <animateMotion/> 路徑
<animate attributeName=“r” dur=“1s” repeatCount=“indefinite” from=“…” to=“…” begin=“…” end=“…” values=“…” keyTimes=“…”
keySplines=“…” calcMode=“…”/> discrete,paced,linear,spline
<animateTransform attributeName=“transform” type=“…”/> <animateMotion> <mpath xlink:href=“…”/> </animateMotion>
<ellipse rx=“1” ry=“8”> <animate attributeName=“rx” from=“1” to=“10” dur=“1s” repeatCount=“indefinite”/>
<animateTransform attributeName=“transform” type=“rotate” from=“0” to=“180” dur=“0.5s” repeatCount=“indefinite”/> </ellipse>
Coordinate <svg width=“200px” height=“200px” viewBox=“0 0 100 100” preserveAspectRatio=“…”> ……
</svg> preserveAspectRatio=“None” or x{Min,Mid,Max}Y{Min,Mid,Max}
width height (x1,y1) (x2,y2) <svg width=“w” height=“h” viewBox=“x1 y1 x2
y1”>
None
preserveAspectRatio xMin xMid xMax yMin yMid yMax
D3JS js library for manipulating documents based on data <script
type=“text/javascript” src=“d3.min.js”></script> <script type=“text/javascript”> d3.json(“data.json”, function(data) { min = d3.min(data); }); </script>
Data Driven Document Model Powerful Visualizing Lib d3js d3js d3js
d3js d3js d3js d3js d3js d3js d3js
data data data data data selection enter exit selection
data data data data selection enter exit selection d3.selectAll(“div”) .data(data)
.enter().append(“div”) .exit().remove() d3.selectAll(“div”)
new data data new data.onChange enter exit selection
Topic 1 - Selections
d3.select(“body”) .attr(“class”, “root”) d3.select(“body”) .style({ background: “#999”, color: “#009” })
d3.select(“body”) .text(“123”); d3.select(“body”) .html(“123”);
d3.select(“body”).selectAll(“div”) .style({ background: “#999”, color: “#009” }) d3.select(“body”).selectAll(“div”) .style({ background:
function() { return “#f00” }, color: “#009” })
d3.select(“body”).selectAll(“div”) .style({ background: function(d,i) { return "rgba("+(i*85)+",128,192,1)"; }, color: “#009”
})
d3.select(“body”).selectAll(“div”) .data([“#f00”,”#f90”,”#ff0”]) .style({ background: function(d,i){ return d; }, color: “#009”
})
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; });
Topic 2 - Utilities
Utility functions d3.json(path, callback) d3.csv(path, accessor, callback) d3.html(path, callback) d3.text(path,
type, callback) d3.xhr() …
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
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)
Scale functions d3.scale.linear() .domain([0,100]) .range([“#000”,”#f00”]) d3.scale.category10() d3.scale.category20() d3.scale.category20b() d3.scale.category20c()
Topic 3 - Layout
Pack Layout
Pack Layout nodes = d3.layout.pack().size([w,h]) .nodes(data) structure of data: {
value: ?, children: [ ] } { value: ?, children: [ ], parent, depth, x, y, r }
{ parent: null, children: [ {value: 3}, {value: 1}, {value:
4}, {value: 1}, {value: 5}, ………… ] } c = data.map( function(d) { return {value: d}; } ); root = { children: c }
{ 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:…}, …… ]
Pack Layout d3.layout.pack() .sort(function(a,b) {…}) .padding(5) .size([w,h]) .nodes(data) d3.layout.pack().links(nodes) {
source: <node>, target: <node> }
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 }
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
Force Layout d3.layout.force() .size() .gravity() .charge() .friction() .nodes() .start() d3.on(“tick”,
callback) [{…},{…},…] [ {…, x:…, y:…}, {…, x:…, y:…}, {…, x:…, y:…}, … ]
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();
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 }