Public
Edited
Jan 28
Insert cell
Insert cell
coordinates = [40.7184353, -73.9892099]
Insert cell
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView(coordinates, 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
question_2 = "is rena a dumb bitch, a theif and a fat whore who drank too much and lost all her brain cells and submits to low-level trash"
Insert cell
question = "Is duvie a faggot?"
Insert cell
options = ["Apple", "Banana", "Cherry", "Durian"]
Insert cell
// We’ll store the current tally in a JavaScript object.
voteCounts = {
const counts = {};
for (const fruit of options) {
counts[fruit] = 0; // start all with 0 votes
}
return counts;
}
Insert cell
// {
// const chart = Plot.plot({
// marginLeft: 130,
// axis: null,
// x: {
// axis: "top",
// grid: true,
// tickFormat: (x) => (x < 0 ? `${-x} BC` : `${x} AD`)
// },
// marks: [
// Plot.barX(civilizations, {
// x1: "start",
// x2: "end",
// y: "civilization",
// sort: { y: "x1" }
// }),
// Plot.text(civilizations, {
// x: "start",
// y: "civilization",
// text: "civilization",
// textAnchor: "end",
// dx: -3
// })
// ]
// });
// return chart;
// }
Insert cell
// civilizations = FileAttachment("civilizations.csv").csv({ typed: true })
Insert cell
import { Plot } from "@observablehq/plot"
Insert cell
import { Inputs } from "@observablehq/inputs"
Insert cell
voteButton = Inputs.button("Vote", {
reduce: () => {
if (selectedOption) {
voteCounts[selectedOption]++;
}
}
})
Insert cell
selectedOption = Inputs.radio(options, {
label: question,
// By default, there's no pre-selected option (or pick the first one if you like)
value: null
})
Insert cell
PollResults = {
// Convert voteCounts (an object) into an array of {fruit, count}
const data = Object.entries(voteCounts).map(([fruit, count]) => ({
fruit,
count
}));

return Plot.plot({
marks: [
Plot.barY(data, { x: "fruit", y: "count", fill: "steelblue" }),
Plot.ruleY([0]) // baseline at 0
],
y: {
nice: true,
grid: true
},
x: {
label: "Fruit"
},
height: 300,
width: 500
});
}
Insert cell
three = require("three@0.114.0")
Insert cell
gsap = require("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js").catch(
() => window.gsap
)
Insert cell
PanomNom = require("https://raw.githubusercontent.com/spite/PanomNom.js/master/build/PanomNom.js").catch(
() => window.PanomNom
)
Insert cell
{
window.THREE = three;
window.gsap = gsap;
}
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