Web developer and autodidact with an interest in creative coding.
ThrottleSearch Query TokenizationCompiling a regex from stringsPure CSS TreeThe Fed - FOMC Projections DataTerraform Registry SearchLots of DotsExporting Your DuckDB Databasesflyctl DocsHTML to MarkdownD3 Documentation IndexThrottling Function CallsWeb Page MetadataPatched ImportsDeconstructing a NotebookDiscrete Sibson InterpolationEdge Distance in Regular PolygonsUsing A Vega-Lite Chart As Input WidgetfindTriangle() for D3.Delaunay and DelaunatorCanvas Outlines: Stroke vs FillEases On EdgeConverting Between Keyboard LayoutsD3 Force Along a PathInverted Luminosity(Attempt at) Embedding a Video Into an SVGForce Graph TrailsTitle TransliterationOptimal TilingVega-Lite, UnminifiedNotebook Version UUIDImproving Animations Through Motion BlurWatermarkQuerying the npm registryStitched EasingsDynamic Notebook LinksPixel ProbingMapping Color Scales with SVG FiltersGoogle Maps Cost CalculatorEncoding Data In ImagesZdog HelpersUsing CodePens in ObservableLook What The Cat Dragged InAdobe Swatch Exchange ExporterPolygon Sine WaveSVG Single Path GridColor Blending Is BrokenIntersection ArcsPer-Layer Fadeout In 2D CanvasVoronoi BorderlandsEmbedding a canvas into an SVGEmbedding Fonts Into An SVGVersion Pinning for NotebooksSplitting LinesEasing In Multiple Steps
Transparent Color Widget
viewof colors = Inputs.form([
colorOpacity({value: '#ff95008c', label: 'Start color'}),
colorOpacity({value: '#6bffff24', label: 'Mid color'}),
colorOpacity({value: '#00ccff', label: 'End color'}),
])
colorOpacity({
value: '#ff95008c',
label: html`<code style="text-decoration: underline">Color`,
disabled: true,
width: '75%',
})
colorOpacity({min: 50, max: 150, step: 10})
viewof pastelColor = colorOpacity({
value: '#ffd8eeff',
// Only allow colors with a lightness over 85%
validate: input => d3.hsl(input.value).l > .85,
})
<div style=${{background: pastelColor, height: '30px', border: '1px solid #aaa'}}>
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.
