cars.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <html>
  2. <head>
  3. <title>Cars</title>
  4. <link type="text/css" rel="stylesheet" href="../ex.css"/>
  5. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  6. <script type="text/javascript" src="cars.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. width: 880px;
  10. height: 460px;
  11. }
  12. #title {
  13. position: absolute;
  14. top: 70px;
  15. left: 200px;
  16. padding: 10px;
  17. background: white;
  18. }
  19. large {
  20. font-size: medium;
  21. }
  22. </style>
  23. </head>
  24. <body><div id="center"><div id="fig">
  25. <script type="text/javascript+protovis">
  26. /* The dimensions to visualize, in order. */
  27. var dims = [
  28. "cylinders",
  29. "displacement",
  30. "weight",
  31. "horsepower",
  32. "acceleration",
  33. "mpg",
  34. "year",
  35. "origin"
  36. ];
  37. /* Sizing and scales. */
  38. var w = 840,
  39. h = 420,
  40. color = pv.Colors.category10(),
  41. x = pv.Scale.ordinal(dims).splitFlush(0, w),
  42. y = pv.dict(dims, function(t) pv.Scale.linear()
  43. .domain(cars.filter(function(d) !isNaN(d[t])), function(d) d[t])
  44. .range(0, h));
  45. /* The root panel. */
  46. var vis = new pv.Panel()
  47. .width(w)
  48. .height(h)
  49. .margin(20)
  50. .bottom(40);
  51. /* Rule and labels per dimension. */
  52. var rule = vis.add(pv.Rule)
  53. .data(dims)
  54. .left(x)
  55. .strokeStyle(color.by(pv.index))
  56. .lineWidth(2);
  57. rule.anchor("top").add(pv.Label)
  58. .text(function(t) y[t].domain()[0]);
  59. rule.anchor("bottom").add(pv.Label)
  60. .text(function(t) y[t].domain()[1]);
  61. rule.anchor("bottom").add(pv.Label)
  62. .textStyle(function() color(this.index).darker())
  63. .textMargin(14);
  64. /* Parallel coordinates. */
  65. vis.add(pv.Panel)
  66. .data(cars)
  67. .add(pv.Line)
  68. .data(dims)
  69. .left(function(t, d) x(t))
  70. .bottom(function(t, d) y[t](d[t]))
  71. .strokeStyle("rgba(0, 0, 0, .2)")
  72. .lineWidth(1);
  73. vis.render();
  74. </script>
  75. </div></div></body>
  76. </html>