D3 JS
Java scirpt is an awesome language for Internface Design.
All Obejcts in JavaScirpt could be used as an argument to pass around.
Important Objects:
d3
var width = 500;
var height = 500;
svg obeject:
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
array:
var dataArray = [20, 40, 50, 60]
...
var bars = canvas.selectAll("rect")
.data(dataArray) //traverse over the array
.enter()
.append("rect")
.attr("width", function(d) {return d}) //note the annoymos function
.attr("height", 50)
.attr("y", function(d, i) {return i * 100});
scale:
var widthScale = d3.scale.linear()
.domain([0, 60])
.range([0, width]);
var color = d3.scale.linear()
.domain([0, 60])
.range(["read", "blue"])
var bars = canvas.selectAll("rect")
.data(dataArray) //traverse over the array
.enter()
.append("rect")
.attr("width", function(d) {return widthScale(d)}) //note the annoymos function
.attr("height", 50)
.attr("y", function(d, i) {return i * 100});
group: (group some svg objects together, and mainpulat on all elements of the group)
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
.append("g")
.attr("transform", "translate(20, 0)")
The three important states when binding data elements with DOM elements
DOM elements(rect, circle)
Data elements(xArray = [1, 2, 3, 5, 7])
The beautiful: mainpulate the DOM elements through the data elements
Three states:(when binding) for each DOM element and data element
1. DOM elements :< data elements (enter) : for the data element that do not bond to a DOM element
2. DOM elements :> data elements (exit) : for the DOM element that do not bond to a data element
3. DOM elements := data elements (update) : the element justly bond to a DOM element
Example:
var data = [10, 20];
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
update state and enter state:
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25)
var circles = canvas.selectAll("circle") //select all circles
.data(data)
.attr("fill", "red") // for data element "10" and circle1
.enter() // for data element "20"
.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("fill", "green")
.attr("r", 25);
Update state and exit state:
var data = [10];
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25)
var circle2 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 200)
.attr("r", 25)
var circles = canvas.selectAll("circle") //select all circles
.data(data)
.attr("fill", "red") // for data element "10" and circle1
.exit() // for circle2
.attr("fill", "blue")
Animation effects: Using transition
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
var circle = cavas.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 25)
circle.transition()
.duration(1500)
.attr("cx", 150)
.transition()
.attr("cy", 200)
.transition()
.attr("cx", 50)
Add event listener for animation:
circle.transition()
.duration(1500)
.attr("cx", 150)
.each("end", function() {d3.select(this).attr("fill", "red")})
//when the transition is over, change color
Loading External data (use properly with call back mechanism)
//when the load process finished, the "data" would be passed into the function
d3.json("mydata.json", function (data)) {
//the critical part is to understand how arguments were passed around
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d) { return d.age * 10; })
.attr("height", 50)
.attr("y", function(d, i) { return i * 50;})
.attr("fill", "blue")
canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "white")
.attr("y", function (d, i) { return i * 50; })
.text(function (d) {return d.name; })
}}
The powerfull "Path" Componet in D3.JS
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
var data = [
{x: 10, y: 20},
{x: 40, y: 60},
{x: 50, y: 70}
];
var group = canvas.append("g") //create a group over the canvas
.attr("transform", "translate(100, 100)");
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; })
group.selectAll("path")
.data([data]) //pass in as only one array
.enter()
.append("path")
.attr("d", line) //directly pass the data array to constract line.
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 10);
The powerful "Arc" Componet in D3.JS
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
var group = canvas.append("g")
.attr("transform", "translate(100, 100)");
var r = 100;
var p = Math.PI * 2;
var arc = d3.svg.arc()
.innerRadius(r - 20)
.outerRadius(r)
.startAngle(0)
.endAngle(p);
group.append("path")
.attr("d", arc)
Layout: D3JS has provieded convenient libraires for converting a number/array into a layout object(array).
Combine group, component and layout to create an awesome work.
***How to refer a group is very very important!
1. create container(document componet with proper group)
2. prepare data by using proper layout function
3. bind the data with container
var data = [10, 50, 80];
var r = 300;
var color = d3.scale.ordinal()
.range(["red", "blue", "orange"]);
var canvas = d3.select("body").append("svg")
.attr("width", 1500)
.attr("height", 1500);
var group = canvas.append("g") //create the canvas group
.attr("transform", "translate(300, 300)");
var arc = d3.svg.arc()
.innerRadius(200)
.outerRadius(r);
//convert the passed in array into into the objects for creating arc
var pie = d3.layout.pie()
.value(function (d) { return d; });
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g") //each arc is a group in the arcs group
.attr("class", "arc");
//note here, we use arcs to refer all arc contains in the arcs
//the same execution would be performed over all arcs
arcs.append("path")
.attr("d", arc) //we use arc as passed in object to constract the path
.attr("full", function (d) { return color(d.data);});
arcs.append("text")
.attr("transform", function(d) {return "translate(" + arc.centroid(d) +")"})
.attr("text-anchor", "middle")
.attr("front-size", "1.5em")
.text(function (d) {return d.data;});
The Tree Layout:
//Path could be used to create any sharp
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var diagonal = d3.svg.diagonal()
.source({x: 10, y: 10})
.target({x: 300, y: 300});
canvas.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", digonal) //all use pass as container, but depict based on passed in object