Parallel coordinates (synthetic data)

_.md

[ Launch: Parallel coordinates (synthetic data) ] 9533388 by tanemaki

config.json

{"description":"Parallel coordinates (synthetic data)","endpoint":"","display":"svg","public":true,"require":[{"name":"parcoords","url":"http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ZZwTWOv.png"}

index.html

<div id="example" class="parcoords" style="width:600px;height:250px"></div>
<br>
<div id="grid"></div>

inlet.js

// The original version of this code is available in the following site (Japanese).
// http://shimz.me/blog/d3-js/3053

// An example using Parallel Coordinates
// http://syntagmatic.github.io/parallel-coordinates/
//
// Press the "Add libraries" button and set the following parameters.
// Title: parcoords
// URL: http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js

var w = 50;
var h = 50;

var svg = d3.select("svg")
    .attr({width:w, height:h});

//ランダムデータセット生成
var dataSet = d3.range(180).map(function() {
    return {
      '年齢': 19 + ~~(Math.random() * 30),
      '家族':  ~~(Math.random() * 2) + ~~(Math.random() * 2)+ ~~(Math.random() * 3),
      '身長':160 +  ~~(Math.random() * 30),
      '体重':40 + ~~(Math.random() * 50),
      'BMI(％)': 7 + ~~(Math.random() * 10) + ~~(Math.random() * 10)+ ~~(Math.random() * 10)+ ~~(Math.random() * 10),
      '年収(万円)':300 +  ~~(Math.random() * 600)
      };
});
 
//パラレルコーディネート用ステージ
var example = d3.select('#example')
    .style({
    width:1200,
    height:400
    });
 
// カラースケール
var blue_to_brown = d3.scale.linear()
    .domain([300, 799,800, 900])
    .range(['blue', 'blue', 'red', 'red'])
    .interpolate(d3.interpolateLab);
 
//パラレルコーディネート生成
var pc = d3.parcoords()('#example')
    .data(dataSet)
    .color(function(d) { return blue_to_brown(d['年収(万円)']); })
    .alpha(0.4)
    .composite('lighter')
    .render()
    .ticks(3) 
    .createAxes()
    .brushable(); //絞り込み可能にする
 
//データテーブル作成
var grid = d3.divgrid();
d3.select('#grid')
  .datum(dataSet.slice(0,10)) //表示件数の指定
  .call(grid)
  .selectAll('.row')
  .on({
      'mouseover': function(d) { pc.highlight([d]) },
      'mouseout': pc.unhighlight
  });
    
// データテーブルの更新
pc.on('brush', function(d) {
  d3.select('#grid')
    .datum(d.slice(0,10))
    .call(grid)
    .selectAll('.row')
    .on({
    'mouseover': function(d) { pc.highlight([d]) },
    'mouseout': pc.unhighlight
    });
});    

style.css

.parcoords > svg, .parcoords > canvas { 
  font: 14px sans-serif;
  position: absolute;
}
.parcoords > canvas {
  pointer-events: none;
}
.parcoords rect.background {
  fill: transparent;
}
.parcoords rect.background:hover {
  fill: rgba(120,120,120,0.2);
}
.parcoords .resize rect {
  fill: rgba(0,0,0,0.1);
}
.parcoords rect.extent {
  fill: rgba(255,255,255,0.25);
  stroke: rgba(0,0,0,0.6);
}
.parcoords .axis line, .parcoords .axis path {
  fill: none;
  stroke: #222;
  shape-rendering: crispEdges;
}
.parcoords canvas {
  opacity: 1;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
}
.parcoords canvas.faded {
  opacity: 0.25;
}