forked from mbostock/protovis
/
jobs.html
71 lines (60 loc) · 1.76 KB
/
jobs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
<title>Job Voyager</title>
<link type="text/css" rel="stylesheet" href="../ex.css"/>
<script type="text/javascript" src="../../protovis.js"></script>
<script type="text/javascript" src="jobs.js"></script>
<style type="text/css">
#fig {
width: 860px;
height: 580px;
}
</style>
</head>
<body>
<div id="center"><div id="fig">
<script type="text/javascript+protovis">
/* Flatten the tree into an array to faciliate transformation. */
var jobs = pv.flatten(jobs)
.key("job")
.key("gender", function(i) i.charAt(0))
.key("year", function(i) years[i])
.key("people")
.array();
/* Compute per-year and per-job totals. */
var sumByYear = pv.nest(jobs)
.key(function(d) d.year)
.rollup(function(v) pv.sum(v, function(d) d.people)),
sumByJob = pv.nest(jobs)
.key(function(d) d.gender + d.job)
.rollup(function(v) pv.sum(v, function(d) d.people));
var w = 800,
h = 480,
x = pv.Scale.linear(years).range(0, w),
y = pv.Scale.linear(0, sumByYear[2000]).range(0, h),
c = pv.Scale.ordinal("men", "women").range("#33f", "#f33")
a = pv.Scale.linear(pv.values(sumByJob)).range(.4, .8);
var vis = new pv.Panel()
.width(w)
.height(h)
.margin(30);
vis.add(pv.Rule)
.data(x.ticks())
.left(x)
.strokeStyle("#ccc")
.anchor("bottom").add(pv.Label);
vis.add(pv.Rule)
.bottom(0);
var area = vis.add(pv.Layout.Stack)
.layers(pv.nest(jobs).key(function(d) d.gender + d.job).entries())
.values(function(d) d.values)
.x(function(d) x(d.year))
.y(function(d) y(d.people))
.order("reverse")
.offset("expand")
.layer.add(pv.Area)
.fillStyle(function(d, p) c(d.gender).alpha(a(sumByJob[p.key])));
vis.render();
</script>
</div></div></body>
</html>