Public
Edited
May 29
1 fork
Insert cell
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
import {fromColumns, printTable} from "@uwdata/data-utilities"
Insert cell
md`${gas.length} rows, ${Object.keys(gas[0]).length} columns!`
Insert cell
printTable(gas.slice(0, 10))
Insert cell
vl.markBar()
.data(gas)
.encode(
vl.x().fieldN('TIME_PERIOD').title('Year'),
vl.y().fieldQ('OBS_VALUE').title('Observed Value')
)
.render();

Insert cell
vl.markBar()
.data(gas)
.encode(
vl.x().fieldN('Reference area').title('country'),
vl.y().fieldQ('OBS_VALUE').title('Observed Value'),
vl.color().fieldQ('OBS_VALUE')
)
.render();

Insert cell
game = FileAttachment("vgsales@1.csv").csv()
Insert cell
printTable(game.slice(0, 10))
Insert cell
// Load and process the CSV data
vgsales1 = {
const text = await FileAttachment("vgsales.csv").text();
const raw = d3.csvParse(text);

return Array.from(
d3.rollup(
raw,
v => d3.sum(v, d => +d.Global_Sales),
d => d.Genre
),
([name, value]) => ({ name, value })
);
}

Insert cell
chart = {
const width = 928;
const height = Math.min(width, 500);

const color = d3.scaleOrdinal()
.domain(vgsales1.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), vgsales1.length).reverse());

const pie = d3.pie()
.sort(null)
.value(d => d.value);

const arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1);

const labelRadius = arc.outerRadius()() * 0.8;

const arcLabel = d3.arc()
.innerRadius(labelRadius)
.outerRadius(labelRadius);

const arcs = pie(vgsales1);

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString("en-US")} million`);

svg.append("g")
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString("en-US")));

return svg.node();
}

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