examples/cars/cars.html

<html>
  <head>
    <title>Cars</title>
    <link type="text/css" rel="stylesheet" href="../ex.css"/>
    <script type="text/javascript" src="../../protovis.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>