Published
Edited
Jul 6, 2022
2 + 4
greet("members of the data viz meetup")
function greet(name) {
return "Hello, " + name;
}
import { countries } from "@ee2dev/plot-party"
countries
Inputs.table(countries)
import { SummaryTable } from "@observablehq/summary-table"
SummaryTable(countries)
Plot.plot({
marginLeft: 100,
height: 3000,
marks: [
Plot.dot(countries, {
y: "country",
x: "area"
})
]
})
Plot.plot({
marginLeft: 100,
height: 3000,
marks: [
Plot.dot(countries, {
y: "country",
x: "area",
r: 5,
fill: "region"
})
]
})
Plot.plot({
marginLeft: 100,
height: 3000,
marks: [
Plot.dot(countries, {
y: "country",
x: "area",
r: 5,
fill: "region",
sort: { y: "x" }
})
]
})
Plot.plot({
marginLeft: 100,
height: 3000,
marks: [
Plot.dot(countries, {
y: "country",
x: "area",
r: 5,
fill: "region",
sort: { y: "x", reverse: true }
})
]
})
Plot.plot({
marginLeft: 100,
marks: [
Plot.dot(countries, {
y: "country",
x: "area",
r: 5,
fill: "region",
sort: { y: "x", reverse: true, limit: 30 }
})
]
})
select
Plot.plot({
marginLeft: 100,
marks: [
Plot.dot(countries, {
y: "country",
x: select,
r: 5,
fill: "region",
sort: { y: "x", reverse: true, limit: 30 }
})
]
})
Plot.plot({
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.frame(),
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
]
})
viewof myCountry = Inputs.select(getCategories("country"), {
label: "Select country"
})
Plot.plot({
height: 600,
width,
inset: 5,
facet: {
data: countries,
x: "region"
},
marks: [
Plot.frame(),
Plot.dot(countries, {
x: "fert_rate",
y: "area",
fill: "region",
fillOpacity: (d) => (d.country === myCountry ? 1 : 0.1),
r: 5,
stroke: "black",
strokeOpacity: (d) => (d.country === myCountry ? 1 : 0.1)
}),
Plot.text(countries, {
x: "fert_rate",
y: "area",
text: "country",
fillOpacity: (d) => (d.country === myCountry ? 1 : 0),
textAnchor: "start",
dx: 10,
dy: -10,
fontSize: 16
})
]
})
Treemap(flare, {
path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.name.split(".").pop(), // display text
group: (d) => d.name.split(".")[1], // for color; e.g. animate
value: (d) => d?.size, // area of each rect
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 500
})
[...new Set(countries.map((d) => d.region))]
function getCategories(column) {
return [...new Set(countries.map((d) => d[column]))];
}
getCategories("region")
import {Treemap} from "@d3/treemap"
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.
