The avatar for @embracelife
深度碎片
as simple as possible
Published
Observable tutorials
Edited
Nov 5, 2019
7
Observable tutorials
File Attachments
SlideViews are Mutable ValuesGenerator Cells, Functions and ObjectsCustom GeneratorsNotebook VisualizerHello and Welcome!Synchronized ViewsIntroduction to PromisesIntroduction to ViewsIntroduction to HTMLIntroduction to DataIntroduction to GeneratorsDownloading and Embedding Notebooks(2nd) Tutorial 1: Lunch calculator(0th) Observable: The User Manual(1st) Five-Minute Introduction
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
attachment = FileAttachment("example.json")
Insert cell
Insert cell
Insert cell
json = FileAttachment("example.json").json()
Insert cell
json.hello.world
Insert cell
Insert cell
text = FileAttachment("example.csv").text()
Insert cell
Insert cell
d3 = require("d3-dsv@1")
Insert cell
Insert cell
d3.csvParse(text, d3.autoType)
Insert cell
Insert cell
csv = d3.csvParse(await FileAttachment("example.csv").text(), d3.autoType)
Insert cell
Insert cell
image = FileAttachment("example.png").image()
Insert cell
Insert cell
html`<figure>
${await FileAttachment("the-persistence-of-memory.jpg").image()}
<figcaption>Image: <a href="https://en.wikipedia.org/wiki/The_Persistence_of_Memory">Salvador Dali</a></figcaption>
</figure>`
Insert cell
Insert cell
shapefile = require("shapefile@0.6")
Insert cell
collection = shapefile.read(await FileAttachment("example.shp").arrayBuffer())
Insert cell
Insert cell
chunk = {
const stream = await FileAttachment("example.shp").stream();
const reader = stream.getReader();
let done, value;
while (({done, value} = await reader.read()), !done) {
yield value;
}
}
Insert cell
Insert cell
html`<a href="${await FileAttachment("example.pdf").url()}" download>Click here to download a PDF.</a>`
Insert cell
Insert cell
blob = FileAttachment("example.csv").blob()
Insert cell
Insert cell
FileAttachment("exemple.txt") // Oops!
Insert cell
Insert cell
Insert cell
Insert cell
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