Public
Edited
Apr 29, 2023
viewof Gender = Inputs.radio(["Male", "Female"], {
label: "Gender:",
value: "Male"
})
import { build_samples } from "@mcmcclur/adaptive-plotter"
Plot.plot({
marks: [
Plot.dot(dogs, { x: "name", y: selection, fill: "weight", r: selection2 })
]
})
Inputs.table(wb_data)
data_2019 = wb_data.filter(row => row.year === 2019)
Inputs.table(data_2019)
world_bank_data@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
width,
height: 500,
marks: [
Plot.rectY(data_2019, Plot.binX({y: "count"}, {x: "life", fill: "region"})),
Plot.ruleY([0])
],
color: {
legend: true
},
facet: {
data: data_2019,
y: "region",
x: "income_group",
marginRight: 150,
label: null
}
})
Plot.plot({
marks: [
Plot.dot(data_2019, {
x: "gdp",
y: "life",
fill: "region",
r: "population"
})
],
x: { type: "log" },
color: { legend: true, scheme: "blues" }
})
scatterChart = addTooltips(
Plot.plot({
width,
facet: {
data: filterData,
x: "region"
},
marks: [
Plot.dot(filterData, {
x: "gdp",
y: "life",
fill: "country",
r: "population",
title: (d) => `${d.country}`
})
],
x: { type: "log", domain: d3.extent(wb_data, (d) => d.gdp) },
y: { type: "log", domain: d3.extent(wb_data, (d) => d.life) }
// color: { legend: true, scheme: "blues" }
}),
{ fill: "black" }
)
d3.extent(wb_data, (d) => d.year)
viewof selectedYear = Inputs.range(
d3.extent(wb_data, (d) => d.year),
{ label: "Selected Year", step: 1, value: d3.min(wb_data, (d) => d.year) }
)
barRaceSub = wb_data.filter((d) => d.year === selectedYear)
addTooltips(
Plot.plot({
width,
marks: [
Plot.barX(barRaceSub, {
x: "gdp",
y: "country",
fill: "country",
title: (d) =>
`${d.country}\n had a GDP value of ${round(
d.gdp / 1000000000000,
2
)} trillions`,
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.ruleX([0])
],
marginLeft: 350
}),
{ fill: "black" }
)
temperature_data = [
{ x: 0, y: 60, time: "induction" },
{ x: 1, y: 60, time: "induction" },
{ x: 2, y: 60, time: "induction" },
{ x: 3, y: 30, time: "induction" },
{ x: 4, y: 30, time: "maintenance" },
{ x: 5, y: 30, time: "maintenance" },
{ x: 6, y: 30, time: "maintenance" },
{ x: 7, y: 30, time: "maintenance" },
{ x: 11, y: 60, time: "rewarming" },
{ x: 12, y: 60, time: "rewarming" },
{ x: 13, y: 60, time: "rewarming" }
]
addTooltips(
Plot.plot({
width,
marks: [
Plot.line(temperature_data, {
x: "x",
y: "y"
// fill: "time",
})
],
marginLeft: 10
}),
{ fill: "black" }
)
round = (n, places) => {
if (!places) return Math.round(n);
const d = 10 ** places;
return Math.round(n * d) / d;
}
db = DuckDBClient.of({
wb_data,
codes: FileAttachment("country_codes@1.csv")
})
wb_data
Type Table, then Shift-Enter. Ctrl-space for more options.
import { DuckDBClient } from "@cmudig/duckdb-client"
import { Choropleth, countries, countrymesh } from "@d3/world-choropleth"
import {addTooltips} from "@mkfreeman/plot-tooltip"
country_codes = FileAttachment("country_codes@1.csv").csv()
world_bank_data = FileAttachment("world_bank_data@1.csv").csv()
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.
