periplus: toolkit/javascript/d3/examples/axis/axis-multiples.html@c0b4a8b5a012 (annotated)

47 c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	1	<!DOCTYPE html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	2	<html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	3	<head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	4	<script type="text/javascript" src="../../d3.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	5	<script type="text/javascript" src="../../d3.csv.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	6	<script type="text/javascript" src="../../d3.time.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	7	<style type="text/css">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	8
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	9	body {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	10	font: 10px sans-serif;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	11	margin: 0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	12	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	13
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	14	path.line {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	15	fill: none;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	16	stroke: #666;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	17	stroke-width: 1.5px;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	18	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	19
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	20	path.area {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	21	fill: #e7e7e7;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	22	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	23
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	24	.axis path, .axis line {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	25	fill: none;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	26	stroke: #fff;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	27	shape-rendering: crispEdges;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	28	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	29
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	30	</style>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	31	</head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	32	<body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	33	<script type="text/javascript">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	34
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	35	var m = [20, 20, 20, 20],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	36	w = 960 - m[1] - m[3],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	37	h = 140 - m[0] - m[2],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	38	parse = d3.time.format("%b %Y").parse;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	39
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	40	// Scales. Note the inverted domain for the y-scale: bigger is up!
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	41	var x = d3.time.scale().range([0, w]),
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	42	y = d3.scale.linear().range([h, 0]);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	43
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	44	// X-axis.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	45	var xAxis = d3.svg.axis()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	46	.scale(x)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	47	.tickSize(-h);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	48
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	49	// An area generator, for the light fill.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	50	var area = d3.svg.area()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	51	.interpolate("monotone")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	52	.x(function(d) { return x(d.date); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	53	.y0(h)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	54	.y1(function(d) { return y(d.price); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	55
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	56	// A line generator, for the dark stroke.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	57	var line = d3.svg.line()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	58	.interpolate("monotone")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	59	.x(function(d) { return x(d.date); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	60	.y(function(d) { return y(d.price); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	61
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	62	d3.csv("../data/stocks.csv", function(data) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	63
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	64	// Nest values by symbol.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	65	var symbols = d3.nest()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	66	.key(function(d) { return d.symbol; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	67	.entries(data);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	68
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	69	// Parse dates and numbers. We assume values are sorted by date.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	70	// Also compute the maximum price per symbol, needed for the y-domain.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	71	symbols.forEach(function(s) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	72	s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	73	s.maxPrice = d3.max(s.values, function(d) { return d.price; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	74	});
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	75
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	76	// Compute the minimum and maximum date across symbols.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	77	x.domain([
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	78	d3.min(symbols, function(d) { return d.values[0].date; }),
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	79	d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	80	]);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	81
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	82	// Add an SVG element for each symbol, with the desired dimensions and margin.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	83	var svg = d3.select("body").selectAll("svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	84	.data(symbols)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	85	.enter().append("svg:svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	86	.attr("width", w + m[1] + m[3])
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	87	.attr("height", h + m[0] + m[2])
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	88	.append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	89	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	90
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	91	// Add the area path elements. Note: the y-domain is set per element.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	92	svg.append("svg:path")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	93	.attr("class", "area")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	94	.attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	95
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	96	// Add the x-axis.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	97	svg.append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	98	.attr("class", "x axis")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	99	.attr("transform", "translate(0," + h + ")")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	100	.call(xAxis);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	101
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	102	// Add the line path elements. Note: the y-domain is set per element.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	103	svg.append("svg:path")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	104	.attr("class", "line")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	105	.attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	106
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	107	// Add a small label for the symbol name.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	108	svg.append("svg:text")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	109	.attr("x", w - 6)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	110	.attr("y", h - 6)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	111	.attr("text-anchor", "end")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	112	.text(function(d) { return d.key; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	113	});
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	114
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	115	</script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	116	</body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	117	</html>

author	Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
	Thu, 10 Apr 2014 14:20:23 +0200
changeset 47	c0b4a8b5a012
permissions	-rw-r--r--