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
d3js for 0media
Search
tkirby
May 03, 2014
Technology
3
330
d3js for 0media
tkirby
May 03, 2014
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
430
Theory of Graphical Perception
tkirby
0
460
Open Refine Course
tkirby
0
180
Language Reference
tkirby
0
98
新聞記者的程式設計第一課
tkirby
0
510
Visualization over Web
tkirby
0
110
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
720
Rasterize D3.js
tkirby
7
1.6k
SVG + D3.JS Course Slide
tkirby
0
210
Other Decks in Technology
See All in Technology
Can We Measure Developer Productivity?
ewolff
1
150
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
Lexical Analysis
shigashiyama
1
150
Lambdaと地方とコミュニティ
miu_crescent
2
370
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
750
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Navigating Team Friction
lara
183
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Being A Developer After 40
akosma
86
590k
KATA
mclloyd
29
14k
Facilitating Awesome Meetings
lara
50
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The Cult of Friendly URLs
andyhume
78
6k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Transcript
D3JS kirby
Scalable Vector Graphics SVG
<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” >
<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
<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
<path d=“……” fill=“…” stroke=“…” stroke-width=“size” stroke-dasharray=“…” stroke-dashoffset=“…” transform=“ translate(x y)
rotate(r x y) 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>
None
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
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>
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 }