Published
Edited
Apr 11, 2022
9 stars
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 D3Using a mutable cell to log stuffCombining Inputs with internal interactivity in a chartDrag (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
Read in CSV, define values as undefined/null
// This reads in everything in as strings
raw = FileAttachment("penguins.csv").csv()
// can specify typed, but how can I make the NAs not be strings?
typed = FileAttachment("penguins.csv").csv({typed: true})
// some values are "NA" rather than null/undefined, etc.
typed[3]
fixed = typed.map((d) =>
Object.fromEntries(
Object.keys(d).map((key) => [key, d[key] === "NA" ? null : d[key]])
)
)
// "NA" is now null
fixed[3]
fixed2 = typed.map(d => {
d = {...d};
for (const key of Object.keys(d)) {
if (d[key] === "NA") d[key] = null;
}
return d;
})
// "NA" is now null
fixed2[3]
function autoType(nullString) {
return function (object) {
for (var key in object) {
var value = object[key].trim(),
number,
m;
if (!value || (nullString && value === nullString)) value = null;
else if (value === "true") value = true;
else if (value === "false") value = false;
else if (value === "NaN") value = NaN;
else if (!isNaN((number = +value))) value = number;
else if (
(m = value.match(
/^([-+]\d{2})?\d{4}(-\d{2}(-\d{2})?)?(T\d{2}:\d{2}(:\d{2}(\.\d{3})?)?(Z|[-+]\d{2}:\d{2})?)?$/
))
) {
if (fixtz && !!m[4] && !m[7])
value = value.replace(/-/g, "/").replace(/T/, " ");
value = new Date(value);
} else continue;
object[key] = value;
}
return object;
};
}
// https://github.com/d3/d3-dsv/issues/45
fixtz = new Date("2019-01-01T00:00").getHours() || new Date("2019-07-01T00:00").getHours();
// autoType mutates the objects in the array so i clone the array
fixed3 = structuredClone(raw).map(autoType("NA"))
fixed3[3]
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.
