The avatar for @rveciana
Roger Veciana i Rovira
Public
Edited
Mar 13, 2024
Fork of Plot World Map
10
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
a
Insert cell
html`
<svg class='mysvg'>
<rect height=${b} width=${a} x=1 y=1 fill=tomato stroke=black />
</svg>
`
Insert cell
a + 20
Insert cell
viewof b = Inputs.range([0, 110], {value: 33, step: 1, label: "b"})
Insert cell
Insert cell
data = FileAttachment("seattle-weather.csv").csv({typed: true})
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
grid: true,
width: width,
marks: [
Plot.line(data, {x: "date", y: "temp_max", stroke: "red"}),
Plot.line(data, {x: "date", y: "temp_min", stroke: "blue"}),
Plot.line(data, {x: "date", y: "wind", stroke: "green"})
]
})
Insert cell
earthquakes = d3.json("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson")
Insert cell
world = FileAttachment("countries-110m.json").json()
Insert cell
land = topojson.feature(world, world.objects.land)
Insert cell
Plot.plot({
projection: "equirectangular",
r: {transform: (r) => Math.pow(10, r)}, // Richter to amplitude
marks: [
Plot.geo(land, {fill: "currentColor", fillOpacity: 0.2}),
Plot.sphere(),
Plot.geo(earthquakes, {
r: (d) => d.properties.mag,
fill: "red",
fillOpacity: 0.2,
stroke: "red",
title: (d) => d.properties.title,
href: (d) => d.properties.url,
target: "_blank"
})
]
})
Insert cell
Insert cell
import {chart} from "@mbostock/the-wealth-health-of-nations"
Insert cell
Insert cell
Insert cell
Insert cell
db.describe()
Insert cell
db
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
db
select brand, avg(price_in_usd) as price from items group by brand
Insert cell
Plot.plot({marks: [
Plot.barY(db2, {x: "brand", y: "price"})
]})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function f(x) {
return x**2
}
Insert cell
Insert cell
Insert cell
graph
Insert cell
Insert cell
Insert cell
import {make_cycloid} from "@mcmcclur/the-cycloid"
Insert cell
import {viewof pars1_1} from "@howardyao/statistics-basic-concepts"
Insert cell
import {plot1_1} from "@howardyao/statistics-basic-concepts"
Insert cell
data1_1 = {
let x = d3.range(-2, 2, 4/pars1_1.n);
let y = x.map(d => jstat.normal.pdf(d, pars1_1.mean, pars1_1.sd));
let z = x.map(d => jstat.normal.pdf(d, pars1_1.mean, pars1_1.sd / Math.sqrt(pars1_1.n) ));
return x.map((d,i) => ({'x': d, 'sd': y[i], 'sem': z[i] }))
}
Insert cell
jstat = require('jstat')

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