| author | Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> |
| Fri, 18 Apr 2014 14:31:58 +0200 | |
| changeset 51 | 79833eaa394a |
| parent 47 | c0b4a8b5a012 |
| permissions | -rw-r--r-- |
|
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.geo.js"></script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
7 |
<script type="text/javascript" src="../../d3.geom.js"></script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
8 |
<script type="text/javascript" src="../../d3.layout.js"></script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
9 |
<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
|
10 |
<style type="text/css"> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
11 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
12 |
svg { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
13 |
border: solid 1px #000; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
14 |
display: block; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
15 |
margin: auto; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
16 |
font-family: "Helvetica Neue"; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
17 |
} |
|
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 |
.line { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
20 |
fill: none; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
21 |
stroke: #000; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
22 |
stroke-width: 2px; |
|
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 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
25 |
</style> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
26 |
</head> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
27 |
<body> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
28 |
<script type="text/javascript"> |
|
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 |
var m = [120, 60, 60, 60], |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
31 |
w = 1280 - m[1] - m[3], |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
32 |
h = 720 - m[0] - m[2]; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
33 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
34 |
var x = d3.time.scale().range([0, w - 60]), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
35 |
y = d3.scale.linear().range([h / 4 - 20, 0]), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
36 |
duration = 1500, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
37 |
delay = 500; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
38 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
39 |
var color = d3.scale.category10(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
40 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
41 |
var svg = d3.select("body").append("svg:svg") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
42 |
.attr("width", w + m[1] + m[3]) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
43 |
.attr("height", h + m[0] + m[2]) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
44 |
.append("svg:g") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
45 |
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
46 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
47 |
var stocks, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
48 |
symbols; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
49 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
50 |
// A line generator, for the dark stroke. |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
51 |
var line = d3.svg.line() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
52 |
.interpolate("basis") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
53 |
.x(function(d) { return x(d.date); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
54 |
.y(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 axis = d3.svg.line() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
58 |
.interpolate("basis") |
|
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(h); |
|
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 |
// A area generator, for the dark stroke. |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
63 |
var area = d3.svg.area() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
64 |
.interpolate("basis") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
65 |
.x(function(d) { return x(d.date); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
66 |
.y0(h / 4 - 20) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
67 |
.y1(function(d) { return y(d.price); }); |
|
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 |
d3.csv("../data/stocks.csv", function(data) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
70 |
var parse = d3.time.format("%b %Y").parse, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
71 |
filter = {AAPL: 1, AMZN: 1, MSFT: 1, IBM: 1}; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
72 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
73 |
stocks = data.filter(function(d) { return d.symbol in filter; }); |
|
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 |
// Nest stock values by symbol. |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
76 |
symbols = d3.nest() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
77 |
.key(function(d) { return d.symbol; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
78 |
.entries(stocks); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
79 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
80 |
// 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
|
81 |
// 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
|
82 |
symbols.forEach(function(s) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
83 |
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
|
84 |
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
|
85 |
s.sumPrice = d3.sum(s.values, function(d) { return d.price; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
86 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
87 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
88 |
// Sort by maximum price, descending. |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
89 |
symbols.sort(function(a, b) { return b.maxPrice - a.maxPrice; }); |
|
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 |
// Compute the minimum and maximum date across symbols. |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
92 |
x.domain([ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
93 |
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
|
94 |
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
|
95 |
]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
96 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
97 |
var g = svg.selectAll("g") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
98 |
.data(symbols) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
99 |
.enter().append("svg:g") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
100 |
.attr("class", "symbol"); |
|
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 |
setTimeout(lines, duration); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
103 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
104 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
105 |
function lines() { |
|
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 |
var g = svg.selectAll(".symbol") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
108 |
.attr("transform", function(d, i) { return "translate(0," + i * h / 4 + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
109 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
110 |
g.each(function(d) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
111 |
var e = d3.select(this); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
112 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
113 |
e.append("svg:path") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
114 |
.attr("class", "line"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
115 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
116 |
e.append("svg:circle") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
117 |
.attr("r", 5) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
118 |
.style("fill", function(d) { return color(d.key); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
119 |
.style("stroke", "#000") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
120 |
.style("stroke-width", "2px"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
121 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
122 |
e.append("svg:text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
123 |
.attr("x", 12) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
124 |
.attr("dy", ".31em") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
125 |
.text(d.key); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
126 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
127 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
128 |
function draw(k) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
129 |
g.each(function(d) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
130 |
var e = d3.select(this); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
131 |
y.domain([0, d.maxPrice]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
132 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
133 |
e.select("path") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
134 |
.attr("d", function(d) { return line(d.values.slice(0, k + 1)); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
135 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
136 |
e.selectAll("circle, text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
137 |
.data(function(d) { return [d.values[k], d.values[k]]; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
138 |
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
139 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
140 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
141 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
142 |
var k = 1, n = symbols[0].values.length; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
143 |
d3.timer(function() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
144 |
draw(k); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
145 |
if ((k += 2) >= n - 1) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
146 |
draw(n - 1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
147 |
setTimeout(horizons, 500); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
148 |
return true; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
149 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
150 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
151 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
152 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
153 |
function horizons() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
154 |
svg.insert("svg:defs", ".symbol") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
155 |
.append("svg:clipPath") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
156 |
.attr("id", "clip") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
157 |
.append("svg:rect") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
158 |
.attr("width", w) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
159 |
.attr("height", h / 4 - 20); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
160 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
161 |
var color = d3.scale.ordinal() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
162 |
.range(["#c6dbef", "#9ecae1", "#6baed6"]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
163 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
164 |
var g = svg.selectAll(".symbol") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
165 |
.attr("clip-path", "url(#clip)"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
166 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
167 |
g.select("circle").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
168 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
169 |
.attr("transform", function(d) { return "translate(" + (w - 60) + "," + (-h / 4) + ")"; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
170 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
171 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
172 |
g.select("text").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
173 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
174 |
.attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 4 - 20) + ")"; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
175 |
.attr("dy", "0em"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
176 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
177 |
g.each(function(d) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
178 |
y.domain([0, d.maxPrice]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
179 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
180 |
d3.select(this).selectAll(".area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
181 |
.data(d3.range(3)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
182 |
.enter().insert("svg:path", ".line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
183 |
.attr("class", "area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
184 |
.attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
185 |
.attr("d", area(d.values)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
186 |
.style("fill", function(d, i) { return color(i); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
187 |
.style("fill-opacity", 1e-6); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
188 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
189 |
y.domain([0, d.maxPrice / 3]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
190 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
191 |
d3.select(this).selectAll(".line").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
192 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
193 |
.attr("d", line(d.values)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
194 |
.style("stroke-opacity", 1e-6); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
195 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
196 |
d3.select(this).selectAll(".area").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
197 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
198 |
.style("fill-opacity", 1) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
199 |
.attr("d", area(d.values)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
200 |
.each("end", function() { d3.select(this).style("fill-opacity", null); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
201 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
202 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
203 |
setTimeout(areas, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
204 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
205 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
206 |
function areas() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
207 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
208 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
209 |
axis |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
210 |
.y(h / 4 - 21); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
211 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
212 |
g.select(".line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
213 |
.attr("d", function(d) { return axis(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
214 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
215 |
g.each(function(d) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
216 |
y.domain([0, d.maxPrice]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
217 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
218 |
d3.select(this).select(".line").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
219 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
220 |
.style("stroke-opacity", 1) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
221 |
.each("end", function() { d3.select(this).style("stroke-opacity", null); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
222 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
223 |
d3.select(this).selectAll(".area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
224 |
.filter(function(d, i) { return i; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
225 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
226 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
227 |
.style("fill-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
228 |
.attr("d", area(d.values)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
229 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
230 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
231 |
d3.select(this).selectAll(".area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
232 |
.filter(function(d, i) { return !i; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
233 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
234 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
235 |
.style("fill", color(d.key)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
236 |
.attr("d", area(d.values)); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
237 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
238 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
239 |
svg.select("defs").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
240 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
241 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
242 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
243 |
g.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
244 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
245 |
.each("end", function() { d3.select(this).attr("clip-path", null); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
246 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
247 |
setTimeout(stackedArea, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
248 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
249 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
250 |
function stackedArea() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
251 |
var stack = d3.layout.stack() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
252 |
.values(function(d) { return d.values; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
253 |
.x(function(d) { return d.date; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
254 |
.y(function(d) { return d.price; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
255 |
.out(function(d, y0, y) { d.price0 = y0; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
256 |
.order("reverse"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
257 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
258 |
stack(symbols); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
259 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
260 |
y |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
261 |
.domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))]) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
262 |
.range([h, 0]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
263 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
264 |
line |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
265 |
.y(function(d) { return y(d.price0); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
266 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
267 |
area |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
268 |
.y0(function(d) { return y(d.price0); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
269 |
.y1(function(d) { return y(d.price0 + d.price); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
270 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
271 |
var t = svg.selectAll(".symbol").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
272 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
273 |
.attr("transform", "translate(0,0)") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
274 |
.each("end", function() { d3.select(this).attr("transform", null); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
275 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
276 |
t.select("path.area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
277 |
.attr("d", function(d) { return area(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
278 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
279 |
t.select("path.line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
280 |
.style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
281 |
.attr("d", function(d) { return line(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
282 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
283 |
t.select("text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
284 |
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
285 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
286 |
setTimeout(streamgraph, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
287 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
288 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
289 |
function streamgraph() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
290 |
var stack = d3.layout.stack() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
291 |
.values(function(d) { return d.values; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
292 |
.x(function(d) { return d.date; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
293 |
.y(function(d) { return d.price; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
294 |
.out(function(d, y0, y) { d.price0 = y0; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
295 |
.order("reverse") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
296 |
.offset("wiggle"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
297 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
298 |
stack(symbols); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
299 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
300 |
line |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
301 |
.y(function(d) { return y(d.price0); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
302 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
303 |
var t = svg.selectAll(".symbol").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
304 |
.duration(duration); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
305 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
306 |
t.select("path.area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
307 |
.attr("d", function(d) { return area(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
308 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
309 |
t.select("path.line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
310 |
.style("stroke-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
311 |
.attr("d", function(d) { return line(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
312 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
313 |
t.select("text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
314 |
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
315 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
316 |
setTimeout(overlappingArea, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
317 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
318 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
319 |
function overlappingArea() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
320 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
321 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
322 |
line |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
323 |
.y(function(d) { return y(d.price0 + d.price); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
324 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
325 |
g.select(".line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
326 |
.attr("d", function(d) { return line(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
327 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
328 |
y |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
329 |
.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))]) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
330 |
.range([h, 0]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
331 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
332 |
area |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
333 |
.y0(h) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
334 |
.y1(function(d) { return y(d.price); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
335 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
336 |
line |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
337 |
.y(function(d) { return y(d.price); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
338 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
339 |
var t = g.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
340 |
.duration(duration); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
341 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
342 |
t.select(".line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
343 |
.style("stroke-opacity", 1) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
344 |
.attr("d", function(d) { return line(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
345 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
346 |
t.select(".area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
347 |
.style("fill-opacity", .5) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
348 |
.attr("d", function(d) { return area(d.values); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
349 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
350 |
t.select("text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
351 |
.attr("dy", ".31em") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
352 |
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
353 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
354 |
svg.append("svg:line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
355 |
.attr("class", "line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
356 |
.attr("x1", 0) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
357 |
.attr("x2", w - 60) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
358 |
.attr("y1", h) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
359 |
.attr("y2", h) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
360 |
.style("stroke-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
361 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
362 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
363 |
.style("stroke-opacity", 1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
364 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
365 |
setTimeout(groupedBar, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
366 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
367 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
368 |
function groupedBar() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
369 |
x = d3.scale.ordinal() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
370 |
.domain(symbols[0].values.map(function(d) { return d.date; })) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
371 |
.rangeBands([0, w - 60], .1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
372 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
373 |
var x1 = d3.scale.ordinal() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
374 |
.domain(symbols.map(function(d) { return d.key; })) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
375 |
.rangeBands([0, x.rangeBand()]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
376 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
377 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
378 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
379 |
var t = g.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
380 |
.duration(duration); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
381 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
382 |
t.select(".line") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
383 |
.style("stroke-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
384 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
385 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
386 |
t.select(".area") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
387 |
.style("fill-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
388 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
389 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
390 |
g.each(function(p, j) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
391 |
d3.select(this).selectAll("rect") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
392 |
.data(function(d) { return d.values; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
393 |
.enter().append("svg:rect") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
394 |
.attr("x", function(d) { return x(d.date) + x1(p.key); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
395 |
.attr("y", function(d) { return y(d.price); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
396 |
.attr("width", x1.rangeBand()) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
397 |
.attr("height", function(d) { return h - y(d.price); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
398 |
.style("fill", color(p.key)) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
399 |
.style("fill-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
400 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
401 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
402 |
.style("fill-opacity", 1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
403 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
404 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
405 |
setTimeout(stackedBar, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
406 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
407 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
408 |
function stackedBar() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
409 |
x.rangeRoundBands([0, w - 60], .1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
410 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
411 |
var stack = d3.layout.stack() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
412 |
.values(function(d) { return d.values; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
413 |
.x(function(d) { return d.date; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
414 |
.y(function(d) { return d.price; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
415 |
.out(function(d, y0, y) { d.price0 = y0; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
416 |
.order("reverse"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
417 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
418 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
419 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
420 |
stack(symbols); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
421 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
422 |
y |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
423 |
.domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))]) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
424 |
.range([h, 0]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
425 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
426 |
var t = g.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
427 |
.duration(duration / 2); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
428 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
429 |
t.select("text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
430 |
.delay(symbols[0].values.length * 10) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
431 |
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
432 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
433 |
t.selectAll("rect") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
434 |
.delay(function(d, i) { return i * 10; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
435 |
.attr("y", function(d) { return y(d.price0 + d.price); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
436 |
.attr("height", function(d) { return h - y(d.price); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
437 |
.each("end", function() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
438 |
d3.select(this) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
439 |
.style("stroke", "#fff") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
440 |
.style("stroke-opacity", 1e-6) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
441 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
442 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
443 |
.attr("x", function(d) { return x(d.date); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
444 |
.attr("width", x.rangeBand()) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
445 |
.style("stroke-opacity", 1); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
446 |
}); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
447 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
448 |
setTimeout(transposeBar, duration + symbols[0].values.length * 10 + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
449 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
450 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
451 |
function transposeBar() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
452 |
x |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
453 |
.domain(symbols.map(function(d) { return d.key; })) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
454 |
.rangeRoundBands([0, w], .2); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
455 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
456 |
y |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
457 |
.domain([0, d3.max(symbols.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
458 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
459 |
var stack = d3.layout.stack() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
460 |
.x(function(d, i) { return i; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
461 |
.y(function(d) { return d.price; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
462 |
.out(function(d, y0, y) { d.price0 = y0; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
463 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
464 |
stack(d3.zip.apply(null, symbols.map(function(d) { return d.values; }))); // transpose! |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
465 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
466 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
467 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
468 |
var t = g.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
469 |
.duration(duration / 2); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
470 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
471 |
t.selectAll("rect") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
472 |
.delay(function(d, i) { return i * 10; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
473 |
.attr("y", function(d) { return y(d.price0 + d.price) - 1; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
474 |
.attr("height", function(d) { return h - y(d.price) + 1; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
475 |
.attr("x", function(d) { return x(d.symbol); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
476 |
.attr("width", x.rangeBand()) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
477 |
.style("stroke-opacity", 1e-6); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
478 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
479 |
t.select("text") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
480 |
.attr("x", 0) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
481 |
.attr("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + h + ")"; }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
482 |
.attr("dy", "1.31em") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
483 |
.each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
484 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
485 |
svg.select("line").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
486 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
487 |
.attr("x2", w); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
488 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
489 |
setTimeout(donut, duration / 2 + symbols[0].values.length * 10 + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
490 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
491 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
492 |
function donut() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
493 |
var g = svg.selectAll(".symbol"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
494 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
495 |
g.selectAll("rect").remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
496 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
497 |
var pie = d3.layout.pie() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
498 |
.value(function(d) { return d.sumPrice; }); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
499 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
500 |
var arc = d3.svg.arc(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
501 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
502 |
g.append("svg:path") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
503 |
.style("fill", function(d) { return color(d.key); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
504 |
.data(function() { return pie(symbols); }) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
505 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
506 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
507 |
.tween("arc", arcTween); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
508 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
509 |
g.select("text").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
510 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
511 |
.attr("dy", ".31em"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
512 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
513 |
svg.select("line").transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
514 |
.duration(duration) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
515 |
.attr("y1", 2 * h) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
516 |
.attr("y2", 2 * h) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
517 |
.remove(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
518 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
519 |
function arcTween(d) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
520 |
var path = d3.select(this), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
521 |
text = d3.select(this.parentNode.appendChild(this.previousSibling)), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
522 |
x0 = x(d.data.key), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
523 |
y0 = h - y(d.data.sumPrice); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
524 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
525 |
return function(t) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
526 |
var r = h / 2 / Math.min(1, t + 1e-3), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
527 |
a = Math.cos(t * Math.PI / 2), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
528 |
xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
529 |
yy = ((a) * h + (1 - a) * h / 2), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
530 |
f = { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
531 |
innerRadius: r - x.rangeBand() / (2 - a), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
532 |
outerRadius: r, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
533 |
startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
534 |
endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
535 |
}; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
536 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
537 |
path.attr("transform", "translate(" + xx + "," + yy + ")"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
538 |
path.attr("d", arc(f)); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
539 |
text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
540 |
}; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
541 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
542 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
543 |
setTimeout(donutExplode, duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
544 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
545 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
546 |
/* |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
547 |
function donutTransition() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
548 |
var r0 = h / 2 - x.rangeBand() / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
549 |
r1 = h / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
550 |
pie1 = d3.layout.pie().value(function(d) { return d.sumPrice; })(symbols), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
551 |
pie2 = d3.layout.pie().value(function(d) { return d.maxPrice; })(symbols), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
552 |
arc = d3.svg.arc(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
553 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
554 |
svg.selectAll(".symbol path") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
555 |
.map(function(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
556 |
d = pie1[i]; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
557 |
d.innerRadius = r0; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
558 |
d.outerRadius = r1; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
559 |
d.next = pie2[i]; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
560 |
return d; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
561 |
}) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
562 |
.each(transitionSplit); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
563 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
564 |
function transitionSplit(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
565 |
d3.select(this).transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
566 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
567 |
.tween("arc", tweenArc({ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
568 |
innerRadius: i & 1 ? r0 : (r0 + r1) / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
569 |
outerRadius: i & 1 ? (r0 + r1) / 2 : r1 |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
570 |
})) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
571 |
.each("end", transitionRotate); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
572 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
573 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
574 |
function transitionRotate(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
575 |
var a0 = d.next.startAngle + d.next.endAngle, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
576 |
a1 = d.startAngle - d.endAngle; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
577 |
d3.select(this).transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
578 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
579 |
.tween("arc", tweenArc({ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
580 |
startAngle: (a0 + a1) / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
581 |
endAngle: (a0 - a1) / 2 |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
582 |
})) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
583 |
.each("end", transitionResize); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
584 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
585 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
586 |
function transitionResize(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
587 |
d3.select(this).transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
588 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
589 |
.tween("arc", tweenArc({ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
590 |
startAngle: d.next.startAngle, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
591 |
endAngle: d.next.endAngle |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
592 |
})) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
593 |
.each("end", transitionUnite); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
594 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
595 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
596 |
function transitionUnite(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
597 |
d3.select(this).transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
598 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
599 |
.tween("arc", tweenArc({ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
600 |
innerRadius: r0, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
601 |
outerRadius: r1 |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
602 |
})); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
603 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
604 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
605 |
function tweenArc(b) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
606 |
return function(a) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
607 |
var path = d3.select(this), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
608 |
text = d3.select(this.nextSibling), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
609 |
i = d3.interpolate(a, b); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
610 |
for (var key in b) a[key] = b[key]; // update data |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
611 |
return function(t) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
612 |
var a = i(t); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
613 |
path.attr("d", arc(a)); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
614 |
text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
615 |
}; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
616 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
617 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
618 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
619 |
setTimeout(donutExplode, 2 * duration + delay); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
620 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
621 |
*/ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
622 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
623 |
function donutExplode() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
624 |
var r0a = h / 2 - x.rangeBand() / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
625 |
r1a = h / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
626 |
r0b = 2 * h - x.rangeBand() / 2, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
627 |
r1b = 2 * h, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
628 |
arc = d3.svg.arc(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
629 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
630 |
svg.selectAll(".symbol path") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
631 |
.each(transitionExplode); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
632 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
633 |
function transitionExplode(d, i) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
634 |
d.innerRadius = r0a; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
635 |
d.outerRadius = r1a; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
636 |
d3.select(this).transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
637 |
.duration(duration / 2) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
638 |
.tween("arc", tweenArc({ |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
639 |
innerRadius: r0b, |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
640 |
outerRadius: r1b |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
641 |
})); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
642 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
643 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
644 |
function tweenArc(b) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
645 |
return function(a) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
646 |
var path = d3.select(this), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
647 |
text = d3.select(this.nextSibling), |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
648 |
i = d3.interpolate(a, b); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
649 |
for (var key in b) a[key] = b[key]; // update data |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
650 |
return function(t) { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
651 |
var a = i(t); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
652 |
path.attr("d", arc(a)); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
653 |
text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
654 |
}; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
655 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
656 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
657 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
658 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
659 |
</script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
660 |
</body> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
661 |
</html> |