Public
Edited
Jul 10, 2024
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
return colorSchemes.map((c) => ({ c: c }));
}
Insert cell
colorSchemeOrInterpolate(capitalized("BuPu"), 2)
Insert cell
Insert cell
Insert cell
dataset
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
function uniqueValue(duplicatedData) {
return Array.from(new Set(duplicatedData.map(JSON.stringify))).map(JSON.parse)
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// To use copied code replace "data" with your own variable
world_grid_position = aq.from(world_name).join_right(aq.from(worldGrid), ["Code", "noc"]).objects() // Uncomment to return an array of objects
Insert cell
world_grid_position
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
barChartData
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marginLeft: 200,
width: 1200,
height: 800,
x: {
// grid: true
},
marks: [
Plot.barX(totalBar, {
x: "count",
y: "infrastructure_type_id",
sort: { y: "x", reverse: true },
fill: (d) =>
d.infrastructure_type_id == "5G relationship" ? "#DC6641" : "#4A4A4A"
}),
Plot.barX(filterBarData, {
x: "count",
y: "infrastructure_type_id",
sort: { y: "x", reverse: true },
fill: (d) =>
d.infrastructure_type_id == "5G relationship" ? "#DC6641" : "#747474",
insetTop: 5,
insetBottom: 5
}),
Plot.text(totalBar, {
x: "count",
y: "infrastructure_type_id",
text: "count",
fontWeight: "bold",
fontSize: 10,
dx: 12
}),
Plot.text(filterBarData, {
x: "count",
y: "infrastructure_type_id",
text: "count",
fill: "white",
fontWeight: "bold",
fontSize: 12,
dx: 12
}),
Plot.axisY({
ticks: 0,
tickSize: 0
}),
Plot.axisX({
ticks: 0,
tickSize: 0
})
]
})
Insert cell
group15 = FileAttachment("Group 1 (5).png").image()
Insert cell
totalBar = Array.from(
d3.rollup(
data,
(v) => v.length,
(d) => d.infrastructure_type_id
),
([key, value]) => ({ infrastructure_type_id: key, count: value })
)
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