Skip to content

Commit ae0d06f

Browse files
mbostockmbostock
committed
Checkpoint examples.
1 parent fbf9831 commit ae0d06f

23 files changed

Lines changed: 2106 additions & 0 deletions

‎examples/area/area.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<html>
2+
<head>
3+
<title>Area Chart</title>
4+
<script type="text/javascript" src="../../d3.js"></script>
5+
<style type="text/css">
6+
7+
body {
8+
font: 10px sans-serif;
9+
}
10+
11+
.rule line {
12+
stroke: #eee;
13+
shape-rendering: crispEdges;
14+
}
15+
16+
.rule line.axis {
17+
stroke: #000;
18+
}
19+
20+
.area {
21+
fill: lightsteelblue;
22+
}
23+
24+
.line, circle.area {
25+
fill: none;
26+
stroke: steelblue;
27+
stroke-width: 1.5px;
28+
}
29+
30+
circle.area {
31+
fill: #fff;
32+
}
33+
34+
</style>
35+
</head>
36+
<body>
37+
<script type="text/javascript">
38+
39+
var data = range(20).map(function(i) {
40+
return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
41+
});
42+
43+
var w = 450,
44+
h = 275,
45+
p = 20;
46+
47+
var vis = d3.select("body")
48+
.add("svg:svg")
49+
.attr("width", w + p * 2)
50+
.attr("height", h + p * 2)
51+
.add("svg:g")
52+
.attr("transform", "translate(" + p + "," + p + ")");
53+
54+
var rules = vis.selectAll("g.rule")
55+
.data(range(11))
56+
.enter.add("svg:g")
57+
.attr("class", "rule");
58+
59+
rules.add("svg:line")
60+
.attr("x1", function(d) { return d / 10 * w; })
61+
.attr("x2", function(d) { return d / 10 * w; })
62+
.attr("y1", 0)
63+
.attr("y2", h - 1);
64+
65+
rules.add("svg:line")
66+
.attr("class", function(d) { return d ? null : "axis"; })
67+
.attr("y1", function(d) { return (1 - d / 10) * h; })
68+
.attr("y2", function(d) { return (1 - d / 10) * h; })
69+
.attr("x1", 0)
70+
.attr("x2", w + 1);
71+
72+
rules.add("svg:text")
73+
.attr("x", function(d) { return d / 10 * w; })
74+
.attr("y", h + 3)
75+
.attr("dy", ".71em")
76+
.attr("text-anchor", "middle")
77+
.text(function(d) { return (d / 10).toFixed(1); });
78+
79+
rules.add("svg:text")
80+
.attr("y", function(d) { return (1 - d / 10) * h; })
81+
.attr("x", -3)
82+
.attr("dy", ".35em")
83+
.attr("text-anchor", "end")
84+
.text(function(d) { return (d / 10).toFixed(1); });
85+
86+
vis.add("svg:path")
87+
.attr("class", "area")
88+
.attr("d", area(data));
89+
90+
vis.add("svg:path")
91+
.attr("class", "line")
92+
.attr("d", line(data));
93+
94+
vis.selectAll("circle.area")
95+
.data(data)
96+
.enter.add("svg:circle")
97+
.attr("class", "area")
98+
.attr("cx", function(d) { return d.x * w; })
99+
.attr("cy", function(d) { return (1 - d.y) * h; })
100+
.attr("r", 3.5);
101+
102+
vis.apply();
103+
104+
function range(n) {
105+
var array = [];
106+
for (var i = 0; i < n; i++) array.push(i);
107+
return array;
108+
}
109+
110+
function line(points) {
111+
var d = [],
112+
i = 1,
113+
p = points[0];
114+
d.push("M", p.x * w, ",", (1 - p.y) * h);
115+
while (p = points[i++]) d.push("L", p.x * w, ",", (1 - p.y) * h);
116+
return d.join("");
117+
}
118+
119+
function area(points) {
120+
var d = [],
121+
i = 1,
122+
p = points[0];
123+
d.push("M", p.x * w, "," + (h - 1) + "V", (1 - p.y) * h);
124+
while (p = points[i++]) d.push("L", p.x * w, ",", (1 - p.y) * h);
125+
d.push("V" + (h - 1) + "Z");
126+
return d.join("");
127+
}
128+
129+
</script>
130+
</body>
131+
</html>

‎examples/bar/bar.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<html>
2+
<head>
3+
<title>Bar Chart</title>
4+
<script type="text/javascript" src="../../d3.js"></script>
5+
<style type="text/css">
6+
7+
body {
8+
font: 10px sans-serif;
9+
}
10+
11+
svg {
12+
shape-rendering: crispEdges;
13+
}
14+
15+
</style>
16+
</head>
17+
<body>
18+
<script type="text/javascript">
19+
20+
var data = range(10).map(function(i) {
21+
return {index: i, value: Math.random()};
22+
});
23+
24+
var vis = d3.select("body")
25+
.add("svg:svg")
26+
.attr("width", 450)
27+
.attr("height", 275)
28+
.add("svg:g")
29+
.attr("transform", "translate(20,0)");
30+
31+
var bars = vis.selectAll("g.bar")
32+
.data(data)
33+
.enter.add("svg:g")
34+
.attr("class", "bar")
35+
.attr("transform", function(d) { return "translate(0," + d.index * 23 + ")"; });
36+
37+
bars.add("svg:rect")
38+
.attr("fill", "steelblue")
39+
.attr("width", function(d) { return d.value * 430; })
40+
.attr("height", 20);
41+
42+
bars.add("svg:text")
43+
.attr("x", function(d) { return d.value * 430; })
44+
.attr("y", 10)
45+
.attr("dx", -6)
46+
.attr("dy", ".35em")
47+
.attr("fill", "white")
48+
.attr("text-anchor", "end")
49+
.text(function(d) { return d.value.toFixed(2); });
50+
51+
bars.add("svg:text")
52+
.attr("x", 0)
53+
.attr("y", 10)
54+
.attr("dx", -6)
55+
.attr("dy", ".35em")
56+
.attr("text-anchor", "end")
57+
.text(function(d) { return String.fromCharCode(65 + d.index); });
58+
59+
var rules = vis.selectAll("g.rule")
60+
.data(range(10))
61+
.enter.add("svg:g")
62+
.attr("class", "rule")
63+
.attr("transform", function(d) { return "translate(" + (d / 10) * 430 + ",0)"; });
64+
65+
rules.add("svg:line")
66+
.attr("y1", 230)
67+
.attr("y2", 236)
68+
.attr("stroke", "black");
69+
70+
rules.add("svg:line")
71+
.attr("y1", 0)
72+
.attr("y2", 230)
73+
.attr("stroke", "white")
74+
.attr("stroke-opacity", .3);
75+
76+
rules.add("svg:text")
77+
.attr("y", 239)
78+
.attr("dy", ".71em")
79+
.attr("text-anchor", "middle")
80+
.text(function(d) { return (d / 10).toFixed(1); });
81+
82+
vis.add("svg:line")
83+
.attr("y1", 0)
84+
.attr("y2", 230)
85+
.attr("stroke", "black");
86+
87+
vis.apply();
88+
89+
function range(n) {
90+
var array = [];
91+
for (var i = 0; i < n; i++) array.push(i);
92+
return array;
93+
}
94+
95+
</script>
96+
</body>
97+
</html>

‎examples/donut/donut.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<html>
2+
<head>
3+
<title>Donut Chart</title>
4+
<script type="text/javascript" src="../../d3.js"></script>
5+
<style type="text/css">
6+
7+
body {
8+
font: 10px sans-serif;
9+
}
10+
11+
</style>
12+
</head>
13+
<body>
14+
<script type="text/javascript">
15+
16+
var w = 400,
17+
h = 400,
18+
r = Math.min(w, h) / 2,
19+
n = 10,
20+
data = normalize(range(n).map(Math.random));
21+
22+
var colors = [
23+
"#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c",
24+
"#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5",
25+
"#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f",
26+
"#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"
27+
];
28+
29+
var vis = d3.select("body")
30+
.add("svg:svg")
31+
.attr("width", w)
32+
.attr("height", h);
33+
34+
var arcs = vis.selectAll("g.arc")
35+
.data(data)
36+
.enter.add("svg:g")
37+
.attr("class", "arc")
38+
.attr("transform", "translate(" + r + "," + r + ")");
39+
40+
arcs.add("svg:path")
41+
.attr("fill", index(colors))
42+
.attr("d", arc);
43+
44+
vis.apply();
45+
46+
var update = d3.selectAll("g.arc > path")
47+
.data(function() {
48+
var prev = data,
49+
next = data = normalize(range(n).map(Math.random)),
50+
i = 0;
51+
for (; i < n; ++i) prev[i].next = next[i];
52+
return prev;
53+
})
54+
.transition() // 1. Wedges split into two rings.
55+
.tweenData(function(d) {
56+
return {
57+
innerRadius: this.index & 1 ? r * .6 : r * .8,
58+
outerRadius: this.index & 1 ? r * .8 : r
59+
};
60+
})
61+
.attr("d", arc)
62+
.end
63+
.transition() // 2. Wedges translate to be center on their final position.
64+
.tweenData(function(d) {
65+
var a0;
66+
return {
67+
startAngle: a0 = (d.next.startAngle + d.next.endAngle - d.endAngle + d.startAngle) / 2,
68+
endAngle: a0 + d.endAngle - d.startAngle
69+
};
70+
})
71+
.attr("d", arc)
72+
.end
73+
.transition() // 3. Wedges then update their values, changing size.
74+
.tweenData(function(d) {
75+
return {
76+
startAngle: d.next.startAngle,
77+
endAngle: d.next.endAngle
78+
};
79+
})
80+
.attr("d", arc)
81+
.end
82+
.transition() // 4. Wedges reunite into a single ring.
83+
.tweenData(function(d) {
84+
return {
85+
innerRadius: d.next.innerRadius,
86+
outerRadius: d.next.outerRadius
87+
};
88+
})
89+
.attr("d", arc);
90+
91+
window.addEventListener("keypress", update.apply, false);
92+
93+
function range(n) {
94+
var array = [];
95+
for (var i = 0; i < n; i++) array.push(i);
96+
return array;
97+
}
98+
99+
function normalize(array) {
100+
var k = (2 * Math.PI) / array.reduce(function(p, d) { return p + d; }, 0),
101+
a = 0;
102+
return array.map(function(d, i) {
103+
return {
104+
innerRadius: r * .6,
105+
outerRadius: r,
106+
startAngle: a,
107+
endAngle: a += d * k
108+
};
109+
});
110+
}
111+
112+
function arc(d) {
113+
var r0 = d.innerRadius,
114+
r1 = d.outerRadius,
115+
a0 = d.startAngle - Math.PI / 2,
116+
a1 = d.endAngle - Math.PI / 2,
117+
da = a1 - a0,
118+
c0 = Math.cos(a0),
119+
s0 = Math.sin(a0),
120+
c1 = Math.cos(a1),
121+
s1 = Math.sin(a1);
122+
return "M" + r1 * c0 + "," + r1 * s0
123+
+ "A" + r1 + "," + r1 + " 0 "
124+
+ ((da < Math.PI) ? "0" : "1") + ",1 "
125+
+ r1 * c1 + "," + r1 * s1
126+
+ "L" + r0 * c1 + "," + r0 * s1
127+
+ "A" + r0 + "," + r0 + " 0 "
128+
+ ((da < Math.PI) ? "0" : "1") + ",0 "
129+
+ r0 * c0 + "," + r0 * s0 + "Z";
130+
}
131+
132+
function index(colors) {
133+
return function(d) {
134+
return colors[this.index % colors.length];
135+
};
136+
}
137+
138+
</script>
139+
</body>
140+
</html>

0 commit comments

Comments
 (0)