I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
BioFabricTree, ValueMapbox D3Choropleth Mapd3.geoPath + Canvas + Zoom + PanningTopoJSON Simplifier and Filter attributesVega crossfilterMarks and Channels in D3Anscombe's QuartetUS grid mapsVisual saliencySpatial data aggregationScatterplot OverplottingDensity PlotAreas should be stacked
Stevens's power law shorter
table(WilkinsonTable)
rawTable = `Continuum,Exponent,Stimulus condition
Angular acceleration,1.4,5 s rotation
Brightness,0.33,5° target in dark
Brightness,0.5,Point source
Brightness,0.5,Brief flash
"Discomfort, cold",1.7,Whole-body irradiation
Duration,1.1,White-noise stimuli
Electric shock,3.5,Current through fingers
Finger span,1.3,Thickness of blocks
Heaviness,1.45,Lifted weights
Lightness,1.2,Reflectance of gray papers
Loudness,0.67,Sound pressure of 3000 Hz tone
Muscle force,1.7,Static contractions
Pressure on palm,1.1,Static force on skin
Redness (saturation),1.7,Red–gray mixture
Smell,0.6,Heptane
Tactual hardness,0.8,Squeezing rubber
Tactual roughness,1.5,Rubbing emery cloths
Taste,1.3,Sucrose
Taste,1.4,Salt
Taste,0.8,Saccharin
Vibration,0.95,Amplitude of 60 Hz on finger
Vibration,0.6,Amplitude of 250 Hz on finger
Viscosity,0.42,Stirring silicone fluids
Visual area,0.7,Projected square
Visual length,1,Projected line
Vocal effort,1.1,Vocal sound pressure
Warmth,1.6,Metal contact on arm
Warmth,1.3,"Irradiation of skin, small area"
Warmth,0.7,"Irradiation of skin, large area"`
WilkinsonTable = d3.csvParse(rawTable, d3.autoType)
md`Generate points to draw each function`
data = WilkinsonTable
.map(row =>
Array.from({length: CLIP_X*STEP})
.map((_,i) =>
({...row,
x: i/STEP,
y:(i/STEP)**row.Exponent,
Condition: row.Continuum + " " + row["Stimulus condition"]
})
)
).flat()
IDsWithLabels =[
"Electric shock Current through fingers",
"Visual area Projected square",
"Visual length Projected line",
"Brightness 5° target in dark",
]
maxX = d3.rollup(
data.filter(d => d.y < CLIP_X && d.x < CLIP_X && IDsWithLabels.indexOf(d.Condition) !== -1),
v => d3.max(v, d => d.y),
d=> d.Condition)
CLIP_X = 5
STEP = 20
data.filter(d => d.y === maxX.get(d.Condition))
d3 = require("d3-dsv", "d3-array")
import {table} from "@tmcw/tables"
import {vl} from "@vega/vega-lite-api"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
