The avatar for @embracelife
深度碎片
as simple as possible
Published
Observable tutorials
Edited
Nov 25, 2019
Fork of Introduction to views
Observable tutorials
File AttachmentsSlideViews are Mutable ValuesGenerator Cells, Functions and ObjectsCustom GeneratorsNotebook VisualizerHello and Welcome!Synchronized ViewsIntroduction to Promises
Introduction to Views
Introduction 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
domOnly = html`<input type=range min=0 max=1 step=any>`
Insert cell
domOnly
Insert cell
slider_value = md `## slider + value`
Insert cell
viewof x = html`<input type=range min=0 max=1 step=any>`
Insert cell
x
Insert cell
Insert cell
viewof message = html`<input type=text placeholder="Say hello">`
Insert cell
message
Insert cell
Insert cell
viewof color = html`<select>
<option>red
<option>orange
<option>yellow
<option selected>green
<option>blue
<option>violet
</select>`
Insert cell
color
Insert cell
Insert cell
point
Insert cell
Insert cell
Insert cell
Insert cell
stroke
Insert cell
Insert cell
viewof silly = {
const element = html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
Insert cell
silly
Insert cell
Insert cell
explicitView = html`<input type=range>`
Insert cell
explicitValue = Generators.input(explicitView)
Insert cell
Insert cell
viewof count = {
const element = html`<div style="font-size:64px;user-select:none;">🤪</div>`;
element.value = 0;
element.onclick = () => {
++element.value;
element.dispatchEvent(new CustomEvent("input"));
};
return element;
}
Insert cell
count
Insert cell
Insert cell
Insert cell
Insert cell
sphere = ({type: "Sphere"})
Insert cell
graticule = d3.geoGraticule10()
Insert cell
land = topojson.feature(world, world.objects.land)
Insert cell
world = d3.json(await require.resolve("world-atlas@1/world/50m.json"))
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3-fetch@1", "d3-geo@1", "d3-shape@1")
Insert cell
stylesheet
Insert cell
import { stylesheet } from "@embracelife/tutorial-utilities"
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