Created — forked from syntagmatic/README.md

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Canvas Parallel Coordinates - Shuffled Rendering

View README.md

An example of an SVG interaction layer over a canvas rendering layer. Data from the USDA Nutrition Database.

This example has a few design differences from most parallel coordinates:

  • requestAnimationFrame for gradual rendering
  • shuffled rendering order
  • bezier curves with canvas
  • autoscaling opacity
  • tick toggles
  • dark/light themes
  • rotated labels
  • table shows 10 random foods of those selected

Find simpler examples of using canvas here and here

Interactions done with the brush component

Based on d3.js Parallel Coordinates

View README.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Canvas Parallel Coordinates</title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 12px;
background: #f9f9f9;
color: #777;
margin-top: 40px;
}
body.dark {
background: #090909;
color: #ccc;
}
#wrap {
width: 960px;
margin: 0 auto;
position: relative;
}
svg {
font: 10px sans-serif;
}
canvas, svg {
position: absolute;
top: 0;
left: 0;
}
#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 1px #fff, -1px -1px 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 {
display: none;
}
#food-list {
position: absolute;
left: 220px;
width: 740px;
overflow-x: hidden;
}
#food-list span {
display: inline-block;
height: 6px;
width: 6px;
margin: 2px 4px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="chart">
<canvas id="foreground"></canvas>
<svg></svg>
</div>
<pre id="food-list"></pre>
<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/>
<button id="dark-theme">Dark</button>
<button id="light-theme">Light</button>
</p>
<p>
Drag along a vertical axis to brush<br/>
Tap the axis to remove its brush
</p>
</div>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="parallel.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.