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 mapsSpatial data aggregationStevens's power law shorterScatterplot OverplottingDensity PlotAreas should be stacked
Visual saliency
a = vl
.angle()
.fieldN("dot")
.scale({ range: [0, 90] })
generateData = () => {
const data = Array.from(Array(n)).map(() => ({
x: Math.random(),
y: Math.random(),
dot: false
}));
data[Math.floor(Math.random()*data.length)].dot=true;
return data;
}
generateChart = (mark, encode, popupAttrib) => {
const base = vl
.mark(mark)
.encode(...encode)
.width(facetWidth)
.height(facetWidth * 0.7);
return vl
.concat(
base.encode(
popupAttrib.scale({
...popupAttrib.toObject().scale,
domain: [true, false]
})
),
base.encode(
popupAttrib.scale({
...popupAttrib.toObject().scale,
domain: [false, true]
})
)
)
.spacing(0)
.data(generateData())
.resolve({
scale: {
color: "independent",
size: "independent",
shape: "independent",
angle: "independent",
opacity: "independent"
}
})
.config({
axis: { title: false, labels: false, ticks: false, grid: false },
range: { category: ["#1f77b4", "#d62728", "#fdb71a"] }
});
}
facetWidth = width/13
pointSize= 70
s = vl.color().scale({a:1})
import {slider, button} from "@jashkenas/inputs"
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.
