Canvas Parallel Coordinates - Shuffled Rendering

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