block by emeeks 4497604

Yearly Parallel Coordinates

Full Screen

Parallel coordinates using time for coordinates.

Interactions done with the brush component

Based on d3.js Parallel Coordinates

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Canvas Parallel Coordinates</title>
    <style type="text/css">

svg {
  font: 10px sans-serif;
}

canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}

#chart {
  position: relative;
    display: block
    width: 100%;
    height: 500px;
}

#table {
  position: relative;
    display: block
    width: 100%;
    height: 300px;
    overflow:auto
  
}
.brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  shape-rendering: crispEdges;
}

line {
  stroke-width: 3;
}

path {
  stroke-width: 3;
}

.axis line, .axis path {
  stroke-width: .5;
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  text-shadow: 0 1px 0 #fff;
}

    </style>
  </head>
  <body>
    <div id="chart" height="500">
      <canvas id="background"></canvas>
      <canvas id="foreground"></canvas>
      <svg></svg>
    </div>
    <div id="table">    
    </div>
    <script type="text/javascript" src="//mbostock.github.com/d3/d3.v2.js"></script>
    <script type="text/javascript">

var m = [30, 10, 10, 10],
    w = 960 - m[1] - m[3],
    h = 500 - m[0] - m[2];

var x = d3.scale.ordinal().rangePoints([0, w], 1),
    y = {};

var line = d3.svg.line(),
    axis = d3.svg.axis().orient("left"),
    background,
    foreground;

d3.selectAll("canvas")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .style("padding", m.join("px ") + "px");

foreground = document.getElementById('foreground').getContext('2d');
background = document.getElementById('background').getContext('2d');

foreground.strokeStyle = "rgba(0,100,160,0.8)";
background.strokeStyle = "rgba(0,0,0,0.02)";

var svg = d3.select("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.csv("foodstuff.csv", function(foodstuff) {

  // Extract the list of dimensions and create a scale for each.
  x.domain(dimensions = d3.keys(foodstuff[0]).filter(function(d) {
    return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(foodstuff, function(p) { return +p[d]; }))
        .range([h, 0]));
  }));

  // Render full foreground and background
  foodstuff.map(function(d) {
    path(d, background);
    path(d, foreground);
  });

  // Add a group element for each dimension.
  var g = svg.selectAll(".dimension")
      .data(dimensions)
    .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

  // Add an axis and title.
  g.append("svg:g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
    .append("svg:text")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(String);

  // Add and store a brush for each axis.
  g.append("svg:g")
      .attr("class", "brush")
      .each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
    .selectAll("rect")
      .attr("x", -8)
      .attr("width", 16);

  // Handles a brush event, toggling the display of foreground lines.
  function brush() {
    var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
        extents = actives.map(function(p) { return y[p].brush.extent(); });

    // Get lines within extents
    var selected = [];
    foodstuff.map(function(d) {
      return actives.every(function(p, i) {
        return extents[i][0] <= d[p] && d[p] <= extents[i][1];
      }) ? selected.push(d) : null;
    });

    rows
    .style("display", function(d) {
    	      return actives.every(function(p, i) {
    	        return extents[i][0] <= d[p] && d[p] <= extents[i][1];
    	      }) ? null : "none";
  })

    	      
//    .style("display", function(d,i) {return i < 20 ? "none" : null })

    // Render selected lines
    foreground.clearRect(0,0,w+1,h+1);
    selected.map(function(d) {
      path(d, foreground);
    });
  }
  
      var columns = d3.keys(foodstuff[0]);

  	  var table = d3.select("#table").append("table"),
		    thead = table.append("thead");
		    tbody = table.append("tbody");
        
        thead.append("tr")
		    .selectAll("th")
		    .data(columns)
		    .enter()
		    .append("th")
		    .text(function(column) { return column; });
        
        rows = tbody.selectAll("tr")
		    .data(foodstuff)
		    .enter()
		    .append("tr")
		    .style("display", null);

		  //creates a cell for each column in each row
		  cells = rows.selectAll("td")
		    .data(function(row) {
		        return columns.map(function(column) {
		          return {column: column, value: row[column]};
		        });
		      })
		    .enter()
		    .append("td")
		      .html(function(d,i) { return i == 0 ? '* '+d.value+'' : d.value; });
});

function path(d, ctx) {
  ctx.beginPath();
  dimensions.map(function(p,i) {
    if (i == 0) {
      ctx.moveTo(x(p),y[p](d[p]));
    } else { 
      ctx.lineTo(x(p),y[p](d[p]));
    }
  });
  ctx.stroke();
};

    </script>
  </body>
</html>

foodstuff.csv

name,1646,1649,1662,1663
unk,1.0000,0.0000,0.0000,0.0058
bustard,1.0000,0.0000,0.0000,0.0061
cow,1.0000,0.0039,0.0000,0.0090
Big sheep cheese,1.0000,0.0000,0.0000,0.0090
snow bunting,1.0000,0.0000,0.0000,0.0165
wild turkey (Gallina Meleagris Linn),1.0000,0.0021,0.0009,0.0235
cow tongue,1.0000,0.0149,0.0000,0.0589
corned beef,1.0000,0.0000,0.0000,0.0652
Moose & Calves,1.0000,0.0000,0.0000,0.0725
Deer calves,1.0000,0.0000,0.0000,0.0909
capon (castrated rooster),1.0000,0.0094,0.0021,0.0917
trush,1.0000,0.0000,0.0000,0.0968
roe deer,1.0000,0.0000,0.0000,0.1167
turbot,1.0000,0.0000,0.0000,0.1176
hens,1.0000,0.0000,0.0011,0.1278
pig heads,1.0000,0.0000,0.0000,0.1902
young boar,1.0000,0.0000,0.0000,0.2209
dried geese,1.0000,0.0483,0.0000,0.2458
capercaillie,1.0000,0.0000,0.0000,0.3127
roasted pig,1.0000,0.0000,0.0000,0.4294
wild boar,1.0000,0.0000,0.0000,0.5000
fieldfare,1.0000,0.0000,0.0000,0.6160
coot,1.0000,0.0000,0.0000,0.7167
oxen,1.0000,0.0351,0.0221,0.7380
sandpipers?,1.0000,0.0000,0.0000,0.7954
suckling pig,1.0000,0.0000,0.0058,0.8087
black grouse,1.0000,0.0000,0.0000,0.8642
cow trunk?,0.0121,0.0000,0.0202,1.0000
veal,0.5660,0.0030,0.0109,1.0000
mutton,0.5135,0.0011,0.0071,1.0000
sheep,0.3352,0.0009,0.0018,1.0000
lamb,0.0373,0.0000,0.0007,1.0000
fattened pig,0.0000,0.0000,0.0000,1.0000
geese,0.5035,0.0000,0.0243,1.0000
eggs,0.0000,0.0000,0.0185,1.0000
game,0.7714,0.0000,0.0143,1.0000
Moose and pickeled game,0.0000,0.0000,0.0000,1.0000
Deer,0.0000,0.0000,0.0000,1.0000
rabits,0.1214,0.0000,0.0000,1.0000
hazel grouse,0.3042,0.0000,0.0000,1.0000
gray partridge,0.0000,0.0000,0.0000,1.0000
wild geese,0.0000,0.0000,0.0000,1.0000
wild and domestic ducks,0.0782,0.0000,0.0000,1.0000
wild doves,0.0000,0.0000,0.0000,1.0000
doves,0.7173,0.0000,0.0000,1.0000
curlew,0.0000,0.0000,0.0000,1.0000
waxwing,0.0000,0.0000,0.0072,1.0000
yellow hammer,0.0000,0.0000,0.0000,1.0000
type of sparrow & skylarks,0.0893,0.0000,0.0000,1.0000
small birds,0.0169,0.0000,0.0000,1.0000
dried meats,0.0000,0.0000,0.0000,1.0000
butter,0.0126,0.0025,0.0373,1.0000
Gouda Cheese,0.0640,0.0000,0.0000,1.0000
B'burg hard cheese,0.0000,0.0000,0.0000,1.0000
carp,0.5930,0.0050,0.0000,1.0000
pike,0.0075,0.0002,0.0047,1.0000
salmon,0.0000,0.0000,0.0000,1.0000
unk,0.4553,0.0000,0.0000,1.0000
Gudgeon,0.0451,0.0000,0.0000,1.0000
unk,0.0000,0.0000,0.0000,1.0000
salmon trout,1.0000,0.0000,0.0000,1.0000