The avatar for @soma
Soma Maroju
Public
Edited
Oct 24, 2023
Fork of Session 3: Introduction to Observable Plot (Follow-along version)
•
1 fork
5
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wb_tidy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(worldbank, {
filter: d => d.year == 2010,
x: "gdp",
y: "co2",
})
],
color: { legend: true},
r: { domain: d3.extent(worldbank, (d) => d.life_exp), range: [1, 10] },
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(stocks, {x: "Date", y: "Close", stroke: "symbol"})
],
color: {legend: true}
})
Insert cell
Insert cell
Insert cell
Insert cell
Meteorite_Landings.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
viewof pickColor = Inputs.color({label: "Favorite color", value: "#4682b4"})
Insert cell
Insert cell
// Update the fill option to depend on the value of pickColor to make it interactive!
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
aapl = FileAttachment("aaplStock.csv").csv({typed: true})
Insert cell
goog = FileAttachment("googStock.csv").csv({typed: true})
Insert cell
tsla = FileAttachment("tslaStock.csv").csv({typed: true})
Insert cell
dateParse = d3.timeParse("%m/%d/%y")
Insert cell
stocks = aapl.map(d => ({...d, symbol: "aapl"})).concat(goog.map(d => ({...d, symbol: "goog"})), tsla.map(d => ({...d, symbol: "tsla"}))).map(d => ({...d, Date: dateParse(d.Date)}))
Insert cell
import {land} from "@observablehq/plot-live-earthquake-map"
Insert cell
import { showMe } from "@observablehq/show-me"
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