D3JS kirby

Scalable Vector Graphics SVG

! ! ! ! hello world!

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

M (x,y)+ - Move to (+ lineto) C (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2

No content

Q (x1,y1,x,y)+ - Quadratic Bezier T (x,y)+ - Quadratic Bezier

A (rx,ry,a,b,c,x,y)+ - Quadratic Bezier

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

helloworld!

No content

Coordinate …… preserveAspectRatio=“None” or x{Min,Mid,Max}Y{Min,Mid,Max}

width height (x1,y1) (x2,y2)

No content

preserveAspectRatio xMin xMid xMax yMin yMid yMax

SMIL Animation in SVG (IE not support)

屬性變化 ! 線性轉換變化 ! 路徑

discrete,paced,linear,spline

!

D3JS js library for manipulating documents based on data d3.json(“data.json”, function(data) { min = d3.min(data); });

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: , target: }

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 }