The fundamental knowledge of Node JS.

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