Web Standards

• HTML
• CSS
• SVG

SVG

• Another HTML element, except you can not put another HTML element inside an SVG.
• Does not support common HTML attributes or styles such as position, left, top, right, bottom or float.
• Default svg size is browser-dependant.

Circle

<circle cx="250" cy="100" r="30" fill="#25B0B0">
</circle>

Rectangle

<rect x="200" y="50" width="100" height="100" rx="10" ry="0" fill="#25B0B0">
</rect>

Group

<g transform="translate(100, 100)">
	<circle cx="20" cy="10" r="30" fill="rgb(255, 0, 0)">
	</circle>
	<circle cx="100" cy="10" r="30" fill="#25B0B0">
	</circle>
</g>

jsFiddle

Line

<line x1="10" y1="10" x2="100" y2="100" stroke="blue" stroke-width="100">
</line>

Path

<path d="
	M50,100
	L131,66
	L259,115
	L339,50
	L400,98
	M350,150
	L100,150" fill="none" stroke="#25B0B0">
</path>

• M - move.
• L - line.
• z - close path.

Text

<svg>
	<text x="100" y="100" fill="red" font-family="arial" font-size="16">
		Look at me, I am a text.
	</text>
</svg>

Quantitative Scale

• Linear scales
• Logarithmic scales
• Power scales

var xScale = d3.scale.linear()
		.domain([0, d3.max(data)])// your data minimum and maximum
		.range([0, 420]);//the pixels to map to
d3.select(".chart")
	.selectAll("div")
		.data([3, 7, 21, 31, 35, 42])
	.enter().append("div")
		.style("width", function(d) { return xScale(d) + "px"; })

var xScale = d3.scale.linear()
			.domain([0, 1000])
			.range([0, 200]);
console.log(xScale(500)); //100
console.log(xScale.domain());//[0, 1000]

Scatterplot

var svg = d3.select('body').append('svg')
	.attr({
				'width': 250,
				'height': 250
		});

var xScale = d3.scale.linear()
	.domain([0, 5])
	.range([0, 200]);

var render = function(data, r, color){
	//Bind data
	var circles = svg.selectAll('circle').data(data);
	
	//Enter and update
	circles.enter().append('circle')
		.attr({
			'cx': function(d){return xScale(d)},
				'cy': 30,
				'r': r,
				'fill': function(){return color || 'red'} 
		});
}

var oldData = [1, 2, 3];
var newData = [1, 2, 3, 4, 5];
render(oldData, 10);
render(newData, 15, 'blue');

jsFiddle

var render = function(data, r, color){
		//Bind Data
		var circles = svg.selectAll('circle').data(data);
		//Enter
		circles.enter().append('circle')
		
		//Update
		circles.attr({
				'cx': function(d){return xScale(d)},
					'cy': 30,
					'r': r,
					'fill': function(){return color || 'red'} 
			})
}

jsFiddle

var oldData = [1, 2, 3, 4, 5];
var newData = [1, 2, 3];
render(oldData, 10);
render(newData, 15, 'blue');

jsFiddle

var render = function(data, r, color){
		//Bind Data
		var circles = svg.selectAll('circle').data(data);

		//Enter
		circles.enter().append('circle')
		
		//Update
		circles.attr({
				'cx': function(d){return xScale(d)},
					'cy': 30,
					'r': r,
					'fill': function(){return color || 'red'} 
			})

		//Remove
		circles.exit().remove();
}

jsFiddle

Recap

• Bind Data.
• Enter and Append.
• Update the attributes.
• Exit and Remove.

Loading External Resources

• d3.json(url[, callback])
• d3.csv(url[, accessor][, callback])
• d3.tsv(url[, accessor][, callback])

CSV

day,donut
Monday,91
Tuesday,23
Wednesday,7
Thursday,4
Friday,82
Saturday,39
Sunday,27

var x = "day";
var y = "donut";

var accessor = function(d) {
	d[y] = parseInt(d[y]); 
	return d;
}

d3.csv("data/data.csv", accessor, function(d) {
	console.log(d);//Array of objects [{day: "Monday", donut: 91},...]
	render(d);
});

jsFiddle

Working with Arrays

• d3.min/d3.max
• d3.reduce
• d3.keys - lists the keys of an associative array.
• d3.merge - merges multiple arrays into one array.
• d3.nest - groups array elements hierarchically.
• d3.quantile(numbers, p)
• d3.deviation(array[, accessor]) - returns the standard deviation

jsFiddle

Reduce

[0, 1, 2, 3].reduce(function(a, b) {
	return a - b;
});//-6

[0, 1, 2, 3].reduceRight(function(a, b) {
	return a - b;
});//0

d3.nest

var donutData = [
	{day: 'Monday', donut: 34, variety: "plain"},
	{day: 'Tuesday', donut: 41, variety: "glazed"}
];

var nestedData = d3.nest()
	.key(function(d){ return d.day;})
	.entries(donutData);

[{
	key: "Monday",
	values: [
		{day: 'Monday', donut: 34, variety: "plain"}
	]},
	{
	key: "Tuesday",
	values: [
		{day: 'Tuesday', donut: 41, variety: "glazed"}
	]}
]

var nestedData = d3.nest()
	.key(function(d){ return d.day;})
	.key(function(d){ return d.variety;})
	.entries(donutData);

[{
		key: "Monday",
		values: [
			{ key: "plain", values: [{day: 'Monday', donut: 34, variety: "plain"}]}
		]},
	{
		key:"Tuesday",
		values: [
			{ key: "glazed", values: [{day: 'Tuesday', donut: 41, variety: "glazed"}]}
		]
	}
]

d3.format

d3.time.format("%Y-%m-%d"); //2015-08-26
d3.format("+,%"); //+2,400%

d3.time.scale - constructs a linear time scale.

var xScale = d3.time.scale()
 .domain([2009-07-13T00:02, 2009-07-13T23:48])
 .rangeRound([0, width]);
 //rangeRound does the same thing as range but rounds the values to integers or begining of dates.

d3.time.intervals - a time interval in local time.

• d3.time.hour
• d3.time.week
• d3.time.monday
• d3.time.year