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 stuffDrag (SVG), with scaleGive 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
Combining Inputs with internal interactivity in a chart
viewof color = Inputs.color()
chart = {
// Variable that stores whether to show a circle
// Is set by clicking on the SVG
let isCircle = false;
// Variable that stores fill color
// Is set by update function called by update cell below
let fillColor = "black";
// Create SVG
const sel = d3
.create("svg")
.attr("viewBox", "-10 -10 20 20")
.attr("width", 200)
.on("click", () => {
// When you click anywhere on SVG, switch shape and re-render
isCircle = !isCircle;
render();
});
// Create shapes
const circle = sel.append("circle").attr("r", 10);
const rect = sel.append("rect").attr("x", -9).attr("y", -9).attr("width", 18).attr("height", 18);
// Render function sets visibility and fill
function render() {
circle
.attr("visibility", isCircle ? "visible" : "hidden")
.attr("fill", fillColor);
rect
.attr("visibility", !isCircle ? "visible" : "hidden")
.attr("fill", fillColor);
}
// Call render once initially
render();
// Return DOM node with an attached update method,
// which is called by a different cell with the value of the color input
return Object.assign(sel.node(), {
update(value) {
fillColor = value;
render();
}
});
}
update = chart.update(color)
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.
