Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/README.md

Forked from syntagmatic/README.md
Last active December 10, 2015 21:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/4497604 to your computer and use it in GitHub Desktop.
Save emeeks/4497604 to your computer and use it in GitHub Desktop.
Download ZIP
Yearly Parallel Coordinates
Raw
README.md
Raw
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
Raw
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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment