| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <html>
- <head>
- <title>Cars</title>
- <link type="text/css" rel="stylesheet" href="../ex.css"/>
- <script type="text/javascript" src="../../protovis-r3.2.js"></script>
- <script type="text/javascript" src="cars.js"></script>
- <style type="text/css">
- #fig {
- width: 880px;
- height: 460px;
- }
- #title {
- position: absolute;
- top: 70px;
- left: 200px;
- padding: 10px;
- background: white;
- }
- large {
- font-size: medium;
- }
- </style>
- </head>
- <body><div id="center"><div id="fig">
- <script type="text/javascript+protovis">
- /* The dimensions to visualize, in order. */
- var dims = [
- "cylinders",
- "displacement",
- "weight",
- "horsepower",
- "acceleration",
- "mpg",
- "year",
- "origin"
- ];
- /* Sizing and scales. */
- var w = 840,
- h = 420,
- color = pv.Colors.category10(),
- x = pv.Scale.ordinal(dims).splitFlush(0, w),
- y = pv.dict(dims, function(t) pv.Scale.linear()
- .domain(cars.filter(function(d) !isNaN(d[t])), function(d) d[t])
- .range(0, h));
- /* The root panel. */
- var vis = new pv.Panel()
- .width(w)
- .height(h)
- .margin(20)
- .bottom(40);
- /* Rule and labels per dimension. */
- var rule = vis.add(pv.Rule)
- .data(dims)
- .left(x)
- .strokeStyle(color.by(pv.index))
- .lineWidth(2);
- rule.anchor("top").add(pv.Label)
- .text(function(t) y[t].domain()[0]);
- rule.anchor("bottom").add(pv.Label)
- .text(function(t) y[t].domain()[1]);
- rule.anchor("bottom").add(pv.Label)
- .textStyle(function() color(this.index).darker())
- .textMargin(14);
- /* Parallel coordinates. */
- vis.add(pv.Panel)
- .data(cars)
- .add(pv.Line)
- .data(dims)
- .left(function(t, d) x(t))
- .bottom(function(t, d) y[t](d[t]))
- .strokeStyle("rgba(0, 0, 0, .2)")
- .lineWidth(1);
- vis.render();
- </script>
- </div></div></body>
- </html>
|