Public
Edited
Nov 20, 2021
1 fork
14 stars
Insert cell
Insert cell
Insert cell
gapminder = d3.csv(dataurl)
Insert cell
Inputs.table(gapminder, { width: 800 })
Insert cell
vegaEmbed({
width: 700,
height: 400,
data: { values: gapminder },
mark: "circle",
encoding: {
x: { field: "gdpPercap", type: "Q", scale: { type: "log" } },
y: { field: "lifeExp", type: "Q" },
color: { field: "continent", type: "N" },
size: { field: "pop", type: "Q" }
}
})
Insert cell
Insert cell
vegaEmbed({
width: 500,
height: 225,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{ window: [{ op: "row_number", as: "unit" }] },
{ calculate: "ceil(datum.unit/ 8)", as: "unitX" },
{ calculate: "datum.unit - (datum.unitX - 1) * 8", as: "unitY" }
],
mark: "circle",
encoding: {
x: { field: "unitX", type: "N", axis: null },
y: { field: "unitY", type: "N", axis: null, sort: "descending" },
size: { value: 600 },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})
Insert cell
Insert cell
vegaEmbed({
width: 500,
height: 225,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{
window: [{ op: "row_number", as: "unit" }],
},
{ calculate: "ceil(datum.unit/ 8)", as: "unitX" },
{ calculate: "datum.unit - (datum.unitX - 1) * 8", as: "unitY" }
],
mark: "square",
encoding: {
x: { field: "unitX", type: "N", axis: null },
y: { field: "unitY", type: "N", axis: null, sort: "descending" },
color: { field: "continent", type: "N" },
size: { value: 600 },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})
Insert cell
Insert cell
vegaEmbed({
width: 200,
height: 225,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{ window: [{ op: "row_number", as: "unitC" }], groupby: ["continent"] },
{ calculate: "ceil(datum.unitC/ 8)", as: "unitX" },
{ calculate: "datum.unitC - (datum.unitX - 1) * 8", as: "unitY" }
],
mark: "square",
encoding: {
x: { field: "unitX", type: "N", axis: null },
y: { field: "unitY", type: "N", axis: null, sort: "descending" },
color: { field: "continent", type: "N", legend: null },
column: { field: "continent", type: "N" },
size: { value: 600 },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})
Insert cell
gapminderCol = aq.from(gapminder).derive({ row_num: (d) => aq.op.row_number() })
Insert cell
Inputs.table(gapminderCol)
Insert cell
Insert cell
vegaEmbed({
width: 75,
height: 400,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{ window: [{ op: "row_number", as: "unitC" }], groupby: ["continent"] }
],
mark: "rect",
encoding: {
y: { field: "unitC", type: "N", sort: "descending" },
color: { field: "continent", type: "N", legend: null },
column: { field: "continent", type: "N" },
size: { value: 600 },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})
Insert cell
Insert cell
vegaEmbed({
width: 400,
height: 400,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{ window: [{ op: "row_number", as: "unitY" }], groupby: ["continent"] }
],
mark: "rect",
encoding: {
x: {
field: "continent",
type: "N",
axis: { labelAngle: 0 },
sort: "ascending"
},
y: { field: "unitY", type: "N", sort: "descending", axis: null },
color: { field: "lifeExp", type: "Q", bin: true },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})
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