The avatar for @cesandoval
Carlos Sandoval Olascoaga
Big walls, cities, computing, and design.
Public
INAM5983: Design, Urban Tech and Community Participation
Edited
Jan 26, 2024
Fork of Week 2b - Advanced Javascript
1
INAM5983: Design, Urban Tech and Community Participation
Session 2.1b - Intro to D3.js: Mapping Data with D3Session 2.1a - Intro to D3.js: Making a ChartSession 1.4b - Introduction to Interactive Data Visualization and MappingSession 1.4 - Introduction to Exploratory Data Visualization
Session 1.3b - Advanced Javascript
Session 1.3a - Introduction to Javascript Part3Session 1.2b - Introduction to JavascriptSession 1.2a - Introduction to HTML and JavascriptSession 1.2 - Introduction to Observable
Insert cell
Insert cell
Insert cell
import {ramp} from "@mbostock/color-ramp"
Insert cell
Insert cell
ramp(d3.interpolateLab("red", "blue"))
Insert cell
ramp(t => `hsl(${t * 360}, 100%, 50%)`)
Insert cell
import { multiply_this } from "@cesandoval/session-1-3a-introduction-to-javascript-part3"
Insert cell
Insert cell
Insert cell
import { map } from "@mbostock/interrupted-sinu-mollweide"
Insert cell
map
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {interval} from "@mbostock/countdown"
Insert cell
interval
Insert cell
Insert cell
// i
Insert cell
import {i} from "@mbostock/generator-cells-functions-and-objects"
Insert cell
Insert cell
import { map as map2 } from "@mbostock/interrupted-sinu-mollweide"
Insert cell
map === map2
Insert cell
Insert cell
Insert cell
primes = [2, 3, 5, 7, 11, 13]
Insert cell
array1 = [0,1,2,3]
Insert cell
Insert cell
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
`)
Insert cell
Insert cell
The first prime is ${primes[0]}.
Insert cell
The first car is a ${mtcars[0].name} with ${mtcars[0].hp} horsepower.
Insert cell
d3.median(mtcars, d => d.mpg) // The median miles per gallon.
Insert cell
Insert cell
myPath = 'https://gist.githubusercontent.com/cesandoval/4c20520455b90ec8416c2c18747cc899/raw/b5b9c347ff0fdc4dc09214804a87b09ee9deb3e1/qr_codes.csv'
Insert cell
myCSV = d3.csv(myPath)
Insert cell
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
Insert cell
Insert cell
aapl = require("@observablehq/aapl@0")
Insert cell
Insert cell
DOM.download(
new Blob([d3.csvFormat(flare)], {type: "text/csv"}),
"flare.csv"
)
Insert cell
Insert cell
Insert cell
qr_codes.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof image = html`<input type=file accept="image/*">`
Insert cell
Insert cell
html`<img src="${URL.createObjectURL(image)}">`
Insert cell
Insert cell
Files
Insert cell
Insert cell
viewof text = html`<input type=file * ">`
Insert cell
Files.text(text)
Insert cell
Insert cell
viewof binary = html`<input type=file>`
Insert cell
Files.buffer(binary)
Insert cell
Insert cell
data = d3.csv("https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv")
Insert cell
Insert cell
data.map(d => +d.Year)
Insert cell
Insert cell
Promises
Insert cell
Insert cell
Promises.delay(3000, "Hello, world!")
Insert cell
Insert cell
{
let i = 0;
while (true) {
yield Promises.tick(1000, ++i);
}
}
Insert cell
Insert cell
{
let greeting = await Promises.delay(3000, "Hello, ");
return greeting + "world!";
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
yield 13
Insert cell
yield 'yielding text'
Insert cell
Insert cell
13
Insert cell
Insert cell
{
let i = 0;
while (true) {
yield Promises.delay(10, ++i);
}
}
Insert cell
Insert cell
{
let i = 0;
while (true) {
await Promises.delay(1000);
yield ++i;
}
}
Insert cell
Insert cell
{
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);
}
}
Insert cell
Insert cell
{
yield 1;
yield 2;
yield 3;
return "ignored"; // It’s ignored!
}
Insert cell
Insert cell
input = html`<input type=range>`
Insert cell
viewof input2 = html`<input type=range>`
Insert cell
input2
Insert cell
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);
})
Insert cell
Insert cell
Generators.input(input)
Insert cell
Insert cell
viewof value = html`<input type=range>`
Insert cell
Insert cell
Insert cell
width
Insert cell
Insert cell
now
Insert cell
Insert cell
viewof x = html`<input type=range min=0 max=1 step=any>`
Insert cell
viewof y = html`<input type=range min=-10 max=1000 step=any>`
Insert cell
y
Insert cell
x
Insert cell
Insert cell
viewof message = html`<input type=text placeholder="Say hello">`
Insert cell
message
Insert cell
Insert cell
viewof color = html`<select>
<option>red
<option>orange
<option>yellow
<option selected>green
<option>blue
<option>violet
</select>`
Insert cell
color
Insert cell
Insert cell
Insert cell
point
Insert cell
Insert cell
viewof silly = {
const element = html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
Insert cell
silly
Insert cell
Insert cell
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;
}
Insert cell
count
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more