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
200
SVG + D3.JS Course Slide
tkirby
May 28, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
430
Theory of Graphical Perception
tkirby
0
450
Open Refine Course
tkirby
0
180
Language Reference
tkirby
0
96
新聞記者的程式設計第一課
tkirby
0
510
Visualization over Web
tkirby
0
110
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
720
Rasterize D3.js
tkirby
7
1.6k
資料新聞學手冊導讀
tkirby
0
240
Other Decks in Education
See All in Education
PSYC-560 R and R Studio Setup
jdbedics
0
510
2409_CompanyInfo_Hanji_published.pdf
yosukemurata
0
230
技術を楽しもう/enjoy_engineering
studio_graph
1
400
Tableau トレーニング【株式会社ニジボックス】
nbkouhou
0
17k
"数学" をプログラミングしてもらう際に気をつけていること / Key Considerations When Programming "Mathematics"
guvalif
0
540
Canva
matleenalaakso
0
400
Blogit opetuksessa
matleenalaakso
0
1.6k
The Gender Gap in the Technology Field and Efforts to Address It
codeforeveryone
0
150
困ったときのガイドライン / We Support You in Any Situation
yasulab
2
3.8k
Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
660
20240810_ワンオペ社内勉強会のノウハウ
ponponmikankan
2
860
construindo uma carreira com opensource
caarlos0
0
210
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
4 Signs Your Business is Dying
shpigford
180
21k
Visualization
eitanlees
144
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Statistics for Hackers
jakevdp
796
220k
It's Worth the Effort
3n
183
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Testing 201, or: Great Expectations
jmmastey
38
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
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 }