Social development practitioner. Trying to understand our world.
World Bank Gender Data Portal | AssetsColumbia Glacier Alaska | Wayback Imagery 2014 - 2020World Bank API - Meet Vega LiteSelect a Flag from Mapped ISO ValuesText From Title of Observable InputPDF.js MultiPage Previous/NextPrintable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]Image Upload Tool in Native JavaScriptToggling a Button's Text and Color for Multiple ValuesObservable Table of Literature on Indigenous PeoplesESRI / ArcGIS Layers PreviewCalculate Working Days, Excluding Weekends & HolidaysDynamic Reporting from Dropdown InputsReporting Data Values using JavaScriptQuick Coordinate EstimationLearning JavaScript (and Observable) by Converting a FiddleD3 Point on Globe with Input SlidersInstitution, Region & SectorActive and Closed Cases at End of FY18Learning C3.js Donut Charts in ObservableInteractive Stacked Bar Chart in D3(v4)Learning Streaming Shapefiles in ObservableInteractive Tree Diagram (D3v3)Learning about Dagre ChartsSankey DiagramBi-Level Partition Donut ChartSankey Diagram, D3v5Learning Tom's Table Function for Observable
Learing by Doing
2 * 3 * 7
{
let x = 0;
for (let i = 1; i <= 100; ++i) {
x += i;
}
return x;
}
x + 2 // x is not accessible here!
({top: 20, right: 20, bottom: 30, left: 40})
function greet(person) {
return `Hello, ${person}!`;
}
greet("Bob")
color = "blue"
`My favorite color is ${color}.`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
status = "active"
status = "pending"
letters = { return "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); }
letters.map(l => l.toLowerCase())
fullName = `${firstName} ${lastName}`
lastName = "Lovelace"
firstName = "Ada"
randomWalk = {
let y = 16, values = [y];
for (let x = 0; x < width; ++x) values.push(y = y + (Math.random() - 0.5) * 3 + (16 - y) * 0.1);
return values;
}
stroke = "steelblue"
html`<p>I am a <i>paragraph</i> element in an HTML container!</p>`
md`I am a *paragraph* element rendered from Markdown.`
{
const p = document.createElement("p");
p.appendChild(document.createTextNode("I am also a "));
p.appendChild(document.createElement("i")).appendChild(document.createTextNode("paragraph"));
p.appendChild(document.createTextNode(" element created with the W3C DOM API"));
return p;
}
md`My favorite number is ${Math.random() * 100 | 0}.`
md`I like Markdown for prose, but [${tex`\KaTeX`}](https://khan.github.io/KaTeX/function-support.html)for math.`
md`Here's a more verbose combination:
${tex`f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi`}`
tex`E = mc^2`
tex.block`\Delta E^*_{00} = \sqrt{
\Big(\frac{\Delta L'}{k_LS_L}\Big)^2 +
\Big(\frac{\Delta C'}{k_CS_C}\Big)^2 +
\Big(\frac{\Delta H'}{k_HS_H}\Big)^2 +
R_T
\frac{\Delta C'}{k_CS_C}
\frac{\Delta H'}{k_HS_H}
}`
md`Or perhaps a fun—a sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} (a chart inline with prose), which is defined by the sparkline function cell below.`
function sparkline(values, width = 64, height = 17) {
const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);
const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);
const context = DOM.context2d(width, height);
const line = d3.line().x((d, i) => x(i)).y(y).context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
md`The current time is ${new Date(now).toLocaleTimeString()}.`
{
const p = md`Less-angry rainbows are the *best* rainbows.`;
p.style.color = d3.interpolateRainbow(now / 1000);
return p;
}
{
const context = DOM.context2d(128, 128);
for (let radius = 8; radius < 128; radius += 8) {
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.stroke();
}
return context.canvas;
}
{
// Create a square <svg> 128px by 128px.
const svg = DOM.svg(128, 128);
// Compute various radii 128, 120, 112, 104 etc.
const radii = d3.range(128, 0, -8);
// Create a sequential color scale (dark for small radii, bright for large).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Use D3’s data join to create circles.
d3.select(svg)
.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg;
}
d3.select(DOM.svg(128, 128))
.call(svg => svg.selectAll("circle")
.data(d3.range(128, 0, -8))
.enter().append("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))
.attr("r", d => d))
.node()
{
const fill = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
return html`<svg width="128" height="128">${
d3.range(128, 0, -8).map(r => svg`<circle r="${r}" fill="${fill(r)}"></circle>`)
}</svg>`;
}
slider = html`<input type=range>`
slider.type
slider.value
viewof reactiveslider = html`<input type=range>`
reactiveslider
html`<style> .highlight { background: yellow; } </style>`
html`<p class="highlight">I am a highlighted paragraph.</p>`
{
let show = false;
const div = html`<div>
<label style="display:inline-block;font:12px sans-serif;">
<input type="checkbox" id="toggle"> Show the surprise.
</label>
<div id="surprise" style="font-size:64px;display:none;">🎉</div>
</div>`;
div.querySelector("#toggle").onclick = () => {
div.querySelector("#surprise").style.display = (show = !show) ? "block" : "none";
div.dispatchEvent(new CustomEvent("update"));
};
return div;
}
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.
