Skip to content

Instantly share code, notes, and snippets.

syntagmatic /
Last active Aug 10, 2022
Comparing Map Projections

A mashup of Map Projection Distortions and transitions using the D3.js extended geographic projections plugin.

A comparison of map projections by four different types of distortion:

  • Acc. 40° 150% – The Acceptance index is a numerical measure that summarizes overall projection distortion, in this case with a maximum angular distortion of 40° and areal distortion of up to 150%.
  • Scale – The weighted mean error for overall scale distortion.
  • Areal – The weighted mean error for areal distortion.
  • Angular – The mean angular deformation index.

Lower is better. Data transcribed from the Natural Earth Projection by @mbostock.

View heatlane-spec.json
"$schema": "",
"description": "Heatlane chart:",
"data": {"url": "data/cars.json"},
"height": 150,
"width": 400,
"title": "Heatlane",
"transform": [
{"bin": true, "field": "Horsepower"},
syntagmatic /
Last active Apr 2, 2022
WebGL-2d HSL Fix
syntagmatic / index.html
Last active Mar 17, 2022 — forked from syntagmatic/index.html
Nutrient Parallel Coordinates
View index.html
<!DOCTYPE html>
<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" />
<div id="header">
<h1>Nutrient Explorer</h1>
syntagmatic /
Last active Feb 25, 2022 — forked from syntagmatic/
Fisheye Nutrient Parallel Coordinates, 146 Dimensions


  • 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 /
Last active Jun 11, 2021 — 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 / .block
Last active Feb 24, 2021 — forked from mbostock/.block
d3-hierarchy tree
View .block
license: gpl-3.0
border: no
height: 500
View index.html
<!DOCTYPE html>
<title>Render Queue</title>
<style type="text/css">
html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #b6b6b6; font-family: Ubuntu, Helvetica, sans-serif; font-size: 15px; line-height: 1.35em;}
a { color: #6be; text-decoration: none; }
#canvas { position: fixed; }
#center { position: absolute; top: 0; left: 0; margin: 40px; width: 520px; padding: 20px; background: #444; background: rgba(0,0,0,0.9); border-radius: 8px;}
h1 { margin-top:0; padding: 3px 0; font-size: 1.4em; }
h1, h3 { color: #f9f9f9; border-bottom: 1px solid #333; }
h3 { font-size: 1em; }