The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Oct 28, 2022
1 fork
13 stars
1
Insert cell
Insert cell
dogZip = FileAttachment("Dog_Photos@3.zip").zip()
Insert cell
Insert cell
Insert cell
fileNames = dogZip.filenames
Insert cell
Insert cell
${fileNames.map((i) => `- ${i}\n`)}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
readMe = dogZip.file("Readme.txt").text()
Insert cell
Insert cell
html`<div style="background: #FFFCE1; padding: 1em;">${readMe.replace(/(?:\r\n|\r|\n)/g, '<br />')}</div>`
Insert cell
Insert cell
Insert cell
dogZip.file("n02102177_1257.jpg").image()
Insert cell
Insert cell
viewof fileName = Inputs.select(
dogZip.filenames.filter((dogZip) => dogZip.match(/\.jpg$/)),
{label: "Select a file:"}
)
Insert cell
Insert cell
dogZip.file(fileName).image()
Insert cell
Insert cell
Insert cell
pictureListData = dogZip.file("Picture_List.csv").csv()
Insert cell
Insert cell
Inputs.table(pictureListData)
Insert cell
Insert cell
viewof fileName2 = Inputs.select(
new Map(pictureListData.map((d) => [d.Breed, d.Filename])),
{value: pictureListData.Filename, label: "Select a breed"}
)
Insert cell
dogZip.file(fileName2).image()
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