Setting up a Node ServerWeek 12 - Interaction and Animation: D3 Transitions, Behaviors, and BrushingWeek 11 - Intro to D3.js: Mapping Data with D3Week 10 - Intro to D3.js: Making a ChartParsing API ResponsesWeek 4a - Exploring Data with Vega-LiteWeek 3 - Data Management with ZebrasWeek 2a - Introduction to Javascript Part2Week 1b - Introduction to JavascriptWeek 1a - Introduction to HTML and Javascript
Week 0 - Introduction to Observable
image = flood // See the import down below! 🌈
height = 450 // Try changing this value and clicking the play button ▶︎.
`My favorite number is ${2 * 3 * 7}.`
import {canvas as flood} with {height} from "@mbostock/randomized-flood-fill"
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(name) {
return `Hello, ${name}!`;
}
greet("Carlos")
greet("Class")
color = "red"
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;
}
{
const context = DOM.context2d(width, 33);
context.beginPath();
context.moveTo(0, randomWalk[0]);
for (let x = 0; x < width; ++x)
context.lineTo(x, randomWalk[x]);
context.lineJoin = context.lineCap = "round";
context.strokeStyle = stroke;
context.stroke();
return context.canvas;
}
stroke = "green"
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.
