The avatar for @sorami
Sorami Hisamoto
Interested in data visualization and tools for thought.
Public
MIERUNE社内ハンズオン2022
Edited
Nov 9, 2022
MIERUNE社内ハンズオン2022
ハンズオン1: ハローObservable!
ハンズオン2: ハローD3.js!ハンズオン3: D3.jsで地図
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
x = 5000
Insert cell
y = x * x * 100
Insert cell
`x` の値は `${x}` です。

`y` の値は `${y}` です。
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// 一つ目のセル
myName = "..."
Insert cell
// 二つ目のセル
function () {}
Insert cell
// 三つ目のセル
Insert cell
Insert cell
Insert cell
viewof celcius = Inputs.range([0, 40], { value: 25, step: 0.1, label: "気温" })
Insert cell
ol = require("ol@7.1")
Insert cell
- 現在の気温は「${celcius}°C」です！
- これは華氏でいうと「${celcius * 1.8 + 32}℉」です
Insert cell
Insert cell
viewof color = Inputs.color({ label: "色", value: "#005773" })
Insert cell
viewof date = Inputs.date({ label: "日付" })
Insert cell
viewof file = Inputs.file({
label: "CSVファイル",
accept: ".csv",
required: true
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {municipalities} from "@sorami/japanese-from-hokkaido-to-okinawa"
Insert cell
municipalities
Insert cell
Insert cell
Insert cell
viewof minPopulation = Inputs.range([0, 2_000_000], {
value: 0,
step: 100000,
label: "人口の下限"
})
Insert cell
filteredMunics = municipalities.filter((d) => d.population >= minPopulation)
Insert cell
Insert cell
Inputs.table(filteredMunics)
Insert cell
Insert cell
Plot.rectY(
filteredMunics,
Plot.binX({ y: "count" }, { x: "population", fill: "prefecture" })
).plot()
Insert cell
Plot.rect(
filteredMunics,
Plot.bin(
{ fillOpacity: "count" },
{ x: "longitude", y: "latitude", fill: "prefecture" }
)
).plot()
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