Kai syntagmatic

A version of parallel coordinates with an inverted axis, weight (lb).

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

Paths are rendered only once, and the imageData is cached for redrawing. Redrawing a single path requires one clearRect, putImageData and drawImage call so the net effect seems slower than simply rerendering that paths with moveTo/lineTo.

An example of an SVG interaction layer over a canvas rendering layer. This example has 7637 data points from the USDA Nutrition Dataset. Uses requestAnimationFrame to prevent path rendering from locking up the UI.

Interactions done with the brush component

Based on d3.js Parallel Coordinates

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Nutrient Database Explorer</title>
	<link rel="stylesheet" type="text/css" href="parallel.css" />
	</head>
	<body>
	<div id="header">
	<h1>Nutrient Explorer</h1>

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

	html, body {
	margin: 0;
	width: 100%;

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

	html, body {
	margin: 0;
	width: 100%;

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Parallel Coordinates</title>
	<style type="text/css">
	html {
	margin: 0;
	width: 100%;
	height: 100%;

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