Hipparcos Parallel Coordinates

forked from syntagmatic's block: Hipparcos Parallel Coordinates

<!DOCTYPE html>
<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