The avatar for @hannas-workspace
Hannas Workspace
Public
Edited
Mar 9
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("spongebob.png").image({width: 200})
Insert cell
FileAttachment("Futurama-Fry.jpg").image({width: 200})
Insert cell
Insert cell
images = ({
spongebob: FileAttachment("spongebob.png"),
fry: FileAttachment("Futurama-Fry.jpg")
})
Insert cell
Insert cell
async function makeMeme(imgName, topText, bottomText) {
let img = await images[imgName].image();
// This simply returns some HTML with a bolded paragraph above and below the image
return html`
<p><strong>${topText}</strong></p>
${img}
<p><strong>${bottomText}</strong><p>
`
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
makeMeme("spongebob", "Other people: That spongebob meme isn't funny", "Me: ThAt SpOnGeBoB mEmE iSn'T fUnNy")
Insert cell
Insert cell
Insert cell
viewof selectedMeme = Inputs.select(Object.keys(images), {label: "Select your meme template: "})
Insert cell
Insert cell
selectedMeme
Insert cell
Insert cell
Insert cell
viewof text = Inputs.text({label: "top and bottom Captions"})
Insert cell
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
Insert cell
viewof spongebob = Inputs.checkbox(["Spongbob", "chicken fry"], {label: "which show", value: ["A"]})
Insert cell
viewof spongebob1 = Inputs.checkbox(["Spongbob", "chicken fry"], {label: "which show", value: ["A"]})
Insert cell
Insert cell
Insert cell
//
Insert cell
makeMeme(selectedMeme,topojson, text)
Insert cell
viewof showpreference = Inputs.select(["spongbob", "fry"], {label: "Select one"})
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