PCP example

Parallel Coordinates Plot Example

Here is an example of what a Parallel Coordinates Plot looks like with building simulation data. You can try filtering data by selecting a region on a coordinate. This plot type is excellent for visually analyzing sensitive design parameters to given performance indicators.

Sample chart

Back to Data visualization

(If the chart below does not show, please reload this page.)

<html>

<head>
  <title>Parallel Coordinates</title>
  <script type="text/javascript" src="/vis/pcp/protovis.js"></script>
  <script type="text/javascript" src="/vis/pcp/data.js"></script>
  <style type="text/css">

#fig {

width: 880px;
height: 560px;

}

#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">

var dims = pv.keys(units);

/* Sizing and scales. */ var w = 820,

  h = 520,
  fudge = 0.5,
  x = pv.Scale.ordinal(dims).splitFlush(0, w),
  y = pv.dict(dims, function(t) pv.Scale.linear(
      cars.filter(function(d) !isNaN(d[t])),
      function(d) Math.floor(d[t])-fudge,
      function(d) Math.ceil(d[t]) +fudge
      ).range(0, h)),
  c = pv.dict(dims, function(t) pv.Scale.linear(
      cars.filter(function(d) !isNaN(d[t])),
      function(d) Math.floor(d[t])-fudge,
      function(d) Math.ceil(d[t]) +fudge
      ).range("steelblue", "brown"));

/* Interaction state. */ var filter = pv.dict(dims, function(t) {

  return {min: y[t].domain()[0], max: y[t].domain()[1]};
}), active = "model";

/* The root panel. */ var vis = new pv.Panel()

  .width(w)
  .height(h)
  .left(30)
  .right(30)
  .top(30)
  .bottom(20);

The parallel coordinates display. vis.add(pv.Panel) .data(cars) .visible(function(d) dims.every(function(t) (d[t] >= filter[t].min) && (d[t] ⇐ filter[t].max))) .add(pv.Line) .data(dims) .left(function(t, d) x(t)) .bottom(function(t, d) y[t](d[t])) .strokeStyle(“#ddd”) .lineWidth(1) .antialias(false); Rule per dimension. rule = vis.add(pv.Rule)

  .data(dims)
  .left(x);

Dimension label rule.anchor(“top”).add(pv.Label) .top(-12) .font(“bold 10px sans-serif”) .text(function(d) units[d].name); The parallel coordinates display. var change = vis.add(pv.Panel);

var line = change.add(pv.Panel)

  .data(cars)
  .visible(function(d) dims.every(function(t)
      (d[t] >= filter[t].min) && (d[t] <= filter[t].max)))
.add(pv.Line)
  .data(dims)
  .left(function(t, d) x(t))
  .bottom(function(t, d) y[t](d[t]))
  .strokeStyle(function(t, d) c[active](d[active]))
  .lineWidth(1);

Updater for slider and resizer. function update(d) { var t = d.dim; filter[t].min = Math.max(y[t].domain()[0], y[t].invert(h - d.y - d.dy)); filter[t].max = Math.min(y[t].domain()[1], y[t].invert(h - d.y)); active = t; change.render(); return false; } Updater for slider and resizer. function selectAll(d) {

if (d.dy < 3) {
  var t = d.dim;
  filter[t].min = Math.max(y[t].domain()[0], y[t].invert(0));
  filter[t].max = Math.min(y[t].domain()[1], y[t].invert(h));
  d.y = 0; d.dy = h;
  active = t;
  change.render();
}
return false;

}

/* Handle select and drag */ var handle = change.add(pv.Panel)

  .data(dims.map(function(dim) { return {y:0, dy:h, dim:dim}; }))
  .left(function(t) x(t.dim) - 30)
  .width(60)
  .fillStyle("rgba(0,0,0,.001)")
  .cursor("crosshair")
  .event("mousedown", pv.Behavior.select())
  .event("select", update)
  .event("selectend", selectAll)
.add(pv.Bar)
  .left(25)
  .top(function(d) d.y)
  .width(10)
  .height(function(d) d.dy)
  .fillStyle(function(t) t.dim == active
      ? c[t.dim]((filter[t.dim].max + filter[t.dim].min) / 2)
      : "hsla(0,0,50%,.5)")
  .strokeStyle("white")
  .cursor("move")
  .event("mousedown", pv.Behavior.drag())
  .event("dragstart", update)
  .event("drag", update);

handle.anchor(“bottom”).add(pv.Label)

  .textBaseline("top")
  .text(function(d) filter[d.dim].min.toFixed(0) + units[d.dim].unit);

handle.anchor(“top”).add(pv.Label)

  .textBaseline("bottom")
  .text(function(d) filter[d.dim].max.toFixed(0) + units[d.dim].unit);

vis.render();

  </script>
</div></div></body>

</html>

Chart, PCP, Protovis