sankey.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <html>
  2. <head>
  3. <title>GDP of the World</title>
  4. <script type="text/javascript" src="../../protovis-d3.2.js"></script>
  5. <script type="text/javascript" src="gdp2009.js"></script>
  6. </head>
  7. <body>
  8. <script type="text/javascript+protovis">
  9. var top20 = [];
  10. for(var i = 0; i < 20; i++) {
  11. top20.push(gdp2009[i]);
  12. }
  13. // define the data
  14. var data = top20;
  15. var text = function(d) d.name;
  16. var value = function(d) d.gdp;
  17. var prev = 0,
  18. sum = 0,
  19. hdif = [];
  20. for(var i = 0; i < data.length; i++) {
  21. sum += value(data[i]);
  22. hdif.push((sum + prev) / 2);
  23. prev = sum;
  24. }
  25. var w = 700,
  26. h = 800,
  27. lMargin = 50,
  28. rMargin = 230,
  29. baseWidth = 400,
  30. scale = 1.9,
  31. steps = [0, 0.2, 0.8, 1],
  32. x = pv.Scale.linear(steps).range(lMargin, w-rMargin),
  33. ws = pv.Scale.linear(0, sum).range(0, baseWidth),
  34. h0 = pv.Scale.linear(0, sum).range(-baseWidth/2, baseWidth/2),
  35. h1 = pv.Scale.linear(0, sum).range(-scale*baseWidth/2, scale*baseWidth/2);
  36. var vis = new pv.Panel()
  37. .width(w)
  38. .height(h)
  39. .strokeStyle("#ccc")
  40. .margin(20);
  41. vis.add(pv.Panel)
  42. .data(hdif)
  43. .add(pv.Line)
  44. .data(steps)
  45. .left(x)
  46. .bottom(function(step, val) h/2 - ((this.index < 2)?h0(val):h1(val)))
  47. .lineWidth(function() ws(value(data[this.parent.index])))
  48. .interpolate("monotone");
  49. vis.add(pv.Label)
  50. .left(x(0))
  51. .bottom(h/2)
  52. .textBaseline("middle")
  53. .textAlign("right")
  54. .font("18px sans-serif")
  55. .text("All");
  56. vis.add(pv.Label)
  57. .data(hdif)
  58. .left(x(1))
  59. .bottom(function(val) h/2 - h1(val))
  60. .textBaseline("middle")
  61. .textAlign("left")
  62. .font(function() (6*Math.log(ws(value(data[this.index])))).toFixed(0) + "px sans-serif")
  63. .text(function() text(data[this.index]));
  64. vis.render();
  65. </script>
  66. </body>
  67. </html>