Skip to content

Instantly share code, notes, and snippets.

View syntagmatic's full-sized avatar

Kai syntagmatic

388 followers · 14 following
View GitHub Profile
@syntagmatic
syntagmatic / demo.css
Created March 15, 2012 02:09 — forked from RichMorin/demo.css
Selectable Projection Demo
/* demo.css */
body {
margin: 5px auto;
}
#chart svg {
border: solid 1px #ccc;
}
@syntagmatic
syntagmatic / coffee-script.js
Created March 17, 2012 07:45 — forked from RichMorin/coffee-script.js
Crazy Hive Plot
/**
* CoffeeScript Compiler v1.2.0
* http://coffeescript.org
*
* Copyright 2011, Jeremy Ashkenas
* Released under the MIT License
*/
(function(root){var CoffeeScript=function(){function require(a){return require[a]}require["./helpers"]=new function(){var a=this;(function(){var b,c;a.starts=function(a,b,c){return b===a.substr(c,b.length)},a.ends=function(a,b,c){var d;d=b.length;return b===a.substr(a.length-d-(c||0),d)},a.compact=function(a){var b,c,d,e;e=[];for(c=0,d=a.length;c<d;c++)b=a[c],b&&e.push(b);return e},a.count=function(a,b){var c,d;c=d=0;if(!b.length)return 1/0;while(d=1+a.indexOf(b,d))c++;return c},a.merge=function(a,c){return b(b({},a),c)},b=a.extend=function(a,b){var c,d;for(c in b)d=b[c],a[c]=d;return a},a.flatten=c=function(a){var b,d,e,f;d=[];for(e=0,f=a.length;e<f;e++)b=a[e],b instanceof Array?d=d.concat(c(b)):d.push(b);return d},a.del=function(a,b){var c;c=a[b],delete a[b];return c},a.last=function(a,b){return a[a.length-(b||0)-1]}}).call(this)},require["./rewriter"]=new function(){var
@syntagmatic
syntagmatic / coffee-script.js
Created March 17, 2012 08:39 — forked from RichMorin/coffee-script.js
Hive Plot Cardinal Interpolation Tensions
/**
* CoffeeScript Compiler v1.2.0
* http://coffeescript.org
*
* Copyright 2011, Jeremy Ashkenas
* Released under the MIT License
*/
(function(root){var CoffeeScript=function(){function require(a){return require[a]}require["./helpers"]=new function(){var a=this;(function(){var b,c;a.starts=function(a,b,c){return b===a.substr(c,b.length)},a.ends=function(a,b,c){var d;d=b.length;return b===a.substr(a.length-d-(c||0),d)},a.compact=function(a){var b,c,d,e;e=[];for(c=0,d=a.length;c<d;c++)b=a[c],b&&e.push(b);return e},a.count=function(a,b){var c,d;c=d=0;if(!b.length)return 1/0;while(d=1+a.indexOf(b,d))c++;return c},a.merge=function(a,c){return b(b({},a),c)},b=a.extend=function(a,b){var c,d;for(c in b)d=b[c],a[c]=d;return a},a.flatten=c=function(a){var b,d,e,f;d=[];for(e=0,f=a.length;e<f;e++)b=a[e],b instanceof Array?d=d.concat(c(b)):d.push(b);return d},a.del=function(a,b){var c;c=a[b],delete a[b];return c},a.last=function(a,b){return a[a.length-(b||0)-1]}}).call(this)},require["./rewriter"]=new function(){var
@syntagmatic
syntagmatic / README.md
Created April 5, 2012 18:40 — forked from jasondavies/.block
Parallel Coordinates Coloring

Adapted from a parallel coordinates example to demonstrate coloring based on the name column in the CSV. Cars which contain the string "Buick" are colored red.

@syntagmatic
syntagmatic / README.md
Last active March 8, 2023 07:51 — forked from mbostock/.block
Canvas Parallel Coordinates

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

@syntagmatic
syntagmatic / README.md
Created April 18, 2012 08:03 — forked from syntagmatic/README.md
Canvas Parallel Coordinates - 7637 Rows

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

@syntagmatic
syntagmatic / README.md
Created April 19, 2012 01:36 — forked from syntagmatic/README.md
Canvas Parallel Coordinates - getImageData caching

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.

@syntagmatic
syntagmatic / README.md
Created April 19, 2012 10:08 — forked from syntagmatic/README.md
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
@syntagmatic
syntagmatic / index.html
Created April 26, 2012 11:36 — forked from syntagmatic/README.md
Cycled 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 {
@syntagmatic
syntagmatic / index.html
Created April 26, 2012 12:52 — forked from syntagmatic/index.html
Flat-edged 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 {