data = (await vegaDatasets["penguins.json"]())
.filter(d => d[quantAttrib] !== null)
.map((d, i) => {
d.i = i;
return d;
})
quantAttrib = "Beak Length (mm)"
vl
.mark({ type: "tick" })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false })
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", height / 2);
return svg.node();
}
vl
.mark({ type: "tick" })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl.column().fieldN("Species")
)
.data(data)
.width(width * .3)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height * 1.5]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const sampleData = data.slice(0, 5);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth / 6]);
g.selectAll(".row")
.data(sampleData)
.join("g")
.attr(
"transform",
(d, i) => `translate(${Math.random() * width * .7}, ${i * 20})`
)
.call(d3.axisTop(x).ticks(3))
.append("circle")
.attr("r", 2)
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", 5);
return svg.node();
}
vl
.markBar()
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl
.y()
.fieldN("i")
.axis(null)
)
.data(data)
.height(height)
.width(width * .8)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain([0, d3.max(data, d => d[quantAttrib])])
.range([0, iwidth])
.nice();
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("rect")
.attr("height", 5)
.attr("width", d => x(d[quantAttrib]))
.attr("y", (d, i) => i * (5 + 1));
return svg.node();
}
vl
.markPoint({ shape: "wedge", size: 5000 })
.encode(
vl
.angle()
.fieldQ(quantAttrib)
.scale({ range: [-90, 90], reverse: true })
)
.data(data)
.height(height)
.width(width * .8)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const angle = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, -180])
.nice();
g.selectAll(".row")
.data(data)
.join("rect")
.attr("height", 1)
.attr("width", 50)
.attr("y", (height * 2) / 3)
.attr("x", width / 2)
.attr(
"transform",
d => `rotate(${angle(d[quantAttrib])}, ${width / 2}, ${(height * 2) / 3})`
);
return svg.node();
}
vl
.markCircle()
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl.size().fieldQ(quantAttrib)
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
const r = d3
.scaleSqrt()
.domain([0, d3.max(data, d => d[quantAttrib])])
.range([0, 20])
.nice();
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", d => r(d[quantAttrib]))
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", height / 2);
return svg.node();
}
vl
.markCircle({ size: 500 })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl
.color()
.fieldQ(quantAttrib)
.scale({ scheme: "greys" })
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
const c = d3
.scaleSequential(d3.interpolateGreys)
.domain(d3.extent(data, d => d[quantAttrib]));
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 10)
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", height / 2)
.style("fill", d => c(d[quantAttrib]));
return svg.node();
}
vl
.markCircle({ size: 500 })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl
.color()
.fieldQ(quantAttrib)
.scale({ scheme: "greens" })
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
const c = d3
.scaleSequential(d3.interpolateBlues)
.domain(d3.extent(data, d => d[quantAttrib]));
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 10)
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", height / 2)
.style("fill", d => c(d[quantAttrib]));
return svg.node();
}
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
const curv = d3
.scaleLinear()
.domain([0, d3.max(data, d => d[quantAttrib])])
.range([0, 50])
.nice();
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("path")
.attr("class", "row")
.attr("d", d => {
const x0 = x(d[quantAttrib]),
y0 = 20,
y1 = y0 + 30;
return `M ${x0} ${y0} Q ${x0 + curv(d[quantAttrib])} ${y0 +
(y1 - y0) / 2} ${x0} ${y1}`;
});
return svg.node();
}
catAttrib = "Species"
vl
.markCircle({ size: 500 })
.encode(vl.x().fieldN(catAttrib), vl.y().fieldQ("i"))
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleBand()
.domain(new Set(data.map(d => d[catAttrib])).values())
.range([0, iwidth]);
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d[catAttrib]) + x.bandwidth() / 2)
.attr("cy", () => (Math.random() * height) / 2);
return svg.node();
}
vl
.markCircle({ size: 500 })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl
.color()
.fieldN(catAttrib)
.scale({ scheme: "pastel1" })
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[quantAttrib]))
.range([0, iwidth])
.nice();
const color = d3
.scaleOrdinal(d3.schemePastel1)
.domain(new Set(data.map(d => d[catAttrib])).values());
g.append("g").call(d3.axisTop(x));
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d[quantAttrib]))
.attr("cy", height / 2)
.style("fill", d => color(d[catAttrib]));
return svg.node();
}
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const dur = d3
.scaleBand()
.domain(new Set(data.map(d => d[catAttrib])).values())
.range([0, 1]);
const attrName = d3
.scaleOrdinal()
.domain(new Set(data.map(d => d[catAttrib])).values())
.range(["", "cx", "cy"]);
g.selectAll(".row")
.data(data)
.join("circle")
.attr("r", 5)
.attr(
"transform",
d =>
`translate(${Math.random() * iwidth}, ${(Math.random() * height) / 2})`
)
.append("animate")
.attr("attributeName", d => attrName(d[catAttrib]))
.attr("values", "0;5;0")
.attr("dur", d => dur(d[catAttrib]) + "s")
.attr("repeatCount", "indefinite");
// <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
return svg.node();
}
vl
.markPoint({ size: 50 })
.encode(
vl
.x()
.fieldQ(quantAttrib)
.scale({ zero: false }),
vl.shape().fieldN(catAttrib)
)
.data(data)
.width(width * .9)
.render()
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const iwidth = width - margin.right - margin.left;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const symbol = d3.symbol().size(50);
const symbols = d3
.scaleOrdinal()
.domain(new Set(data.map(d => d[catAttrib])).values())
.range(d3.symbols);
g.selectAll(".row")
.data(data)
.join("path")
.attr("class", "row")
.attr(
"transform",
d =>
`translate(${Math.random() * iwidth},${(Math.random() * height) / 2} )`
)
.attr("d", d => symbol.type(symbols(d[catAttrib]))());
return svg.node();
}
style = html`<style>
rect { fill: steelblue; }
circle { fill: steelblue; }
path.row { fill: none; stroke: steelblue}
</style>`
margin = ({ left: 20, right: 20, top: 20, bottom: 20 })
height = 100
vegaDatasets = require('vega-datasets@2')
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
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.
