Public
Edited
Apr 4, 2024
2 stars
Insert cell
Insert cell
Insert cell
height * 2

Insert cell
result = {
let a = 1;
let b = a * 2;

return b;
}
Insert cell
height = 10
Insert cell
viewof r = Inputs.range([1, 50])
Insert cell
htl.html`<svg><circle cx="50" cy="50" r="${r}"></circle></svg>`
Insert cell
console.log("Height", height)
Insert cell
data = {
return await d3.csv(
"https://media.githubusercontent.com/media/MuseumofModernArt/collection/main/Artists.csv",
d3.autoType
);
}
Insert cell
d3 = require("d3@7")
Insert cell
ImAList = [1,2,34]
Insert cell
ImAString = "¡Hola mundo!"
Insert cell
IamNumber = 32
Insert cell
ImAObject = ({
name: "John"
})
Insert cell
ImAObject.name
Insert cell
Insert cell
viewof number = Inputs.number()
Insert cell
htl.html`<h1>I'm a header<h1>`
Insert cell
button = htl.html`<button>Click me!</button>`
Insert cell
button.addEventListener("click", () => {
console.log("clicked");
})
Insert cell
Insert cell
viewof name = htl.html`<input>`
Insert cell
name
Insert cell
data
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
viewof selected = Inputs.search(data)
Insert cell
Inputs.table(selected)
Insert cell
attribs = Object.keys(data[0])
Insert cell
Insert cell
Insert cell
Insert cell
viewof customInput = {
const base = htl.html`<div>
<input type="range"/>
Value: <output></output>
</div>`;

const input = base.querySelector("input");
const output = base.querySelector("output");

base.value = input.value;

input.addEventListener("input", () => {
output.innerHTML = input.value;
base.value = input.value;
new base.dispatchEvent(new CustomEvent("input", { bubbles: true }));
});

return base;
}
Insert cell
customInput
Insert cell
Insert cell
customData = [
{ name: "John", age: 13 },
{ name: "John", age: 13 },
{ name: "John", age: 13 }
]
Insert cell
ieeevisInfluentials = FileAttachment("ieeevis2021Influentials.json").json()
Insert cell
url = "https://media.githubusercontent.com/media/MuseumofModernArt/collection/main/Artists.csv"
Insert cell
d3.csv(url)
Insert cell
htl
Insert cell


md`
|Related resources |
| -- | -- |
| Web Development Basics for Visualization | <iframe width="200" src="https://www.youtube.com/embed/7oezUB2y-Zw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| JavaScript fundamentals for visualization with Observable | <iframe width="200" src="https://www.youtube.com/embed/W9tkyLcgTr8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Observable's not JavaScript | <iframe width="200" src="https://www.youtube.com/embed/rtRz_oh8zro" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Introduction to Imports | https://observablehq.com/@observablehq/introduction-to-imports |

_Break_ 9:50 - 10:00
`
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