jobs.html 1.8 KB

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