-
Syntagmatic · Kai Chang
data visualization ·
interactive learning ·
open collaboration
bl.ocks.org/syntagmaticgithub.com/syntagmatictwitter.com/syntagmatic[1][2][3]
Selected Work
...
-
HTML5 Canvas Class
Basic Usage
<canvas id="tutorial" width="150" height="150"></canvas>
<script>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
// your code here
</script>
...
-
Parallel Coordinates
Parallel Coordinates
d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="
example" class="parcoords" style="width:360px;height:150px"></div>
<script>
var data = [
[0,-0,0,0,0,3...
-
Linking to Data Table
An extension of the bushing example which links the chart to a data table. When hovering over the table, that row of data is highlighted in the chart. When brushing, the data in the table is updated.
...
-
Brushing Example
Reset Brushes
Strumming is a 2D selection brushing method, also called pinches by Alfred Inselberg.
You start a strum be clicking and dragging within one of the segments (area between two axes).
After...
-
Download Parallel Coordinates Example
Demonstrates the ability to download an image of the parallel coordinate.
Download screenshot