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 D3US grid mapsVisual saliencySpatial data aggregationStevens's power law shorterScatterplot OverplottingDensity PlotAreas should be stacked
Anscombe's Quartet
anscombe = {
console.log("width", width);
const maxCellWidth = Math.min(250, width * 0.4);
console.log("width", width, "maxCellWidth", maxCellWidth);
const hover = vl
.selectSingle()
.nearest(true)
.on("mouseover")
.init({ X: [], Y: [] });
const base = vl
.markCircle({ size: 100, tooltip: true })
.encode(
vl.x().fieldQ("X"),
vl.y().fieldQ("Y"),
vl.color().value("steelblue").if(hover, vl.value("firebrick")),
vl.detail().fieldN("Series")
)
.width(maxCellWidth)
.height(maxCellWidth);
return vl
.layer(
base.select(hover),
base
.markLine()
.transform(vl.regression("Y").on("X"))
.encode(vl.color().value("#777"))
)
.facet(vl.facet().fieldN("Series"))
.data("data/anscombe.json")
.columns(2)
.config({ axis: { grid: false } })
.render();
}
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.
