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 / index.html
Last active March 27, 2024 04:03 — forked from syntagmatic/index.html
Nutrient 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>
@syntagmatic
syntagmatic / .block
Last active May 28, 2023 14:01 — forked from mbostock/.block
Bump Plot
license: gpl-3.0
height: 800
border: none
@syntagmatic
syntagmatic / index.html
Created July 18, 2012 11:54 — forked from syntagmatic/index.html
Improved Parallel Coordinates
<!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%;
@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 / heatlane-spec.json
Last active July 11, 2022 23:23 — forked from jonmmease/heatlane-spec.json
Vega-Lite Heatlane
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Heatlane chart: https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
"data": {"url": "data/cars.json"},
"height": 150,
"width": 400,
"title": "Heatlane",
"transform": [
{"bin": true, "field": "Horsepower"},
{
@syntagmatic
syntagmatic / README.md
Last active February 25, 2022 01:37 — forked from syntagmatic/README.md
Fisheye Nutrient Parallel Coordinates, 146 Dimensions

Improvements:

  • Click a food to sort dimensions by that foods y values
  • Scale to window size and resizes
  • Click label to invert axis
  • Drag label to reorder axes
  • Rendering progress bar
  • Keep selected button removes unselected data
  • Exclude selected button removes selected data
@syntagmatic
syntagmatic / .block
Last active February 24, 2021 05:04 — forked from mbostock/.block
d3-hierarchy tree
license: gpl-3.0
border: no
height: 500
@syntagmatic
syntagmatic / README.md
Created November 15, 2012 01:43 — forked from mbostock/.block
d3 src tree

A visualization of files in the src directory of the d3 repository, based on Reingold-Tilford Tree.

Data Collection

Use git to clone a repository, then du to create a tsv with the directory contents.

git clone git://github.com/mbostock/d3.git
(echo -n 'size\tfile\n'; du -a d3) > d3.tsv

Burrow - recursive nesting

@syntagmatic
syntagmatic / cars.csv
Created August 8, 2012 22:12 — forked from syntagmatic/cars.csv
d3 CSV Upload
name economy (mpg) cylinders displacement (cc) power (hp) weight (lb) 0-60 mph (s) year
AMC Ambassador Brougham 13 8 360 175 3821 11 73
AMC Ambassador DPL 15 8 390 190 3850 8.5 70
AMC Ambassador SST 17 8 304 150 3672 11.5 72
AMC Concord DL 6 20.2 6 232 90 3265 18.2 79
AMC Concord DL 18.1 6 258 120 3410 15.1 78
AMC Concord DL 23 4 151 3035 20.5 82
AMC Concord 19.4 6 232 90 3210 17.2 78
AMC Concord 24.3 4 151 90 3003 20.1 80
AMC Gremlin 18 6 232 100 2789 15 73
@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