An example of an SVG interaction layer over a canvas rendering layer. The SVG parallel coordinates starts to slow down significantly at 1000 data points. This version should scale better, and offer more opportunities for optimization.
Interactions done with the brush component
Based on d3.js Parallel Coordinates
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
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. Data from the USDA Nutrition Database.
This example has a few design differences from most parallel coordinates:
| // demo.js | |
| // | |
| // Adapted by Kai Chang and Rich Morin from http://bl.ocks.org/1653763 | |
| window.onload = function() { | |
| proj = { | |
| 'albers': d3.geo.albers() .scale( 50), | |
| 'mercator': d3.geo.mercator().scale(280), | |
| 'bonne': d3.geo.bonne().scale(60), |
An interactive parallel sets visualisation for D3.js using the USDA Nutrition Data.
Parallel Sets: http://www.jasondavies.com/parallel-sets/.
Nutrition Parallel Coordinates: .
| <!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 { |
| <!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 { |
A version of parallel coordinates with an inverted axis, weight (lb).
| HIP | Vmag | RA | DE | Plx | pmRA | pmDE | e_Plx | B-V | |
|---|---|---|---|---|---|---|---|---|---|
| 2 | 9.27 | 0.003797 | -19.498837 | 21.90 | 181.21 | -0.93 | 3.10 | 0.999 | |
| 38 | 8.65 | 0.111047 | -79.061831 | 23.84 | 162.30 | -62.40 | 0.78 | 0.778 | |
| 47 | 10.78 | 0.135192 | -56.835248 | 24.45 | -44.21 | -145.90 | 1.97 | 1.150 | |
| 54 | 10.57 | 0.151656 | 17.968956 | 20.97 | 367.14 | -19.49 | 1.71 | 1.030 | |
| 74 | 9.93 | 0.221873 | 35.752722 | 24.22 | 157.73 | -40.31 | 1.36 | 1.068 | |
| 81 | 8.57 | 0.243864 | -4.932115 | 23.43 | -184.70 | -172.67 | 1.28 | 0.642 | |
| 110 | 8.61 | 0.348708 | 39.610818 | 20.42 | -29.92 | -41.34 | 1.91 | 0.787 | |
| 135 | 8.64 | 0.426746 | -0.217499 | 20.10 | 20.73 | -114.08 | 1.22 | 0.620 | |
| 143 | 10.35 | 0.455182 | 21.462138 | 20.05 | 177.97 | 150.19 | 1.64 | 1.033 |