Public
Edited
May 7, 2023
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRz13w8tktFqN3mbmA-p2RZXi31z7ig6Qv20TW1Hc8-6FwvGM3PBQz1JXwb97VdhRHocAwpxMRriTXE/pub?gid=794732090&single=true&output=csv"
data = d3.csv(url,d3.autoType)
viewof table = Inputs.table(data)
Plot.plot({
width: 800,
height: 600,
padding: 30,
style: "background-color: white;",
projection: {type: "equirectangular"},
marks: [
Plot.geo(data, {
x: "longitude",
y: "latitude",
shape: "circle",
size: 10,
fill: "#69b3a2",
stroke: "black",
projection: "equirectangular",
tooltip: {
content: (d) => d.quote_body
}
})
]
});
const dummyData = [ {longitude: -122.431297, latitude: 37.773972, quote_body: 'San Francisco'}, {longitude: -73.935242, latitude: 40.730610, quote_body: 'New York'}, {longitude: 139.691706, latitude: 35.689487, quote_body: 'Tokyo'}];
Plot.plot({
width: 800,
height: 600,
padding: 30,
style: "background-color: white;",
projection: {type: "equirectangular"},
marks: [
Plot.geo(dummyData, {
x: "longitude",
y: "latitude",
shape: "circle",
size: 10,
fill: "#69b3a2",
stroke: "black",
projection: "equirectangular",
tooltip: {
content: (d) => d.quote_body
}
})
]
});
world = d3.json("https://gist.githubusercontent.com/jk979/e36a0b630a3f9565e7c2aeeaba002984/raw/e01abe1dc330e28484dbaafd44a7f2ae62f802ba/countries_110.json")
import {slider} from "@jashkenas/inputs"
country_names = world.objects.ne_110m_admin_0_countries.geometries.map(f => f.properties.NAME_LONG);
viewof year = slider({
min: 1961,
max: 1985,
value: 1961,
step: 1,
title: "Year"
})
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.
