Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
syntagmatic / index.html
Last active May 4, 2016 08:00
Scatterplot (Canvas)
<!doctype html>
<link rel="stylesheet" type="text/css" href="style.css" />
<h1>Nutrient Scatterplot (Canvas)</h1>
<canvas id="chart"></canvas>
<div id="controls">
<span id="hover-food"></span><br/>
X axis <select id="xaxis"></select><br/>
Y axis <select id="yaxis"></select><br/>
@syntagmatic
syntagmatic / index.html
Created August 5, 2012 23:26
Nutrient Parallel Coordinates, 60 Dimensions
<!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 Database Explorer</h1>
@syntagmatic
syntagmatic / nutrients-full.csv
Created August 5, 2012 23:35
USDA Nutrient Database
We can't make this file beautiful and searchable because it's too large.
name,group,id,Protein (g),Total lipid (fat) (g),"Carbohydrate, by difference (g)",Ash (g),Energy (kcal),Starch (g),Sucrose (g),Glucose (dextrose) (g),Fructose (g),Lactose (g),Maltose (g),"Alcohol, ethyl (g)",Water (g),Adjusted Protein (g),Caffeine (mg),Theobromine (mg),Energy (kJ),"Sugars, total (g)",Galactose (g),"Fiber, total dietary (g)","Calcium, Ca (mg)","Iron, Fe (mg)","Magnesium, Mg (mg)","Phosphorus, P (mg)","Potassium, K (mg)","Sodium, Na (mg)","Zinc, Zn (mg)","Copper, Cu (mg)","Fluoride, F (mcg)","Manganese, Mn (mg)","Selenium, Se (mcg)","Vitamin A, IU (IU)",Retinol (mcg),"Vitamin A, RAE (mcg_RAE)","Carotene, beta (mcg)","Carotene, alpha (mcg)",Vitamin E (alpha-tocopherol) (mg),Vitamin D (IU),Vitamin D2 (ergocalciferol) (mcg),Vitamin D3 (cholecalciferol) (mcg),Vitamin D (D2 + D3) (mcg),"Cryptoxanthin, beta (mcg)",Lycopene (mcg),Lutein + zeaxanthin (mcg),"Tocopherol, beta (mg)","Tocopherol, gamma (mg)","Tocopherol, delta (mg)","Vitamin C, total ascorbic acid (mg)",Thiamin (mg),Riboflavin (mg),Niacin
@syntagmatic
syntagmatic / cars.csv
Last active October 8, 2015 04:48
Miso 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 August 7, 2012 22:52 — forked from mbostock/.block
Fisheye Parallel Coordinates
@syntagmatic
syntagmatic / README.md
Created August 7, 2012 22:54 — forked from syntagmatic/index.html
Fisheye Nutrient Parallel Coordinates

Improvements:

  • Fisheye effect
  • Tweaked display to show 60 dimensions
  • 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
@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 / cars.csv
Created August 8, 2012 22:12 — forked from syntagmatic/cars.csv
d3 CSV Upload
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 / index.html
Created August 9, 2012 23:35
Device Orientation and Motion
<!DOCTYPE HTML>
<html>
<head>
<title>Device Orientation</title>
<style>
body { font-family: monospace; font-size: 40px; text-align: center; margin: 0;}
span { font-size: 1.4em; font-weight: bold;}
p { width: 33%; height: 20%; float: left; }
</style>
</head>
@syntagmatic
syntagmatic / index.html
Last active July 29, 2020 15:22
Render Queue
<!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; }