Plot: Quantitative groupsPlot: Coloring lines in wide untidy dataTable with linksClick a button to add to an arrayPlot: Stacked bars with totalsPlot: Click handler render transformSending notifications every week, two weeks, month, etc.See full stack trace with queueMicrotaskNormalize SVG elements to pathsCustom table, click to select rowPlot: Bar chart with label overlayCells, streaming, and side effectsNotes to self on error handlingMasking special namesRecursive Plot subtitlesTiming-safe and and orPlot: Simple render transformFetch CSV from private GitHub repoGeoJSON tableThe two kinds of Plot widthCould Plot.auto make the Simpsons cell heatmap? #1672Plot: Dual axis line chartImport from past versionFacet wrapConvert Plot.auto to explicit marksPlay button and mutationInteractive Plot legendRects in a tableAverage line in faceted plotHorizontal inputsUse Inputs.form with a templateFetch a local file from a notebookConvert JavaScript to Observable JavaScriptHow to respect version locking in an embedded notebookUpdate method on DOM nodeHello, AG GridBeware d3.select on ObservableRe-run cell when checkbox is clickedHow to fix Plot facet labels getting cut offGet JavaScript array from Markdown listInputs.select: Chaining and defaulting to no filterTable with serif fontSetting path length as CSS property variable with D3Read in CSV, define values as undefined/nullUsing a mutable cell to log stuffCombining Inputs with internal interactivity in a chartGive a user a persistent personal key for a notebookSetting @mootari/range-slider from another inputSynchronized slider and dropdownXML to radio button optionsFilter dates from JSONSurprising colors in PlotVega-Lite, JSON and JavaScript APIUse a different render function depending on widthTransition from previous value to new valueDon’t use ordinal scales for datesFormat years stored as numbers without commas in PlotDifferences between htl.html and htl.html.fragmentScrubber await visibilityDifferences between html and htl.htmlWolfram embed demoRe: Get multiple properties from the same object in one array of unique valuesD3 Tube MapRe: How to access data object from a nested arraySynchronized checkboxesGroup all rows by school_type, count and create a percentage of the totalDebug HTML cellsMake an array of PlotsHow to compose generators
Drag (SVG), with scale
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("stroke-width", 2);
svg
.selectAll("circle")
.data(mutable circles)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("r", radius)
.attr("fill", (d, i) => d3.schemeCategory10[i % 10])
.call(drag);
return svg.node();
}
drag = {
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "black");
}
function dragged(event, d) {
d.pt = [xScale.invert((d.x = event.x)), yScale.invert((d.y = event.y))];
mutable circles = mutable circles;
d3.select(this).attr("cx", xScale(d.pt[0])).attr("cy", yScale(d.pt[1]));
}
function dragended(event, d) {
d3.select(this).attr("stroke", null);
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
mutable circles = d3.range(20).map((i) => {
const pt = [Math.random(), Math.random()];
const x = xScale(pt[0]);
const y = yScale(pt[1]);
return { x, y, pt };
})
xScale = d3.scaleLinear([0, 1], [0, width])
yScale = d3.scaleLinear([0, 1], [0, height])
height = 600
radius = 32
d3 = require("d3@6")
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.
