forked from syntagmatic's block: Hipparcos Parallel Coordinates
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Hipparcos Parallel Coordinates</title>
<style type="text/css">
html {
margin: 0;
}
body {
font-family: sans-serif;
font-size: 12px;
background: #f9f9f9;
color: #777;
margin: 0;
overflow: hidden;
}
body.dark {
background: #090909;
color: #ccc;
}
h1 {
font-size: 15px;
margin: 16px;
}
p {
margin: 16px;
}
a {
color: #bbb;
}
svg {
font: 10px sans-serif;
}
#chart canvas, #chart svg {
position: absolute;
top: 0;
left: 0;
}
#scatterplot {
position: absolute;
left: 160px;
}
#chart {
position: relative;
}
.brush .extent {
fill: rgba(0,0,0,0.12);
stroke: rgba(255,255,255,0.6);
shape-rendering: crisp-edges;
}
.dark .brush .extent {
fill: rgba(255,255,255,0.12);
stroke: rgba(0,0,0,0.5);
}
.axis line, .axis path {
fill: none;
stroke: #222;
shape-rendering: crispEdges;
}
.axis text {
fill: #222;
text-shadow: 1px 1px 0px #fff, 0px 0px 1px #fff;
}
.axis text.label {
fill: #444;
font-size: 14px;
}
.dark .axis text {
fill: #f2f2f2;
text-shadow: 0 1px 0 #000, 1px 0 0 #000;
}
.dark .axis text.label {
fill: #ddd;
}
.axis g,
.axis path {
}
#food-list {
position: absolute;
left: 420px;
width: 740px;
overflow-x: hidden;
}
#food-list span {
display: inline-block;
height: 6px;
width: 6px;
margin: 2px 4px;
}
</style>
</head>
<body class="dark">
<div id="wrap">
<h1>Parallel Coordinates - <a href="https://astrostatistics.psu.edu/datasets/HIP_star.html">Hipparcos dataset</a> - <a href="https://en.wikipedia.org/wiki/Hertzsprung%E2%80%93Russell_diagram">Hertzsprung-Russell Diagram</a></h1>
<div id="chart">
<canvas id="foreground"></canvas>
<svg></svg>
</div>
<pre id="food-list"></pre>
<canvas id="scatterplot" height=290 width=290></canvas>
<p>
Rendered: <strong id="rendered-count"></strong><br/>
Selected: <strong id="selected-count"></strong><br/>
Opacity: <strong id="opacity"></strong><br/>
<button id="hide-ticks">Hide Ticks</button>
<button id="show-ticks">Show Ticks</button><br/>
</p>
<p>
Drag along a vertical axis to brush<br/>
Tap the axis to remove its brush
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="parallel.js"></script>
</html>
Modified http://mbostock.github.com/d3/d3.v2.js to a secure url
Modified http://underscorejs.org/underscore-min.js to a secure url
https://mbostock.github.com/d3/d3.v2.js
https://underscorejs.org/underscore-min.js