44:["$","title",null,{"children":"The Skarsgård Fingerprint | Hena | Observable"}] 4c:T1bfb,// The acting Skarsgårds and a selection of their notable roles (not complete filmographies). // Each role gets ONE archetype. The archetype calls are opinions. Edit freely. const family = [ {name: "Stellan", born: 1951}, {name: "Alexander", born: 1976}, {name: "Gustaf", born: 1980}, {name: "Bill", born: 1990}, {name: "Valter", born: 1995} ]; const archetypes = [ {id: "science", label: "Men of Science"}, {id: "warrior", label: "Vikings & Warriors"}, {id: "official", label: "Cops, Spies & Officials"}, {id: "dad", label: "Dads & mentors"}, {id: "heartthrob", label: "Heartthrobs"}, {id: "nonhuman", label: "Not Technically Human"}, {id: "villain", label: "Villains"} ]; const roles = [ {who: "Stellan", year: 1990, title: "The Hunt for Red October", role: "Capt. Viktor Tupolev", archetype: "warrior"}, {who: "Stellan", year: 1996, title: "Breaking the Waves", role: "Jan Nyman", archetype: "heartthrob"}, {who: "Stellan", year: 1997, title: "Insomnia", role: "Jonas Engström", archetype: "official"}, {who: "Stellan", year: 1997, title: "Good Will Hunting", role: "Prof. Gerald Lambeau", archetype: "science"}, {who: "Stellan", year: 1998, title: "Ronin", role: "Gregor", archetype: "villain"}, {who: "Stellan", year: 1999, title: "Deep Blue Sea", role: "Jim Whitlock", archetype: "science"}, {who: "Stellan", year: 2004, title: "King Arthur", role: "Cerdic", archetype: "warrior"}, {who: "Stellan", year: 2006, title: "Pirates of the Caribbean: Dead Man's Chest", role: "Bootstrap Bill Turner", archetype: "dad"}, {who: "Stellan", year: 2008, title: "Mamma Mia!", role: "Bill Anderson", archetype: "dad"}, {who: "Stellan", year: 2009, title: "Angels & Demons", role: "Cmdr. Maximilian Richter", archetype: "official"}, {who: "Stellan", year: 2011, title: "Thor", role: "Erik Selvig", archetype: "science"}, {who: "Stellan", year: 2011, title: "The Girl with the Dragon Tattoo", role: "Martin Vanger", archetype: "villain"}, {who: "Stellan", year: 2019, title: "Chernobyl", role: "Boris Shcherbina", archetype: "official"}, {who: "Stellan", year: 2021, title: "Dune", role: "Baron Vladimir Harkonnen", archetype: "villain"}, {who: "Stellan", year: 2022, title: "Andor", role: "Luthen Rael", archetype: "official"}, {who: "Stellan", year: 2025, title: "Sentimental Value", role: "Gustav Borg", archetype: "dad"}, {who: "Alexander", year: 2001, title: "Zoolander", role: "Meekus", archetype: "heartthrob"}, {who: "Alexander", year: 2008, title: "Generation Kill", role: "Sgt. Brad \"Iceman\" Colbert", archetype: "warrior"}, {who: "Alexander", year: 2008, title: "True Blood", role: "Eric Northman", archetype: "nonhuman"}, {who: "Alexander", year: 2010, title: "Moomins and the Comet Chase", role: "Moomintroll (voice)", archetype: "nonhuman"}, {who: "Alexander", year: 2011, title: "Melancholia", role: "Michael", archetype: "heartthrob"}, {who: "Alexander", year: 2012, title: "Battleship", role: "Cmdr. Stone Hopper", archetype: "warrior"}, {who: "Alexander", year: 2014, title: "The Giver", role: "Jonas' Father", archetype: "dad"}, {who: "Alexander", year: 2016, title: "The Legend of Tarzan", role: "Tarzan", archetype: "warrior"}, {who: "Alexander", year: 2017, title: "Big Little Lies", role: "Perry Wright", archetype: "villain"}, {who: "Alexander", year: 2018, title: "The Little Drummer Girl", role: "Gadi Becker", archetype: "official"}, {who: "Alexander", year: 2019, title: "Long Shot", role: "Prime Minister James Steward", archetype: "official"}, {who: "Alexander", year: 2020, title: "The Stand", role: "Randall Flagg", archetype: "villain"}, {who: "Alexander", year: 2021, title: "Godzilla vs. Kong", role: "Nathan Lind", archetype: "science"}, {who: "Alexander", year: 2021, title: "Succession", role: "Lukas Matsson", archetype: "villain"}, {who: "Alexander", year: 2022, title: "The Northman", role: "Amleth", archetype: "warrior"}, {who: "Alexander", year: 2024, title: "What We Do in the Shadows", role: "Vampire", archetype: "nonhuman"}, {who: "Alexander", year: 2025, title: "Murderbot", role: "Murderbot", archetype: "nonhuman"}, {who: "Alexander", year: 2026, title: "Wicker", role: "The Wicker Husband", archetype: "nonhuman"}, {who: "Gustaf", year: 2003, title: "Evil", role: "Otto Silverhielm", archetype: "villain"}, {who: "Gustaf", year: 2007, title: "Arn – The Knight Templar", role: "King Canute I", archetype: "warrior"}, {who: "Gustaf", year: 2012, title: "Kon-Tiki", role: "Bengt Danielsson", archetype: "science"}, {who: "Gustaf", year: 2013, title: "Vikings", role: "Floki", archetype: "warrior"}, {who: "Gustaf", year: 2018, title: "Westworld", role: "Karl Strand", archetype: "official"}, {who: "Gustaf", year: 2020, title: "Cursed", role: "Merlin", archetype: "dad"}, {who: "Gustaf", year: 2021, title: "The Emigrants", role: "Karl Oskar", archetype: "dad"}, {who: "Gustaf", year: 2023, title: "Oppenheimer", role: "Hans Bethe", archetype: "science"}, {who: "Gustaf", year: 2025, title: "Black Bag", role: "Meacham", archetype: "official"}, {who: "Gustaf", year: 2025, title: "To Cook a Bear", role: "The Pastor", archetype: "official"}, {who: "Bill", year: 2008, title: "Pigan brinner!", role: "Teenage Nosferatu", archetype: "nonhuman"}, {who: "Bill", year: 2012, title: "Anna Karenina", role: "Captain Makhotin", archetype: "warrior"}, {who: "Bill", year: 2013, title: "Hemlock Grove", role: "Roman Godfrey", archetype: "nonhuman"}, {who: "Bill", year: 2017, title: "Atomic Blonde", role: "Merkel", archetype: "official"}, {who: "Bill", year: 2017, title: "It", role: "Pennywise", archetype: "nonhuman"}, {who: "Bill", year: 2017, title: "Moomins and the Winter Wonderland", role: "Moomintroll (voice)", archetype: "nonhuman"}, {who: "Bill", year: 2018, title: "Deadpool 2", role: "Zeitgeist", archetype: "warrior"}, {who: "Bill", year: 2019, title: "Villains", role: "Mickey", archetype: "villain"}, {who: "Bill", year: 2019, title: "It Chapter Two", role: "Pennywise", archetype: "nonhuman"}, {who: "Bill", year: 2020, title: "The Devil All the Time", role: "Willard Russell", archetype: "dad"}, {who: "Bill", year: 2021, title: "Eternals", role: "Kro (voice)", archetype: "nonhuman"}, {who: "Bill", year: 2022, title: "Clark", role: "Clark Olofsson", archetype: "villain"}, {who: "Bill", year: 2023, title: "John Wick: Chapter 4", role: "Marquis Vincent de Gramont", archetype: "villain"}, {who: "Bill", year: 2023, title: "Boy Kills World", role: "Boy", archetype: "warrior"}, {who: "Bill", year: 2024, title: "The Crow", role: "Eric Draven", archetype: "nonhuman"}, {who: "Bill", year: 2024, title: "Nosferatu", role: "Count Orlok", archetype: "nonhuman"}, {who: "Bill", year: 2025, title: "It: Welcome to Derry", role: "Pennywise", archetype: "nonhuman"}, {who: "Valter", year: 2018, title: "Lords of Chaos", role: "Bård \"Faust\" Eithun", archetype: "villain"}, {who: "Valter", year: 2021, title: "Beck", role: "Vilhelm Beck", archetype: "official"}, {who: "Valter", year: 2023, title: "Börje", role: "Börje Salming", archetype: "warrior"} ];4d:T38ba,// The typecasting fingerprint: every tile is one role, colored by archetype. // Switch between grouping by archetype and spreading over the years; click an // archetype to spotlight it across the family. function fingerprint(roles, {archetypes, family}) { const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches; const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const order = new Map(archetypes.map((a, i) => [a.id, i])); const labelOf = new Map(archetypes.map((a) => [a.id, a.label])); const color = (id) => `var(--fp-${order.get(id)})`; const ink = (id) => `var(--fp-on-${order.get(id)})`; const key = (r) => `${r.who}|${r.title}|${r.role}`; const countBy = (list, f) => d3.rollup(list, (v) => v.length, f); const total = countBy(roles, (r) => r.archetype); const root = document.createElement("div"); root.className = "kc kc-fp"; root.innerHTML = `

The whole family as one actor

`; const insight = root.querySelector(".kc-fp-insight"); const bar = root.querySelector(".kc-fp-bar"); const chips = root.querySelector(".kc-fp-chips"); const plot = root.querySelector(".kc-fp-plot"); const tip = root.querySelector(".kc-tip"); let view = "archetype"; let active = null; let W = 0; function showTip(event, html) { tip.innerHTML = html; tip.hidden = false; const box = root.getBoundingClientRect(); const tw = tip.offsetWidth; let left = event.clientX - box.left + 14; if (left + tw > box.width) left = event.clientX - box.left - tw - 14; tip.style.left = `${Math.max(0, left)}px`; tip.style.top = `${event.clientY - box.top + 14}px`; } const hideTip = () => { tip.hidden = true; }; // Family-as-one-actor bar and the archetype chips (they double as the legend) const present = archetypes.filter((a) => total.get(a.id)); for (const a of present) { const seg = document.createElement("div"); seg.dataset.id = a.id; seg.style.flex = String(total.get(a.id)); seg.style.background = color(a.id); seg.style.color = ink(a.id); const pct = Math.round((100 * total.get(a.id)) / roles.length); seg.addEventListener("pointermove", (e) => showTip(e, `${esc(a.label)}
${total.get(a.id)} of ${roles.length} roles (${pct}%)`)); seg.addEventListener("pointerleave", hideTip); bar.append(seg); const chip = document.createElement("button"); chip.type = "button"; chip.className = "kc-chip"; chip.dataset.id = a.id; chip.setAttribute("aria-pressed", "false"); chip.innerHTML = `${esc(a.label)} ${total.get(a.id)}`; chip.addEventListener("click", () => { active = active === a.id ? null : a.id; spotlight(); }); chips.append(chip); } bar.setAttribute("role", "img"); bar.setAttribute("aria-label", present.map((a) => `${a.label} ${total.get(a.id)}`).join(", ")); function labelBar() { const bw = bar.clientWidth; for (const seg of bar.children) { const n = total.get(seg.dataset.id); const pct = Math.round((100 * n) / roles.length); seg.textContent = bw && (n / roles.length) * bw > 44 ? `${pct}%` : ""; } } function defaultInsight() { let best = null; for (const a of present) { const t = total.get(a.id); if (t < 5) continue; for (const m of family) { const c = roles.filter((r) => r.who === m.name && r.archetype === a.id).length; if (!best || c / t > best.c / best.t) best = {m: m.name, a, c, t}; } } return best ? `${best.m} alone accounts for ${best.c} of the family’s ${best.t} “${best.a.label.toLowerCase()}” roles.` : ""; } function spotlight() { root.classList.toggle("has-active", !!active); for (const chip of chips.children) chip.setAttribute("aria-pressed", String(chip.dataset.id === active)); for (const seg of bar.children) seg.classList.toggle("is-dim", !!active && seg.dataset.id !== active); d3.select(plot).selectAll(".kc-tile").classed("is-dim", (d) => !!active && d.r.archetype !== active); if (!active) { insight.textContent = defaultInsight(); return; } const by = family.map((m) => [m.name, roles.filter((r) => r.who === m.name && r.archetype === active).length]) .filter(([, n]) => n).sort((a, b) => b[1] - a[1]); insight.textContent = `${labelOf.get(active)}: ${total.get(active)} roles. ` + by.map(([n, c]) => `${n} ${c}`).join(" · "); } const svg = d3.select(plot).append("svg").attr("role", "img"); const gYears = svg.append("g").attr("class", "kc-yr"); const gRows = svg.append("g"); const gTiles = svg.append("g"); function render(animate) { W = Math.round(plot.clientWidth) || 720; const narrow = W < 600; const labelW = narrow ? 0 : 190; const areaX = labelW; const areaW = W - labelW - 4; const s = narrow ? 18 : 22; const gap = 3; const step = s + gap; const cols = Math.max(1, Math.floor((areaW + gap) / step)); const dot = narrow ? 8 : 11; const dotStep = dot + 3; const years = d3.extent(roles, (r) => r.year); const xs = d3.scaleLinear([years[0] - 2, years[1] + 1], [areaX + dot, W - dot - 2]); const labelH = narrow ? 46 : 0; const rowGap = narrow ? 26 : 22; const axisH = 26; const rows = []; let y = 0; for (const m of family) { const rs = roles.filter((r) => r.who === m.name); if (!rs.length) continue; const sorted = rs.slice().sort((a, b) => order.get(a.archetype) - order.get(b.archetype) || a.year - b.year); const stack = d3.group(rs, (r) => r.year); const archH = Math.ceil(rs.length / cols) * step - gap; const yearH = d3.max(stack.values(), (v) => v.length) * dotStep - 3; const contentH = Math.max(archH, yearH, narrow ? 0 : 56); const top = y + labelH; const geo = new Map(); sorted.forEach((r, i) => geo.set(r, { archetype: {x: areaX + (i % cols) * step, y: top + (contentH - archH) / 2 + Math.floor(i / cols) * step, w: s, rx: 4}, year: null })); for (const [yr, list] of stack) { list.sort((a, b) => order.get(a.archetype) - order.get(b.archetype)).forEach((r, k) => { geo.get(r).year = {x: xs(yr) - dot / 2, y: top + contentH - dot - k * dotStep, w: dot, rx: dot / 2}; }); } const counts = countBy(rs, (r) => r.archetype); const topN = d3.max(counts.values()); const leaders = archetypes.filter((a) => counts.get(a.id) === topN); rows.push({m, rs, top: y, contentTop: top, contentH, geo, leaders, topN}); y = top + contentH + rowGap; } const plotBottom = y - rowGap; const H = plotBottom + axisH; const t = svg.transition().duration(animate && !reduce ? 750 : 0).ease(d3.easeCubicInOut); svg.attr("width", W).attr("height", H) .attr("aria-label", rows.map((r) => `${r.m.name}: ${r.rs.length} roles, most often ${r.leaders.map((a) => a.label).join(" and ")}`).join(". ")); // decade gridlines + axis, visible in year view only const ticks = d3.range(Math.ceil((years[0] - 2) / 10) * 10, years[1] + 2, 10); gYears.transition(t).attr("opacity", view === "year" ? 1 : 0); gYears.selectAll("line").data(ticks).join("line") .attr("x1", (d) => xs(d) + 0.5).attr("x2", (d) => xs(d) + 0.5).attr("y1", 0).attr("y2", plotBottom + 4); gYears.selectAll("text").data(ticks).join("text").attr("class", "kc-muted") .attr("text-anchor", "middle").attr("x", (d) => xs(d)).attr("y", plotBottom + 19).text((d) => d); const rowSel = gRows.selectAll("g.kc-row").data(rows, (r) => r.m.name).join((enter) => { const g = enter.append("g").attr("class", "kc-row"); g.append("line").attr("class", "kc-sep"); g.append("text").attr("class", "kc-name"); g.append("text").attr("class", "kc-subline kc-sub kc-muted"); g.append("rect").attr("class", "kc-sw").attr("width", 9).attr("height", 9).attr("rx", 2.5); g.append("text").attr("class", "kc-head"); return g; }); rowSel.attr("transform", (r) => `translate(0,${r.top})`); rowSel.select(".kc-sep").attr("x1", 0).attr("x2", W).attr("y1", -rowGap / 2).attr("y2", -rowGap / 2) .attr("display", (r, i) => (i ? null : "none")); const sub = (r) => `b. ${r.m.born} · ${r.rs.length} roles`; rowSel.select(".kc-name").attr("x", 0).attr("y", narrow ? 14 : 20).each(function (r) { const el = d3.select(this).text(r.m.name); if (narrow) el.append("tspan").attr("class", "kc-sub kc-muted").attr("dx", 8).text(sub(r)); }); rowSel.select(".kc-subline").attr("x", 0).attr("y", 36).attr("display", narrow ? "none" : null).text(sub); rowSel.select(".kc-sw").attr("x", 0).attr("y", narrow ? 23 : 45) .attr("fill", (r) => (r.leaders.length === 1 ? color(r.leaders[0].id) : "var(--kc-axis)")); rowSel.select(".kc-head").attr("x", 15).attr("y", narrow ? 31 : 53) .text((r) => (r.leaders.length === 1 ? `${r.topN}× ${r.leaders[0].label}` : `Tied: ${r.leaders.length} archetypes, ${r.topN} each`)); const all = rows.flatMap((row) => row.rs.map((r) => ({r, g: row.geo.get(r)}))); gTiles.selectAll("rect").data(all, (d) => key(d.r)).join((enter) => enter.append("rect") .attr("x", (d) => d.g[view].x).attr("y", (d) => d.g[view].y) .attr("width", (d) => d.g[view].w).attr("height", (d) => d.g[view].w).attr("rx", (d) => d.g[view].rx)) .attr("class", "kc-tile") .attr("fill", (d) => color(d.r.archetype)) .classed("is-dim", (d) => !!active && d.r.archetype !== active) .on("pointerenter pointermove", (event, d) => showTip(event, `${esc(d.r.role)}
${esc(d.r.title)} (${d.r.year})
${esc(labelOf.get(d.r.archetype))}`)) .on("pointerleave", hideTip) .transition(t).delay((d, i) => (animate && !reduce ? (i % 18) * 12 : 0)) .attr("x", (d) => d.g[view].x).attr("y", (d) => d.g[view].y) .attr("width", (d) => d.g[view].w).attr("height", (d) => d.g[view].w).attr("rx", (d) => d.g[view].rx); labelBar(); } root.querySelectorAll(".kc-view button").forEach((btn) => btn.addEventListener("click", () => { if (view === btn.dataset.view) return; view = btn.dataset.view; root.querySelectorAll(".kc-view button").forEach((b) => b.setAttribute("aria-pressed", String(b === btn))); render(true); })); render(false); spotlight(); if (typeof ResizeObserver === "function") { new ResizeObserver(() => { if (Math.round(plot.clientWidth) !== W) { render(false); } labelBar(); }).observe(root); } return root; }4e:[] 48:{"id":"3bc2acd3eb7c24cb","slug":"the-skarsgard-fingerprint","title":"The Skarsgård Fingerprint","thumbnail":"b5d99a532343083bdd5acdb3d5cb4c58c37823d6aa7f739591ba0a18439c3579","access_level":"public","create_time":"$D2026-11-04T17:22:34.101Z","update_time":"$D2026-11-05T02:06:17.228Z","view_time":null,"first_public_time":"$D2026-11-04T18:41:59.047Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3c1ce35daad2d901","login":"hena","name":"Hena","avatar_url":"https://avatars-next.observableusercontent.com/e79c4b80cdf9287d5f1cdd292ff6192fcb5459f03e1f87b086a39604e28769fb","tier":"starter_2024","bio":"Ex-Observable social now I watch Gotham’s data from the shadows.","followed_by_you":false,"follows_you":false},"version":59,"publish_version":59,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9bd477cbad59564","login":"hena","name":"Hena","avatar_url":"https://avatars-next.observableusercontent.com/e79c4b80cdf9287d5f1cdd292ff6192fcb5459f03e1f87b086a39604e28769fb","tier":null,"bio":"Ex-Observable social now I watch Gotham’s data from the shadows.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3c1ce35daad2d901","login":"hena","name":"Hena","avatar_url":"https://avatars-next.observableusercontent.com/e79c4b80cdf9287d5f1cdd292ff6192fcb5459f03e1f87b086a39604e28769fb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Skarsgård Fingerprint","cells":[{"id":1,"value":"# The Skarsgård Fingerprint\n\nOne father, four acting sons and 64 notable roles: sorted by the kind of person each Skarsgård keeps getting cast as.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"display(fingerprint(roles, {archetypes, family}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## The data\n\nA selection of notable film and TV roles, not complete filmographies. Each role gets one archetype, and those calls are opinions. Edit the list and the chart redraws.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Inputs.table(roles, {format: {year: String}})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Family crossovers\n\n- **Dads named Bill:** Stellan, twice. Bootstrap Bill Turner and *Mamma Mia!*’s Bill Anderson. He also has a son named Bill.\n- **Undead men named Eric:** Alexander (Eric Northman, *True Blood*) and Bill (Eric Draven, *The Crow*).\n- **Voice of Moomintroll:** Alexander in 2010, Bill in 2017.\n- **Nosferatu:** Bill, twice. A teenage one in *Pigan brinner!* (2008), then Count Orlok 16 years later.\n- **One medieval epic:** Gustaf, Bill and Valter are all in *Arn – The Kingdom at Road’s End* (2008).\n- **End of the world:** Stellan and Alexander both appear in *Melancholia* (2011).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"---\nRoles and years are from each actor’s Wikipedia filmography. TV roles are dated by the year the character first appears.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null