Big walls, cities, computing, and design.
import {ramp} from "@mbostock/color-ramp"
ramp(d3.interpolateLab("red", "blue"))
ramp(t => `hsl(${t * 360}, 100%, 50%)`)
import { multiply_this } from "@cesandoval/session-1-3a-introduction-to-javascript-part3"
import { map } from "@mbostock/interrupted-sinu-mollweide"
map
import {interval} from "@mbostock/countdown"
interval
// i
import {i} from "@mbostock/generator-cells-functions-and-objects"
import { map as map2 } from "@mbostock/interrupted-sinu-mollweide"
map === map2
primes = [2, 3, 5, 7, 11, 13]
array1 = [0,1,2,3]
mtcars = d3.csvParse(`name,mpg,cyl,disp,hp,drat,wt,qsec,vs,am,gear,carb
Mazda RX4,21,6,160,110,3.9,2.62,16.46,0,1,4,4
Mazda RX4 Wag,21,6,160,110,3.9,2.875,17.02,0,1,4,4
Datsun 710,22.8,4,108,93,3.85,2.32,18.61,1,1,4,1
Hornet 4 Drive,21.4,6,258,110,3.08,3.215,19.44,1,0,3,1
Hornet Sportabout,18.7,8,360,175,3.15,3.44,17.02,0,0,3,2
Valiant,18.1,6,225,105,2.76,3.46,20.22,1,0,3,1
Duster 360,14.3,8,360,245,3.21,3.57,15.84,0,0,3,4
Merc 240D,24.4,4,146.7,62,3.69,3.19,20,1,0,4,2
`)
The first prime is ${primes[0]}.
The first car is a ${mtcars[0].name} with ${mtcars[0].hp} horsepower.
d3.median(mtcars, d => d.mpg) // The median miles per gallon.
myPath = 'https://gist.githubusercontent.com/cesandoval/4c20520455b90ec8416c2c18747cc899/raw/b5b9c347ff0fdc4dc09214804a87b09ee9deb3e1/qr_codes.csv'
myCSV = d3.csv(myPath)
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
aapl = require("@observablehq/aapl@0")
DOM.download(
new Blob([d3.csvFormat(flare)], {type: "text/csv"}),
"flare.csv"
)
qr_codes.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof image = html`<input type=file accept="image/*">`
html`<img src="${URL.createObjectURL(image)}">`
Files
viewof text = html`<input type=file * ">`
Files.text(text)
viewof binary = html`<input type=file>`
Files.buffer(binary)
data = d3.csv("https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv")
data.map(d => +d.Year)
Promises
Promises.delay(3000, "Hello, world!")
{
let i = 0;
while (true) {
yield Promises.tick(1000, ++i);
}
}
{
let greeting = await Promises.delay(3000, "Hello, ");
return greeting + "world!";
}
yield 13
yield 'yielding text'
13
{
let i = 0;
while (true) {
yield Promises.delay(10, ++i);
}
}
{
let i = 0;
while (true) {
await Promises.delay(1000);
yield ++i;
}
}
{
const div = html`<div style="transition:background 250ms linear;height:33px;">`;
yield div;
while (true) {
div.style.background = "red";
yield Promises.delay(1000, div);
div.style.background = "green";
yield Promises.delay(1000, div);
div.style.background = "blue";
yield Promises.delay(1000, div);
}
}
{
yield 1;
yield 2;
yield 3;
return "ignored"; // It’s ignored!
}
input = html`<input type=range>`
viewof input2 = html`<input type=range>`
input2
Generators.observe(next => {
// Yield the input’s initial value.
next(input.value);
// Define an event listener to yield the input’s next value.
const inputted = () => next(input.value);
// Attach the event listener.
input.addEventListener("input", inputted);
// When the generator is disposed, detach the event listener.
return () => input.removeEventListener("input", inputted);
})
Generators.input(input)
viewof value = html`<input type=range>`
width
now
viewof x = html`<input type=range min=0 max=1 step=any>`
viewof y = html`<input type=range min=-10 max=1000 step=any>`
y
x
viewof message = html`<input type=text placeholder="Say hello">`
message
viewof color = html`<select>
<option>red
<option>orange
<option>yellow
<option selected>green
<option>blue
<option>violet
</select>`
color
point
viewof silly = {
const element = html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
silly
viewof count = {
const element = html`<div style="font-size:64px;user-select:none;">🤪</div>`;
element.value = 0;
element.onclick = () => {
++element.value;
element.dispatchEvent(new CustomEvent("input"));
};
return element;
}
count
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.