Fascinated by visual presentation of data as a means to understand the world better and communicate that understanding to others.
text = fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_highest-grossing_media_franchises§ion=1`).then(response => response.json())
text.parse.text["*"]
table = {
const parser = new DOMParser();
const external = parser.parseFromString(text.parse.text["*"], "text/html");
const table = document.adoptNode(external.querySelector("table"));
table.style = `
display: block;
position: relative;
max-width: none;
max-height: 600px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
`;
return table;
}
table.querySelector("tbody tr").cloneNode(true)
table.querySelector("tr:not(:first-child)").cloneNode(true)
rows = table.querySelectorAll("tr:not(:first-child)")
names = Array.from(rows, r => r.querySelector("td:nth-child(1)").textContent.trim())
Array.from(rows, r => r.querySelector("td:nth-child(3)").textContent.trim())
+"est. $90 billion"
totalRe = /^(?:est\. )?\$(\d+(?:\.\d+)?) billion/
totalRe.exec("est. $90 billion")
function parseTotal(total) {
const match = totalRe.exec(total);
if (!match) throw new Error("unable to parse total: " + total);
return +`${match[1]}e9`;
}
totals = Array.from(rows, r => parseTotal(r.querySelector("td:nth-child(3)").textContent.trim()))
8.36 * 1e9
+"8.36e9"
parseTotal("est. $100 million") // Error!
vl.markBar()
.data({values: d3.zip(names, totals)})
.encode(
vl.y().fieldN("0").sort(null).axis({title: null}),
vl.x().fieldQ("1").axis({orient: "top", format: "$s", title: "Total revenue (est.)"})
)
.width(width)
.autosize({type: "fit-x", contains: "padding"})
.render()
d3.zip(names, totals)
vl.markBar()
.data({values: d3.zip(names, totals)})
.encode(
vl.y().fieldN("0").sort({encoding: "x", order: "descending"}).axis({title: null}),
vl.x().fieldQ("1").axis({orient: "top", format: "$s", title: "Total revenue (est.)"})
)
.width(width)
.autosize({type: "fit-x", contains: "padding"})
.render()
breakdowns = Array.from(rows, r => r.querySelector("td:nth-child(4)").textContent.trim())
breakdowns[0]
parseBreakdown(breakdowns[0])
function parseBreakdown(breakdown) {
return breakdown.split(/\n/).map(b => {
const [channel, revenue] = b.split(" – ");
return {channel, revenue};
});
}
revenueRe = /^\$([0-9,]+(?:\.[0-9]+)?)(?:\s(b|m)illion)?/
revenueRe.exec("$61.1 billion[a]")
revenueRe.exec("$520,000[az]")
parseRevenue("$61.1 billion[a]")
parseRevenue("$520,000[az]")
function parseRevenue(revenue) {
const match = revenueRe.exec(revenue);
if (!match) throw new Error("unable to parse revenue: " + revenue);
return +`${match[1].replace(/,/g, "")}e${match[2] === "b" ? 9 : match[2] === "m" ? 6 : 0}`;
}
revenues = Array.from(rows, r => {
const text = r.querySelector("td:nth-child(4)").textContent.trim();
const breakdown = parseBreakdown(text);
return breakdown.map(({channel, revenue}) => {
return {channel, revenue: parseRevenue(revenue)};
});
})
rows[names.findIndex(n => n === "Super Sentai / Power Rangers")].cloneNode(true)
vl.markCircle()
.data({
values: d3.zip(names, revenues).flatMap(([name, revenues]) => {
return revenues.map(({channel, revenue}) => {
return {name, channel, revenue};
});
})
})
.encode(
vl.y().fieldN("name").sort("x").axis({title: null}),
vl.size().fieldQ("revenue").aggregate("sum"),
vl.x().fieldN("channel").sort("y").axis({orient: 'top'})
)
.width(width)
.autosize({type: "fit-x", contains: "padding"})
.render()
import {vl} from "@vega/vega-lite-api"
d3 = require("d3-array@2")
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.
