44:["$","title",null,{"children":"Six Degrees of Skarsgård | Hena | Observable"}] 4c:T687,html`

Six Degrees of Skarsgård

For my “Skarsfam” from all over the world!

Big thanks to an amazing GC I met called: Cinema & Syntax 🎞️

Pick any actor and follow the shortest chain of shared films to a Skarsgård.

There are four ways to see it below: the chain, the web, the collectors and the orbit. Each Skarsgård is printed in his own color/ink.

`4d:T3623,// Six Degrees of Skarsgård: a hand-picked sample of films and shows. // Each entry lists the cast members included in the sample (not full casts). const family = ["Stellan Skarsgård", "Alexander Skarsgård", "Gustaf Skarsgård", "Bill Skarsgård", "Valter Skarsgård"]; const films = [ // Stellan {title: "The Hunt for Red October", year: 1990, cast: ["Stellan Skarsgård", "Sean Connery", "Alec Baldwin", "Sam Neill"]}, {title: "Breaking the Waves", year: 1996, cast: ["Stellan Skarsgård", "Emily Watson"]}, {title: "Good Will Hunting", year: 1997, cast: ["Stellan Skarsgård", "Matt Damon", "Robin Williams", "Ben Affleck", "Minnie Driver"]}, {title: "Amistad", year: 1997, cast: ["Stellan Skarsgård", "Morgan Freeman", "Anthony Hopkins", "Matthew McConaughey", "Djimon Hounsou"]}, {title: "Ronin", year: 1998, cast: ["Stellan Skarsgård", "Robert De Niro", "Jean Reno"]}, {title: "Deep Blue Sea", year: 1999, cast: ["Stellan Skarsgård", "Samuel L. Jackson"]}, {title: "King Arthur", year: 2004, cast: ["Stellan Skarsgård", "Clive Owen", "Keira Knightley", "Mads Mikkelsen"]}, {title: "Pirates of the Caribbean: Dead Man's Chest", year: 2006, cast: ["Stellan Skarsgård", "Johnny Depp", "Orlando Bloom", "Keira Knightley", "Bill Nighy"]}, {title: "Pirates of the Caribbean: At World's End", year: 2007, cast: ["Stellan Skarsgård", "Johnny Depp", "Orlando Bloom", "Keira Knightley", "Geoffrey Rush"]}, {title: "Mamma Mia!", year: 2008, cast: ["Stellan Skarsgård", "Meryl Streep", "Pierce Brosnan", "Colin Firth", "Amanda Seyfried"]}, {title: "Angels & Demons", year: 2009, cast: ["Stellan Skarsgård", "Tom Hanks", "Ewan McGregor"]}, {title: "Thor", year: 2011, cast: ["Stellan Skarsgård", "Chris Hemsworth", "Natalie Portman", "Anthony Hopkins", "Tom Hiddleston"]}, {title: "The Girl with the Dragon Tattoo", year: 2011, cast: ["Stellan Skarsgård", "Daniel Craig", "Rooney Mara", "Robin Wright"]}, {title: "Melancholia", year: 2011, cast: ["Stellan Skarsgård", "Alexander Skarsgård", "Kirsten Dunst", "Charlotte Gainsbourg", "Kiefer Sutherland"]}, {title: "The Avengers", year: 2012, cast: ["Stellan Skarsgård", "Chris Evans", "Scarlett Johansson", "Robert Downey Jr.", "Chris Hemsworth", "Mark Ruffalo", "Tom Hiddleston", "Jeremy Renner"]}, {title: "Nymphomaniac", year: 2013, cast: ["Stellan Skarsgård", "Charlotte Gainsbourg", "Uma Thurman", "Shia LaBeouf"]}, {title: "Thor: The Dark World", year: 2013, cast: ["Stellan Skarsgård", "Chris Hemsworth", "Natalie Portman", "Tom Hiddleston"]}, {title: "Cinderella", year: 2015, cast: ["Stellan Skarsgård", "Lily James", "Cate Blanchett", "Richard Madden", "Helena Bonham Carter"]}, {title: "Avengers: Age of Ultron", year: 2015, cast: ["Stellan Skarsgård", "Robert Downey Jr.", "Chris Evans", "Chris Hemsworth", "Scarlett Johansson", "Mark Ruffalo", "Jeremy Renner", "Elizabeth Olsen"]}, {title: "Mamma Mia! Here We Go Again", year: 2018, cast: ["Stellan Skarsgård", "Lily James", "Cher", "Andy García", "Meryl Streep", "Amanda Seyfried", "Pierce Brosnan", "Colin Firth"]}, {title: "Chernobyl", year: 2019, cast: ["Stellan Skarsgård", "Jared Harris", "Emily Watson", "Jessie Buckley"]}, {title: "Dune", year: 2021, cast: ["Stellan Skarsgård", "Timothée Chalamet", "Zendaya", "Rebecca Ferguson", "Oscar Isaac", "Jason Momoa", "Josh Brolin", "Dave Bautista", "Javier Bardem"]}, {title: "Andor", year: 2022, cast: ["Stellan Skarsgård", "Diego Luna"]}, {title: "Dune: Part Two", year: 2024, cast: ["Stellan Skarsgård", "Timothée Chalamet", "Zendaya", "Austin Butler", "Florence Pugh", "Rebecca Ferguson", "Javier Bardem", "Dave Bautista", "Josh Brolin"]}, {title: "Sentimental Value", year: 2025, cast: ["Stellan Skarsgård", "Elle Fanning", "Renate Reinsve"]}, // Alexander {title: "Zoolander", year: 2001, cast: ["Alexander Skarsgård", "Ben Stiller", "Owen Wilson"]}, {title: "True Blood", year: 2008, cast: ["Alexander Skarsgård", "Anna Paquin"]}, {title: "Battleship", year: 2012, cast: ["Alexander Skarsgård", "Liam Neeson", "Rihanna"]}, {title: "The Diary of a Teenage Girl", year: 2015, cast: ["Alexander Skarsgård", "Kristen Wiig"]}, {title: "The Legend of Tarzan", year: 2016, cast: ["Alexander Skarsgård", "Margot Robbie", "Samuel L. Jackson", "Christoph Waltz", "Djimon Hounsou"]}, {title: "Big Little Lies", year: 2017, cast: ["Alexander Skarsgård", "Nicole Kidman", "Reese Witherspoon", "Meryl Streep", "Laura Dern", "Shailene Woodley", "Zoë Kravitz"]}, {title: "The Little Drummer Girl", year: 2018, cast: ["Alexander Skarsgård", "Florence Pugh"]}, {title: "Hold the Dark", year: 2018, cast: ["Alexander Skarsgård", "Jeffrey Wright", "Riley Keough"]}, {title: "Long Shot", year: 2019, cast: ["Alexander Skarsgård", "Charlize Theron", "Seth Rogen", "Andy Serkis"]}, {title: "The Stand", year: 2020, cast: ["Alexander Skarsgård", "Whoopi Goldberg", "James Marsden"]}, {title: "Godzilla vs. Kong", year: 2021, cast: ["Alexander Skarsgård", "Millie Bobby Brown", "Rebecca Hall", "Brian Tyree Henry"]}, {title: "Passing", year: 2021, cast: ["Alexander Skarsgård", "Tessa Thompson"]}, {title: "Succession", year: 2021, cast: ["Alexander Skarsgård", "Brian Cox", "Jeremy Strong", "Sarah Snook", "Kieran Culkin", "Matthew Macfadyen"]}, {title: "The Northman", year: 2022, cast: ["Alexander Skarsgård", "Nicole Kidman", "Anya Taylor-Joy", "Ethan Hawke", "Willem Dafoe"]}, {title: "Infinity Pool", year: 2023, cast: ["Alexander Skarsgård", "Mia Goth"]}, {title: "Lee", year: 2023, cast: ["Alexander Skarsgård", "Kate Winslet", "Andy Samberg", "Marion Cotillard", "Josh O'Connor"]}, {title: "Mr. & Mrs. Smith", year: 2024, cast: ["Alexander Skarsgård", "Donald Glover", "Maya Erskine", "Sarah Paulson"]}, {title: "Wicker", year: 2026, cast: ["Alexander Skarsgård", "Olivia Colman", "Peter Dinklage", "Elizabeth Debicki", "Richard E. Grant"]}, // Gustaf {title: "The Way Back", year: 2010, cast: ["Gustaf Skarsgård", "Ed Harris", "Colin Farrell", "Saoirse Ronan"]}, {title: "Vikings", year: 2013, cast: ["Gustaf Skarsgård", "Travis Fimmel", "Katheryn Winnick"]}, {title: "Westworld", year: 2018, cast: ["Gustaf Skarsgård", "Ed Harris", "Evan Rachel Wood", "Thandiwe Newton", "Jeffrey Wright", "Anthony Hopkins"]}, {title: "Oppenheimer", year: 2023, cast: ["Gustaf Skarsgård", "Cillian Murphy", "Emily Blunt", "Matt Damon", "Robert Downey Jr.", "Florence Pugh", "Josh Hartnett", "Rami Malek", "Kenneth Branagh", "Casey Affleck", "Gary Oldman"]}, {title: "Air", year: 2023, cast: ["Gustaf Skarsgård", "Matt Damon", "Ben Affleck", "Viola Davis", "Jason Bateman", "Chris Tucker"]}, {title: "Black Bag", year: 2025, cast: ["Gustaf Skarsgård", "Cate Blanchett", "Michael Fassbender", "Pierce Brosnan", "Naomie Harris"]}, // Bill {title: "Anna Karenina", year: 2012, cast: ["Bill Skarsgård", "Keira Knightley", "Jude Law", "Domhnall Gleeson", "Alicia Vikander", "Aaron Taylor-Johnson"]}, {title: "Hemlock Grove", year: 2013, cast: ["Bill Skarsgård", "Famke Janssen"]}, {title: "The Divergent Series: Allegiant", year: 2016, cast: ["Bill Skarsgård", "Shailene Woodley", "Miles Teller", "Naomi Watts"]}, {title: "Atomic Blonde", year: 2017, cast: ["Bill Skarsgård", "Charlize Theron", "James McAvoy", "John Goodman", "Sofia Boutella"]}, {title: "It", year: 2017, cast: ["Bill Skarsgård", "Finn Wolfhard", "Sophia Lillis", "Jaeden Martell"]}, {title: "Deadpool 2", year: 2018, cast: ["Bill Skarsgård", "Ryan Reynolds", "Josh Brolin", "Zazie Beetz", "Morena Baccarin"]}, {title: "Castle Rock", year: 2018, cast: ["Bill Skarsgård", "Sissy Spacek"]}, {title: "It Chapter Two", year: 2019, cast: ["Bill Skarsgård", "Jessica Chastain", "James McAvoy", "Bill Hader"]}, {title: "Villains", year: 2019, cast: ["Bill Skarsgård", "Maika Monroe", "Kyra Sedgwick"]}, {title: "The Devil All the Time", year: 2020, cast: ["Bill Skarsgård", "Tom Holland", "Robert Pattinson", "Sebastian Stan", "Mia Wasikowska", "Riley Keough"]}, {title: "Nine Days", year: 2020, cast: ["Bill Skarsgård", "Winston Duke", "Zazie Beetz"]}, {title: "Eternals", year: 2021, cast: ["Bill Skarsgård", "Angelina Jolie", "Salma Hayek", "Kumail Nanjiani", "Richard Madden"]}, {title: "Barbarian", year: 2022, cast: ["Bill Skarsgård", "Justin Long"]}, {title: "Boy Kills World", year: 2023, cast: ["Bill Skarsgård", "Famke Janssen", "Michelle Dockery"]}, {title: "John Wick: Chapter 4", year: 2023, cast: ["Bill Skarsgård", "Keanu Reeves", "Donnie Yen", "Ian McShane", "Hiroyuki Sanada", "Laurence Fishburne"]}, {title: "Nosferatu", year: 2024, cast: ["Bill Skarsgård", "Lily-Rose Depp", "Nicholas Hoult", "Willem Dafoe", "Aaron Taylor-Johnson", "Emma Corrin"]}, {title: "The Crow", year: 2024, cast: ["Bill Skarsgård", "FKA twigs"]}, // Valter, and a family film {title: "Arn – The Kingdom at Road's End", year: 2008, cast: ["Gustaf Skarsgård", "Bill Skarsgård", "Valter Skarsgård"]}, {title: "Lords of Chaos", year: 2018, cast: ["Valter Skarsgård", "Rory Culkin", "Emory Cohen", "Jack Kilmer", "Sky Ferreira"]}, // Bridges: films with no Skarsgård that link co-stars to everyone else {title: "Home Alone", year: 1990, cast: ["Macaulay Culkin", "Catherine O'Hara"]}, {title: "Jurassic Park", year: 1993, cast: ["Sam Neill", "Laura Dern", "Jeff Goldblum", "Samuel L. Jackson"]}, {title: "Apollo 13", year: 1995, cast: ["Kevin Bacon", "Tom Hanks", "Ed Harris"]}, {title: "The Matrix", year: 1999, cast: ["Keanu Reeves", "Carrie-Anne Moss", "Laurence Fishburne"]}, {title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001, cast: ["Elijah Wood", "Ian McKellen", "Orlando Bloom", "Cate Blanchett"]}, {title: "Ocean's Eleven", year: 2001, cast: ["George Clooney", "Brad Pitt", "Matt Damon", "Julia Roberts"]}, {title: "Signs", year: 2002, cast: ["Mel Gibson", "Joaquin Phoenix", "Rory Culkin"]}, {title: "Love Actually", year: 2003, cast: ["Hugh Grant", "Colin Firth", "Keira Knightley", "Liam Neeson", "Bill Nighy"]}, {title: "Harry Potter and the Prisoner of Azkaban", year: 2004, cast: ["Daniel Radcliffe", "Emma Watson", "Gary Oldman"]}, {title: "The Departed", year: 2006, cast: ["Leonardo DiCaprio", "Matt Damon"]}, {title: "Zodiac", year: 2007, cast: ["Jake Gyllenhaal", "Robert Downey Jr.", "Mark Ruffalo"]}, {title: "Twilight", year: 2008, cast: ["Robert Pattinson", "Kristen Stewart"]}, {title: "The Social Network", year: 2010, cast: ["Jesse Eisenberg", "Andrew Garfield", "Rooney Mara"]}, {title: "Game of Thrones", year: 2011, cast: ["Emilia Clarke", "Kit Harington", "Peter Dinklage", "Richard Madden"]}, {title: "X-Men: First Class", year: 2011, cast: ["Kevin Bacon", "James McAvoy", "Michael Fassbender", "Jennifer Lawrence"]}, {title: "Star Wars: The Force Awakens", year: 2015, cast: ["Harrison Ford", "Daisy Ridley", "Adam Driver", "Oscar Isaac"]}, {title: "La La Land", year: 2016, cast: ["Ryan Gosling", "Emma Stone"]}, {title: "Stranger Things", year: 2016, cast: ["Millie Bobby Brown", "Finn Wolfhard", "Winona Ryder", "David Harbour", "Sadie Sink"]}, {title: "Black Panther", year: 2018, cast: ["Michael B. Jordan", "Lupita Nyong'o", "Winston Duke", "Daniel Kaluuya"]}, {title: "A Star Is Born", year: 2018, cast: ["Lady Gaga", "Bradley Cooper"]}, {title: "Once Upon a Time in Hollywood", year: 2019, cast: ["Leonardo DiCaprio", "Brad Pitt", "Margot Robbie"]}, {title: "Little Women", year: 2019, cast: ["Florence Pugh", "Timothée Chalamet", "Saoirse Ronan", "Emma Watson", "Meryl Streep"]}, {title: "Knives Out", year: 2019, cast: ["Daniel Craig", "Ana de Armas", "Chris Evans", "Jamie Lee Curtis"]}, {title: "Euphoria", year: 2019, cast: ["Zendaya", "Jacob Elordi", "Sydney Sweeney", "Hunter Schafer"]}, {title: "Black Widow", year: 2021, cast: ["Scarlett Johansson", "Florence Pugh", "David Harbour"]}, {title: "Don't Look Up", year: 2021, cast: ["Leonardo DiCaprio", "Jennifer Lawrence", "Meryl Streep", "Timothée Chalamet"]}, {title: "House of Gucci", year: 2021, cast: ["Lady Gaga", "Adam Driver", "Al Pacino"]}, {title: "Spider-Man: No Way Home", year: 2021, cast: ["Tom Holland", "Zendaya", "Benedict Cumberbatch", "Andrew Garfield"]}, {title: "The Lost Daughter", year: 2021, cast: ["Olivia Colman", "Dakota Johnson", "Paul Mescal", "Jessie Buckley"]}, {title: "The White Lotus", year: 2021, cast: ["Jennifer Coolidge", "Sydney Sweeney"]}, {title: "The Batman", year: 2022, cast: ["Robert Pattinson", "Zoë Kravitz"]}, {title: "Everything Everywhere All at Once", year: 2022, cast: ["Michelle Yeoh", "Ke Huy Quan", "Jamie Lee Curtis"]}, {title: "The Bear", year: 2022, cast: ["Jeremy Allen White", "Ayo Edebiri", "Jamie Lee Curtis", "Olivia Colman"]}, {title: "Top Gun: Maverick", year: 2022, cast: ["Tom Cruise", "Miles Teller", "Glen Powell", "Jennifer Connelly"]}, {title: "Barbie", year: 2023, cast: ["Margot Robbie", "Ryan Gosling"]}, {title: "Poor Things", year: 2023, cast: ["Emma Stone", "Mark Ruffalo", "Willem Dafoe"]}, {title: "Saltburn", year: 2023, cast: ["Jacob Elordi", "Barry Keoghan", "Rosamund Pike"]}, {title: "The Last of Us", year: 2023, cast: ["Pedro Pascal", "Bella Ramsey"]}, {title: "Anyone but You", year: 2023, cast: ["Sydney Sweeney", "Glen Powell"]}, {title: "Beetlejuice Beetlejuice", year: 2024, cast: ["Jenna Ortega", "Winona Ryder", "Willem Dafoe", "Catherine O'Hara"]}, {title: "Gladiator II", year: 2024, cast: ["Paul Mescal", "Pedro Pascal", "Denzel Washington"]}, {title: "Wicked", year: 2024, cast: ["Cynthia Erivo", "Ariana Grande", "Jonathan Bailey", "Michelle Yeoh", "Jeff Goldblum"]}, {title: "Materialists", year: 2025, cast: ["Dakota Johnson", "Chris Evans", "Pedro Pascal"]}, {title: "Wuthering Heights", year: 2026, cast: ["Margot Robbie", "Jacob Elordi"]} ];4e:T1bbd,// The five portraits, printed in each Skarsgård's own ink. // Change an ink and every view updates. The outlines trace each face in its photo. const INKS = {stellan: "#0078bf", alexander: "#e8541e", gustaf: "#00897b", bill: "#6c4fc8", valter: "#b17a00"}; const FACES = {"stellan":{"box":[135,0,340],"mask":[[0.421,0.043],[0.386,0.071],[0.367,0.1],[0.345,0.1],[0.329,0.107],[0.288,0.148],[0.262,0.231],[0.26,0.31],[0.25,0.362],[0.257,0.431],[0.255,0.493],[0.269,0.55],[0.271,0.586],[0.293,0.655],[0.252,0.686],[0.236,0.69],[0.186,0.693],[0.169,0.7],[0.036,0.705],[0.021,0.714],[0.021,0.831],[0.014,0.838],[0.0,0.838],[0.0,0.998],[0.998,0.998],[0.998,0.838],[0.986,0.838],[0.979,0.831],[0.979,0.733],[0.969,0.726],[0.924,0.717],[0.84,0.707],[0.802,0.69],[0.762,0.686],[0.693,0.667],[0.674,0.655],[0.655,0.626],[0.667,0.571],[0.7,0.56],[0.726,0.505],[0.748,0.426],[0.748,0.407],[0.738,0.381],[0.719,0.367],[0.714,0.348],[0.731,0.252],[0.726,0.224],[0.688,0.145],[0.671,0.133],[0.655,0.093],[0.624,0.057],[0.583,0.05],[0.562,0.033],[0.517,0.021],[0.469,0.024]]},"alexander":{"box":[130,25,520],"mask":[[0.343,0.119],[0.338,0.133],[0.352,0.143],[0.348,0.171],[0.329,0.2],[0.324,0.224],[0.307,0.238],[0.271,0.3],[0.276,0.312],[0.271,0.333],[0.274,0.393],[0.286,0.412],[0.288,0.438],[0.281,0.462],[0.243,0.488],[0.243,0.498],[0.264,0.514],[0.26,0.531],[0.262,0.605],[0.274,0.645],[0.293,0.664],[0.298,0.752],[0.305,0.779],[0.321,0.798],[0.336,0.848],[0.355,0.879],[0.355,0.914],[0.307,0.974],[0.295,0.998],[0.948,0.998],[0.948,0.979],[0.936,0.962],[0.907,0.94],[0.874,0.936],[0.84,0.902],[0.821,0.895],[0.76,0.833],[0.74,0.831],[0.731,0.81],[0.75,0.707],[0.757,0.7],[0.795,0.702],[0.829,0.674],[0.845,0.643],[0.862,0.576],[0.864,0.526],[0.857,0.507],[0.836,0.495],[0.85,0.417],[0.85,0.371],[0.829,0.321],[0.798,0.298],[0.776,0.293],[0.764,0.283],[0.762,0.25],[0.75,0.238],[0.733,0.195],[0.712,0.174],[0.707,0.16],[0.631,0.102],[0.557,0.086],[0.536,0.064],[0.483,0.062],[0.448,0.074],[0.433,0.071],[0.424,0.076],[0.412,0.098],[0.386,0.1]]},"gustaf":{"box":[18,36,700],"mask":[[0.712,0.193],[0.657,0.16],[0.631,0.157],[0.6,0.14],[0.54,0.133],[0.483,0.136],[0.364,0.164],[0.302,0.202],[0.269,0.238],[0.226,0.314],[0.21,0.374],[0.198,0.395],[0.193,0.433],[0.174,0.469],[0.176,0.536],[0.2,0.593],[0.2,0.626],[0.188,0.714],[0.164,0.779],[0.152,0.833],[0.11,0.898],[0.0,0.917],[0.0,0.998],[0.657,0.998],[0.655,0.936],[0.671,0.914],[0.681,0.857],[0.71,0.821],[0.71,0.807],[0.729,0.783],[0.736,0.757],[0.733,0.733],[0.767,0.679],[0.779,0.643],[0.767,0.569],[0.8,0.519],[0.81,0.479],[0.805,0.388],[0.79,0.321],[0.755,0.286],[0.752,0.26]]},"bill":{"box":[68,0,600],"mask":[[0.276,0.148],[0.236,0.198],[0.224,0.224],[0.224,0.255],[0.214,0.279],[0.25,0.379],[0.243,0.424],[0.236,0.433],[0.248,0.45],[0.245,0.536],[0.26,0.567],[0.298,0.605],[0.312,0.669],[0.198,0.774],[0.164,0.819],[0.15,0.821],[0.069,0.864],[0.052,0.862],[0.019,0.829],[0.0,0.826],[0.0,0.998],[0.998,0.998],[0.998,0.819],[0.912,0.764],[0.829,0.698],[0.767,0.638],[0.702,0.6],[0.748,0.552],[0.762,0.502],[0.764,0.433],[0.757,0.398],[0.769,0.362],[0.771,0.293],[0.783,0.276],[0.783,0.264],[0.764,0.198],[0.75,0.186],[0.745,0.164],[0.712,0.133],[0.705,0.117],[0.657,0.076],[0.61,0.052],[0.595,0.036],[0.574,0.031],[0.557,0.038],[0.486,0.031],[0.429,0.057],[0.41,0.052],[0.376,0.079],[0.357,0.11],[0.319,0.124],[0.29,0.145]]},"valter":{"box":[0,17,736],"mask":[[0.24,0.0],[0.224,0.014],[0.198,0.021],[0.138,0.076],[0.098,0.14],[0.064,0.229],[0.057,0.3],[0.081,0.336],[0.086,0.419],[0.11,0.438],[0.112,0.464],[0.131,0.488],[0.155,0.507],[0.179,0.512],[0.186,0.524],[0.183,0.64],[0.188,0.686],[0.233,0.817],[0.279,0.888],[0.279,0.998],[0.69,0.998],[0.717,0.9],[0.717,0.864],[0.705,0.833],[0.721,0.693],[0.729,0.683],[0.748,0.693],[0.774,0.693],[0.805,0.671],[0.833,0.61],[0.838,0.538],[0.852,0.486],[0.857,0.426],[0.852,0.338],[0.845,0.31],[0.802,0.245],[0.774,0.219],[0.767,0.205],[0.743,0.188],[0.75,0.179],[0.745,0.148],[0.719,0.119],[0.712,0.102],[0.712,0.074],[0.674,0.048],[0.631,0.031],[0.593,0.031],[0.562,0.045],[0.526,0.079],[0.512,0.081],[0.495,0.064],[0.483,0.038],[0.469,0.026],[0.455,0.0]]}}; const PHOTOS = { stellan: await FileAttachment("stellan.jpg").image(), alexander: await FileAttachment("alexander.jpg").image(), gustaf: await FileAttachment("gustaf.jpg").image(), bill: await FileAttachment("bill.jpg").image(), valter: await FileAttachment("valter.jpg").image() }; // A riso-style badge: the face as a halftone in one ink, over a pink-dot circle. function sdBadge(img, face, ink, S = 220) { const [bx, by, side] = face.box; const canvas = (filter) => { const c = document.createElement("canvas"); c.width = c.height = S; const x = c.getContext("2d", {willReadFrequently: true}); if (filter) x.filter = filter; return [c, x]; }; const [cv, ctx] = canvas(); ctx.drawImage(img, bx, by, side, side, 0, 0, S, S); const px = ctx.getImageData(0, 0, S, S).data; const [, bctx] = canvas("blur(5px)"); bctx.drawImage(img, bx, by, side, side, 0, 0, S, S); const bl = bctx.getImageData(0, 0, S, S).data; const [, mctx] = canvas("blur(0.8px)"); mctx.fillStyle = "#fff"; mctx.beginPath(); face.mask.forEach(([x, y], i) => (i ? mctx.lineTo(x * S, y * S) : mctx.moveTo(x * S, y * S))); mctx.closePath(); mctx.fill(); const ma = mctx.getImageData(0, 0, S, S).data; const N = S * S, g = new Float32Array(N), a = new Float32Array(N), inside = []; const lum = (d, i) => (0.299 * d[4 * i] + 0.587 * d[4 * i + 1] + 0.114 * d[4 * i + 2]) / 255; for (let i = 0; i < N; i++) { const v = lum(px, i); g[i] = v + 0.7 * (v - lum(bl, i)); a[i] = ma[4 * i + 3] / 255; if (a[i] > 0.5) inside.push(g[i]); } inside.sort((p, q) => p - q); const lo = inside[Math.floor(inside.length * 0.02)] ?? 0, hi = inside[Math.floor(inside.length * 0.99)] ?? 1; const inkRGB = (({r, g, b}) => [r, g, b])(d3.rgb(ink)), paper = [244, 239, 228], pink = [255, 72, 176]; const screen = (x, y, cell, deg) => { const t = deg * Math.PI / 180, u = (x * Math.cos(t) + y * Math.sin(t)) / cell, v = (-x * Math.sin(t) + y * Math.cos(t)) / cell; return (Math.cos(2 * Math.PI * u) + Math.cos(2 * Math.PI * v)) / 4 + 0.5; }; const out = ctx.createImageData(S, S), o = out.data, c1 = 3.2 * S / 240, c2 = 4 * S / 240; for (let y = 0; y < S; y++) for (let x = 0; x < S; x++) { const i = y * S + x; const dens = Math.pow(1 - Math.min(1, Math.max(0, (g[i] - lo) / (hi - lo))), 0.85); const inkAmt = (0.45 * dens + 0.55 * (dens > screen(x, y, c1, 22) ? 1 : 0)) * a[i]; const pinkAmt = (screen(x, y, c2, 72) < 0.42 ? 0.85 : 0) * (1 - a[i]); for (let k = 0; k < 3; k++) o[4 * i + k] = paper[k] * (1 - pinkAmt * (1 - pink[k] / 255)) * (1 - inkAmt * (1 - inkRGB[k] / 255)); const d = Math.hypot(x - S / 2 + 0.5, y - S / 2 + 0.5); o[4 * i + 3] = 255 * Math.min(1, Math.max(0, S / 2 - 0.5 - d)); } ctx.putImageData(out, 0, 0); return cv.toDataURL("image/png"); } const HEADS = Object.fromEntries(Object.keys(PHOTOS).map((k) => [k, sdBadge(PHOTOS[k], FACES[k], INKS[k])]));4f:T5222,// Six Degrees of Skarsgård: graph search plus the four views. // Plain functions using the built-in d3. Each view returns a self-contained card. const SD_CSS = `@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"); .sd{--card:#fbf8f1;--paper:#f4efe4;--ink:#1b1e2c;--ink-2:#464a5c;--muted:#6c6f80;--line:rgba(27,30,44,.14);--pink:#e8338f;--pink-fill:#ff48b0;--pink-soft:rgba(255,72,176,.16); ${Object.entries(INKS).map(([k, v]) => `--c-${k}:${v};`).join("")} font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:760px;box-sizing:border-box} .sd *{box-sizing:border-box} .sd svg{display:block;width:100%;height:auto;max-width:none;overflow:visible} .sd svg text{fill:currentColor} .sd-family{display:flex;flex-wrap:wrap;gap:12px} .sd-fam{display:grid;justify-items:center;gap:4px;width:74px;font-weight:600;font-size:13px} .sd-fam img{width:66px;height:66px;display:block} .sd-fam span{display:flex;align-items:center;gap:5px} .sd-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .sd-picks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:none;border:0;padding:4px 0 0} .sd-chip{font:inherit;font-size:13px;color:var(--ink);padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer} .sd-chip:hover,.sd-chip.is-on{border-color:var(--pink);color:var(--pink)} .sd-chip.sd-shuffle{font-weight:600;border:1.5px solid var(--ink)} .sd-verdict{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px} .sd-num{font-weight:700;font-size:80px;line-height:.8;color:var(--pink)} .sd-txt{font-size:18px;font-weight:600;max-width:26ch} .sd-chain{list-style:none;margin:0;padding:0;display:grid} .sd-chain li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center} .sd-who{font-weight:700;font-size:17px} .sd-sub{font-size:13px;color:var(--muted)} .sd-mono{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:3px solid;font-weight:700;font-size:15px;background:var(--paper);justify-self:center} .sd-chain img{width:48px;height:48px;display:block} .sd-link{min-height:44px} .sd-rail{justify-self:center;width:2px;align-self:stretch;background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 8px)} .sd-ticket{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border:1.5px dashed var(--pink);border-radius:6px;font-size:14px;background:var(--pink-soft)} .sd-yr{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2)} .sd-note{margin:10px 0 0;font-size:13px;color:var(--muted)} .sd-crow{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer} .sd-crow:hover{background:rgba(27,30,44,.04)} .sd-crow.is-on{background:var(--pink-soft)} .sd-crow b{font-weight:600} .sd-beads{display:flex;flex-wrap:wrap;gap:4px} .sd-beads img{width:30px;height:30px;display:block} .sd-ct{font-family:"DM Mono",ui-monospace,monospace;font-size:12.5px;color:var(--muted);white-space:nowrap} .sd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:13px;color:var(--ink-2)} .sd-legend span{display:inline-flex;align-items:center;gap:6px} .sd-tip{position:fixed;z-index:1000;pointer-events:none;max-width:260px;background:#fbf8f1;color:#1b1e2c;border:1px solid rgba(27,30,44,.14);border-radius:8px;padding:7px 10px;font:13px/1.4 "Space Grotesk",Arial,sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.16)} .sd-tip span{color:#6c6f80} @media (max-width:480px){.sd-crow{grid-template-columns:minmax(0,1fr) auto}.sd-beads{grid-column:1/-1;grid-row:2}}`; function sdGraph(family, films) { const fam = new Set(family); const adj = new Map(), shared = new Map(); const key = (a, b) => (a < b ? a + "|" + b : b + "|" + a); for (const f of films) for (const a of f.cast) { if (!adj.has(a)) adj.set(a, new Set()); for (const b of f.cast) if (a !== b) { adj.get(a).add(b); const k = key(a, b); if (!shared.has(k)) shared.set(k, []); if (!shared.get(k).includes(f)) shared.get(k).push(f); } } const dist = new Map(), parent = new Map(), root = new Map(), queue = []; for (const f of family) if (adj.has(f)) { dist.set(f, 0); root.set(f, f); queue.push(f); } while (queue.length) { const a = queue.shift(); for (const b of [...adj.get(a)].sort()) if (!dist.has(b)) { dist.set(b, dist.get(a) + 1); parent.set(b, a); root.set(b, root.get(a)); queue.push(b); } } const actors = [...adj.keys()].filter((a) => !fam.has(a) && dist.has(a)).sort((a, b) => a.localeCompare(b)); const pathOf = (a) => { const p = [a]; while (!fam.has(p[p.length - 1])) p.push(parent.get(p[p.length - 1])); return p; }; const filmFor = (a, b) => shared.get(key(a, b)).slice().sort((x, y) => y.year - x.year)[0]; const known = (a) => dist.has(a) && !fam.has(a); return {family, films, fam, adj, shared, key, dist, parent, root, actors, pathOf, filmFor, known}; } const sdFirst = (n) => n.split(" ")[0]; const sdColor = (n) => `var(--c-${sdFirst(n).toLowerCase()})`; const sdHead = (n) => HEADS[sdFirst(n).toLowerCase()]; const sdEsc = (s) => String(s).replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const sdInitials = (n) => n.split(/[ -]/).filter((w) => /^[A-ZÀ-Þ]/.test(w)).map((w) => w[0]).slice(0, 2).join("") || n[0]; function sdCard(extraClass = "") { const el = document.createElement("div"); el.className = "sd " + extraClass; el.innerHTML = ``; return el; } function sdTip() { let t = document.querySelector("body > .sd-tip"); if (!t) { t = document.createElement("div"); t.className = "sd-tip"; t.hidden = true; document.body.append(t); } return t; } function sdShowTip(e, html) { const tip = sdTip(); tip.innerHTML = html; tip.hidden = false; const tw = tip.offsetWidth, th = tip.offsetHeight; let x = e.clientX + 14, y = e.clientY + 14; if (x + tw > innerWidth - 8) x = e.clientX - tw - 14; if (y + th > innerHeight - 8) y = e.clientY - th - 14; tip.style.left = Math.max(8, x) + "px"; tip.style.top = Math.max(8, y) + "px"; } const sdHideTip = () => { sdTip().hidden = true; }; function sdSet(input, name) { if (!input) return; input.value = name; input.dispatchEvent(new Event("input", {bubbles: true})); } // The family strip, quick picks and a shuffle button function sdPicks(G, star, input, picks = ["Kevin Bacon", "Zendaya", "Keanu Reeves", "Jenna Ortega", "Barry Keoghan", "Florence Pugh", "Bradley Cooper"]) { const el = sdCard("sd-picks"); el.insertAdjacentHTML("beforeend", picks.map((p) => ``).join("") + ``); el.addEventListener("click", (e) => { const b = e.target.closest("button"); if (!b) return; if (b.classList.contains("sd-shuffle")) { const pool = G.actors.filter((a) => a !== star && G.dist.get(a) >= 2); sdSet(input, pool[Math.floor(Math.random() * pool.length)]); } else sdSet(input, b.dataset.n); }); return el; } function sdFamily(G) { const el = sdCard(); el.insertAdjacentHTML("beforeend", `

${G.family.map((f) => `

${sdEsc(sdFirst(f))}

`).join("")}

`); return el; } // A. The chain function sdChain(G, star) { const el = sdCard(); if (!G.known(star)) { const msg = !star ? "Type an actor’s name to start." : G.fam.has(star) ? `${sdEsc(star)} is a Skarsgård, so that’s zero steps. Pick anyone else.` : `“${sdEsc(star)}” isn’t in the sample yet. Pick a name from the list, or look them up in Type anyone below.`; el.insertAdjacentHTML("beforeend", `

${msg}

`); return el; } const p = G.pathOf(star), steps = p.length - 1, sk = p[p.length - 1]; let html = `

${steps}${steps === 1 ? "step" : "steps"} from ${sdEsc(star)} to ${sdEsc(sk)}

${sdEsc(sdInitials(a))}

${badge}
${sdEsc(a)}
${isFam ? "a Skarsgård" : i === 0 ? "your star" : n + (n === 1 ? " film" : " films") + " in the sample"}
${sdEsc(f.title)} ${f.year || ""}

"); return el; } // B. The web: layout is computed once so dragged positions survive star changes function sdWebLayout(G, W = 680, H = 580) { const nodes = [...G.adj.keys()].filter((id) => G.dist.has(id)).map((id) => ({id, fam: G.fam.has(id), d: G.dist.get(id)})); const byId = new Map(nodes.map((n) => [n.id, n])); const links = []; for (const k of G.shared.keys()) { const [a, b] = k.split("|"); if (byId.has(a) && byId.has(b)) links.push({source: a, target: b, k}); } const cx = W / 2, cy = H / 2, R = Math.min(W, H) * 0.3; G.family.forEach((f, i) => { const n = byId.get(f); if (!n) return; const t = -Math.PI / 2 + i * 2 * Math.PI / G.family.length; n.tx = cx + R * Math.cos(t); n.ty = cy + R * Math.sin(t); n.x = n.tx; n.y = n.ty; }); const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id((d) => d.id).distance((l) => (l.source.fam || l.target.fam ? 48 : 34)).strength((l) => (l.source.fam || l.target.fam ? 0.5 : 0.12))) .force("charge", d3.forceManyBody().strength((d) => (d.fam ? -340 : -30)).distanceMax(230)) .force("x", d3.forceX((d) => (d.fam ? d.tx : cx)).strength((d) => (d.fam ? 0.6 : 0.035))) .force("y", d3.forceY((d) => (d.fam ? d.ty : cy)).strength((d) => (d.fam ? 0.6 : 0.035))) .force("collide", d3.forceCollide((d) => (d.fam ? 36 : 5))) .stop(); for (let i = 0; i < 320; i++) sim.tick(); const pad = 14; const clamp = () => { for (const n of nodes) { n.x = Math.max(pad, Math.min(W - pad, n.x)); n.y = Math.max(pad, Math.min(H - pad, n.y)); } }; clamp(); return {nodes, links, byId, sim, W, H, pad, clamp}; } function sdWeb(G, star, L, input) { const el = sdCard(); const {W, H, pad} = L; el.insertAdjacentHTML("beforeend", `

${G.family.map((f) => `reaches ${sdFirst(f)} first`).join("")}your star’s path

`); const p = G.known(star) ? G.pathOf(star) : []; const on = new Set(), onN = new Set(p); for (let i = 0; i < p.length - 1; i++) on.add(G.key(p[i], p[i + 1])); const svg = d3.select(el).append("svg").attr("viewBox", `0 0 ${W} ${H}`).attr("role", "img") .attr("aria-label", "Network of actors connected by shared films. Drag any node."); const link = svg.append("g").selectAll("line").data(L.links).join("line") .attr("stroke", (l) => (on.has(l.k) ? "var(--pink)" : "var(--line)")).attr("stroke-width", (l) => (on.has(l.k) ? 3 : 1)); link.filter((l) => on.has(l.k)).raise(); const node = svg.append("g").selectAll("g").data(L.nodes).join("g").style("cursor", "grab"); node.filter((d) => !d.fam).append("circle") .attr("r", (d) => (onN.has(d.id) ? 7 : d.d === 1 ? 4.5 : 4)) .attr("fill", (d) => (onN.has(d.id) ? "var(--pink-fill)" : d.d === 1 ? sdColor(G.root.get(d.id)) : "var(--card)")) .attr("stroke", (d) => (onN.has(d.id) ? "var(--pink)" : sdColor(G.root.get(d.id)))).attr("stroke-width", 1.5); node.filter((d) => d.fam).append("image").attr("href", (d) => sdHead(d.id)).attr("x", -24).attr("y", -24).attr("width", 48).attr("height", 48); node.filter((d) => onN.has(d.id) && !d.fam).raise(); node.on("pointerenter pointermove", (e, d) => sdShowTip(e, `${sdEsc(d.id)}
${d.fam ? "a Skarsgård" : d.d + (d.d === 1 ? " step" : " steps") + " away · click to pick"}`)) .on("pointerleave", sdHideTip) .on("click", (e, d) => { if (!d.fam && !e.defaultPrevented) sdSet(input, d.id); }); const labels = [...new Set([...G.family, ...p])].filter((n) => L.byId.has(n)); const lab = svg.append("g").selectAll("text").data(labels).join("text") .attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", (d) => (onN.has(d) ? 700 : 600)) .attr("paint-order", "stroke").attr("stroke", "var(--card)").attr("stroke-width", 4).attr("stroke-linejoin", "round") .text((d) => (G.fam.has(d) ? sdFirst(d) : d)); const draw = () => { link.attr("x1", (l) => l.source.x).attr("y1", (l) => l.source.y).attr("x2", (l) => l.target.x).attr("y2", (l) => l.target.y); node.attr("transform", (d) => `translate(${d.x},${d.y})`); // names sit above their dot, or drop below it when another name is in the way const boxes = []; lab.each(function (d) { const n = L.byId.get(d), fam = G.fam.has(d), w = (fam ? sdFirst(d) : d).length * 3.8 + 4; const x = Math.max(w, Math.min(W - w, n.x)); let y = Math.max(14, n.y - (fam ? 30 : 11)); if (!fam && boxes.some((b) => Math.abs(b.x - x) < b.w + w && Math.abs(b.y - y) < 15)) y = Math.min(H - 4, n.y + 22); boxes.push({x, y, w}); d3.select(this).attr("x", x).attr("y", y); }); }; node.call(d3.drag() .on("start", (e, d) => { sdHideTip(); if (!e.active) L.sim.alphaTarget(0.25).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (e, d) => { d.fx = Math.max(pad, Math.min(W - pad, e.x)); d.fy = Math.max(pad, Math.min(H - pad, e.y)); }) .on("end", (e, d) => { if (!e.active) L.sim.alphaTarget(0); d.fx = null; d.fy = null; })); L.sim.on("tick", () => { L.clamp(); draw(); }); draw(); return el; } // C. The collectors function sdCollectors(G, star, input) { const el = sdCard(); const rows = G.actors.map((a) => { const beads = []; for (const f of G.films) if (f.cast.includes(a)) for (const s of f.cast) if (G.fam.has(s)) beads.push({s, f}); return {a, beads, n: new Set(beads.map((b) => b.s)).size}; }).filter((r) => r.n >= 2).sort((x, y) => y.n - x.n || y.beads.length - x.beads.length || x.a.localeCompare(y.a)); el.insertAdjacentHTML("beforeend", rows.map((r) => `

${sdEsc(r.a)} ${r.beads.sort((x, y) => G.family.indexOf(x.s) - G.family.indexOf(y.s) || x.f.year - y.f.year).map((b) => `

${sdEsc(sdFirst(b.s))} in ${sdEsc(b.f.title)}

`).join("")} ${r.n} Skarsgårds

`).join("")); el.addEventListener("pointermove", (e) => { const t = e.target.closest("img[data-t]"); if (!t) return sdHideTip(); const [who, what] = t.dataset.t.split("|"); sdShowTip(e, `${who}
${what}`); }); el.addEventListener("pointerleave", sdHideTip); el.addEventListener("click", (e) => { const r = e.target.closest(".sd-crow"); if (r) sdSet(input, r.dataset.a); }); return el; } // D. The orbit function sdOrbit(G, star, input, S = 600) { const el = sdCard(); const c = S / 2, r1 = S * 0.25, r2 = S * 0.335, r3 = S * 0.405, r4 = S * 0.465, rf = S * 0.105, hs = S * 0.075; const counts = [1, 2, 3, 4].map((d) => G.actors.filter((a) => G.dist.get(a) === d).length); const svg = d3.select(el).append("svg").attr("viewBox", `0 -6 ${S} ${S + 12}`).attr("role", "img") .attr("aria-label", `Rings of actors by steps from a Skarsgård: ${counts.map((n, i) => (n ? n + " at " + (i + 1) : "")).filter(Boolean).join(", ")}.`); const famAng = new Map(G.family.map((f, i) => [f, -Math.PI / 2 + i * 2 * Math.PI / G.family.length])); const pos = new Map(); const ring1 = G.actors.filter((a) => G.dist.get(a) === 1).sort((a, b) => G.family.indexOf(G.root.get(a)) - G.family.indexOf(G.root.get(b)) || a.localeCompare(b)); const n1 = ring1.length; const off = famAng.get(G.family[0]) - Math.PI / n1 * ring1.filter((a) => G.root.get(a) === G.family[0]).length; // a crowded first ring zigzags in and out so the dots don't touch const arc1 = 2 * Math.PI * r1 / Math.max(1, n1), zig = arc1 < 11 ? S * 0.016 : 0; const rDot = Math.max(2.4, Math.min(4.5, (zig ? 2 * arc1 : arc1) * 0.36)); ring1.forEach((a, i) => { const t = off + i * 2 * Math.PI / n1, r = r1 + (i % 2 ? zig : -zig); pos.set(a, [c + r * Math.cos(t), c + r * Math.sin(t), t]); }); const radii = [r1, r2, r3, r4]; for (let d = 2; d <= 4; d++) { const ring = G.actors.filter((a) => G.dist.get(a) === d).sort((a, b) => pos.get(G.parent.get(a))[2] - pos.get(G.parent.get(b))[2]); const t0 = ring.map((a) => pos.get(G.parent.get(a))[2]), want = t0.slice(); const gap = Math.min(15 / radii[d - 1], 2 * Math.PI / Math.max(1, ring.length) * 0.95); for (let i = 1; i < want.length; i++) if (want[i] - want[i - 1] < gap) want[i] = want[i - 1] + gap; // slide each bunched-up run back so it centres on the co-stars it hangs from for (let s = 0, i = 1, end = -Infinity; i <= want.length; i++) { if (i < want.length && want[i] - want[i - 1] <= gap + 1e-9) continue; let shift = d3.mean(t0.slice(s, i)) - d3.mean(want.slice(s, i)); shift = Math.max(shift, end + gap - want[s]); for (let j = s; j < i; j++) want[j] += shift; end = want[i - 1]; s = i; } ring.forEach((a, i) => { const t = want[i]; pos.set(a, [c + radii[d - 1] * Math.cos(t), c + radii[d - 1] * Math.sin(t), t]); }); } G.family.forEach((f) => { const t = famAng.get(f); pos.set(f, [c + rf * Math.cos(t), c + rf * Math.sin(t), t]); }); const g = svg.append("g"); radii.forEach((r, i) => { if (!counts[i]) return; g.append("circle").attr("cx", c).attr("cy", c).attr("r", r).attr("fill", "none").attr("stroke", "var(--line)").attr("stroke-dasharray", i ? "3 5" : null); g.append("text").attr("x", c).attr("y", c - r - 7 - (i ? 0 : zig + rDot)).attr("text-anchor", "middle").attr("font-family", "DM Mono, monospace").attr("font-size", 12) .attr("fill", "var(--muted)").attr("paint-order", "stroke").attr("stroke", "var(--card)").attr("stroke-width", 5).text(`${i + 1} step${i ? "s" : ""} · ${counts[i]}`); }); const p = G.known(star) ? G.pathOf(star) : [], on = new Set(p); svg.append("path").attr("d", p.length ? d3.line()(p.map((a) => pos.get(a).slice(0, 2))) : null) .attr("fill", "none").attr("stroke", "var(--pink)").attr("stroke-width", 2.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round"); svg.append("g").selectAll("circle").data(G.actors.slice().sort((a, b) => on.has(a) - on.has(b))).join("circle") .attr("cx", (a) => pos.get(a)[0]).attr("cy", (a) => pos.get(a)[1]).attr("r", (a) => (on.has(a) ? 7 : rDot)) .attr("fill", (a) => (on.has(a) ? "var(--pink-fill)" : G.dist.get(a) === 1 ? sdColor(G.root.get(a)) : "var(--card)")) .attr("stroke", (a) => (on.has(a) ? "var(--pink)" : sdColor(G.root.get(a)))).attr("stroke-width", (a) => (on.has(a) ? 1.5 : Math.min(1.5, rDot * 0.4))).style("cursor", "pointer") .on("pointerenter pointermove", (e, a) => sdShowTip(e, `${sdEsc(a)}
via ${sdEsc(G.pathOf(a).slice(1).join(" → "))}`)) .on("pointerleave", sdHideTip).on("click", (e, a) => sdSet(input, a)); svg.append("g").selectAll("image").data(G.family).join("image").attr("href", sdHead) .attr("x", (f) => pos.get(f)[0] - hs / 2).attr("y", (f) => pos.get(f)[1] - hs / 2).attr("width", hs).attr("height", hs) .on("pointerenter pointermove", (e, f) => sdShowTip(e, `${sdEsc(f)}
${G.actors.filter((a) => G.root.get(a) === f && G.dist.get(a) === 1).length} direct co-stars reach him first`)) .on("pointerleave", sdHideTip); if (p.length) { const [x, y, t] = pos.get(star); const label = svg.append("text").attr("font-weight", 700).attr("font-size", 15).attr("paint-order", "stroke").attr("stroke", "var(--card)").attr("stroke-width", 5).attr("stroke-linejoin", "round").attr("y", y + 5).text(star); const right = Math.cos(t) >= 0 ? x + 14 + star.length * 8 < S : x - 14 - star.length * 8 < 0; label.attr("x", x + (right ? 13 : -13)).attr("text-anchor", right ? "start" : "end"); } return el; }50:T2591,// Live search through TMDb: any actor, up to two steps, through top-billed casts. // The key lives only in your browser (localStorage), never in this code. const SD_TMDB = {cache: new Map(), fam: null, added: []}; const SD_SKIP_GENRES = new Set([99, 10763, 10764, 10767]); // documentary, news, reality, talk const sdIsSelf = (c) => /\b(self|himself|herself|themselves)\b/i.test(c.character || ""); function sdTmdbFetch(key, path, params = {}) { const url = new URL("https://api.themoviedb.org/3" + path); for (const [k, v] of Object.entries(params)) url.searchParams.set(k, v); const bearer = key.length > 40; if (!bearer) url.searchParams.set("api_key", key); const id = url.toString(); if (!SD_TMDB.cache.has(id)) { SD_TMDB.cache.set(id, (async () => { for (let attempt = 0; attempt < 4; attempt++) { const r = await fetch(url, {headers: bearer ? {Authorization: `Bearer ${key}`, accept: "application/json"} : {accept: "application/json"}}); if (r.status === 429) { await new Promise((res) => setTimeout(res, 1000 * (attempt + 1))); continue; } if (r.status === 401) throw new Error("TMDb didn’t accept that key. Check that you pasted the whole thing."); if (!r.ok) throw new Error(`TMDb answered with an error (${r.status}). Try again in a minute.`); return r.json(); } throw new Error("TMDb is busy right now. Try again in a minute."); })().catch((e) => { SD_TMDB.cache.delete(id); throw e; })); } return SD_TMDB.cache.get(id); } async function sdPool(items, n, fn) { const out = new Array(items.length); let i = 0; await Promise.all(Array.from({length: Math.min(n, items.length)}, async () => { while (i < items.length) { const j = i++; try { out[j] = await fn(items[j], j); } catch (e) { if (/key/.test(e.message)) throw e; out[j] = null; } } })); return out; } function sdCredits(cc) { const seen = new Map(); for (const c of cc.cast || []) { if ((c.genre_ids || []).some((g) => SD_SKIP_GENRES.has(g)) || sdIsSelf(c)) continue; const key = c.media_type + ":" + c.id; if (seen.has(key)) continue; const date = c.release_date || c.first_air_date || ""; seen.set(key, {key, type: c.media_type, id: c.id, title: c.title || c.name, year: date ? +date.slice(0, 4) : null, pop: c.popularity || 0}); } return [...seen.values()].sort((a, b) => b.pop - a.pop); } async function sdCast(key, credit, top = 20) { const j = credit.type === "tv" ? await sdTmdbFetch(key, `/tv/${credit.id}/aggregate_credits`) : await sdTmdbFetch(key, `/movie/${credit.id}/credits`); return (j.cast || []).slice().sort((a, b) => (a.order ?? 999) - (b.order ?? 999)).slice(0, top).map((p) => ({id: p.id, name: p.name})); } async function sdFindPerson(key, name) { const j = await sdTmdbFetch(key, "/search/person", {query: name, include_adult: "false"}); const rs = j.results || []; const lc = name.trim().toLowerCase(); return rs.find((r) => r.name.toLowerCase() === lc && r.known_for_department === "Acting") || rs.find((r) => r.known_for_department === "Acting") || rs[0] || null; } // Every top-billed co-star of every Skarsgård, built once and kept in your browser for 30 days async function sdFamilyIndex(key, family, onProgress) { if (SD_TMDB.fam) return SD_TMDB.fam; const LS = "sd-tmdb-family-v1"; try { const s = JSON.parse(localStorage.getItem(LS) || "null"); if (s && Date.now() - s.t < 30 * 864e5) return (SD_TMDB.fam = s); } catch (e) {} const members = []; for (const f of family) { const p = await sdFindPerson(key, f); if (p) members.push({name: f, id: p.id}); } const famIds = new Set(members.map((m) => m.id)); const credits = {}; for (const m of members) { const cc = sdCredits(await sdTmdbFetch(key, `/person/${m.id}/combined_credits`)).slice(0, 120); for (const c of cc) if (!credits[c.key] || credits[c.key].pop < c.pop) credits[c.key] = {...c, who: m.name}; } const list = Object.values(credits), people = {}; let done = 0; await sdPool(list, 8, async (c) => { for (const p of await sdCast(key, c)) { if (famIds.has(p.id)) continue; const cur = people[p.id]; if (!cur || credits[cur[1]].pop < c.pop) people[p.id] = [p.name, c.key]; } onProgress?.(++done, list.length); }); const fam = {t: Date.now(), members, famIds: [...famIds], credits, people}; try { localStorage.setItem(LS, JSON.stringify(fam)); } catch (e) {} return (SD_TMDB.fam = fam); } async function sdLiveSearch(key, name, family, onProgress) { const fam = await sdFamilyIndex(key, family, (d, n) => onProgress?.(`Reading the Skarsgårds’ films and shows: ${d} of ${n}. This only happens once.`)); const person = await sdFindPerson(key, name); if (!person) return {status: "notfound"}; if (new Set(fam.famIds).has(person.id)) return {status: "family", person}; const credits = sdCredits(await sdTmdbFetch(key, `/person/${person.id}/combined_credits`)); // films first; a TV show only counts if at least one of them is main cast (two one-off guests never met) const shared = credits.filter((c) => fam.credits[c.key]).sort((x, y) => (x.type === "tv") - (y.type === "tv") || y.pop - x.pop); for (const c of shared) { const who = fam.credits[c.key].who; if (c.type === "tv") { const main = new Set((await sdCast(key, c)).map((p) => p.id)); if (!main.has(person.id) && !main.has(fam.members.find((m) => m.name === who)?.id)) continue; } return {status: "ok", person, path: [{name: person.name}, {film: c}, {name: who, fam: true}]}; } const top = credits.slice(0, 40); let best = null, done = 0; onProgress?.(`Checking ${person.name}’s co-stars…`); await sdPool(top, 8, async (c) => { for (const p of await sdCast(key, c)) { if (p.id === person.id) continue; const hit = fam.people[p.id]; if (!hit) continue; const b = fam.credits[hit[1]], score = c.pop + b.pop; if (!best || score > best.score) best = {score, path: [{name: person.name}, {film: c}, {name: p.name}, {film: b}, {name: b.who, fam: true}]}; } onProgress?.(`Checking ${person.name}’s co-stars: ${++done} of ${top.length} titles`); }); if (best) return {status: "ok", person, path: best.path}; return {status: "far", person, checked: top.length}; } function sdChainHTML(path, star) { const sk = path[path.length - 1].name, steps = (path.length - 1) / 2; let h = `

${steps}${steps === 1 ? "step" : "steps"} from ${sdEsc(star)} to ${sdEsc(sk)}

${sdEsc(n.film.title)} ${n.film.year ?? ""}${n.film.type === "tv" ? " · TV" : ""}

${sdEsc(sdInitials(n.name))}

${badge}
${sdEsc(n.name)}
${n.fam ? "a Skarsgård" : i === 0 ? "your star" : "co-star"}

Live from TMDb, through top-billed casts. This product uses the TMDB API but is not endorsed or certified by TMDB.

`; } // The card's value is everyone found so far, so the other views can add them function sdLive(name, key, family) { const el = sdCard(); el.value = SD_TMDB.added; const say = (html) => { el.querySelector(".sd-live")?.remove(); el.insertAdjacentHTML("beforeend", `

${html}

`); }; const note = (t) => say(`

${t}

`); if (!key) { note("Paste your TMDb key above to search anyone. It’s saved in your browser only."); return el; } if (!name) { note("Type any actor’s name and press Find the chain."); return el; } note(`Looking up ${sdEsc(name)}…`); sdLiveSearch(key, name, family, (t) => note(sdEsc(t))).then((r) => { if (r.status === "notfound") return note(`TMDb has no one called “${sdEsc(name)}”. Check the spelling.`); if (r.status === "family") return note(`${sdEsc(r.person.name)} is a Skarsgård, so that’s zero steps.`); if (r.status === "far") return note(`${sdEsc(r.person.name)} is more than two steps from a Skarsgård, at least through the top-billed casts of their ${r.checked} best-known titles.`); say(sdChainHTML(r.path, r.person.name) + `

${sdEsc(r.person.name)} is now the star in every view below.

`); SD_TMDB.added = [...SD_TMDB.added.filter((a) => a.name !== r.person.name), {name: r.person.name, path: r.path}]; el.value = SD_TMDB.added; el.dispatchEvent(new Event("input", {bubbles: true})); }).catch((e) => note(sdEsc(e.message))); return el; } // Fold live chains into the sample so the web, collectors and orbit can show them function sdLiveFilms(added, films) { const out = films.map((f) => ({...f, cast: [...f.cast]})); const same = (f, film) => f.title.toLowerCase() === film.title.toLowerCase() && (film.type === "tv" || !f.year || !film.year || Math.abs(f.year - film.year) <= 1); for (const {path} of added) { for (let i = 1; i < path.length; i += 2) { const film = path[i].film; let f = out.find((x) => same(x, film)); if (!f) out.push((f = {title: film.title, year: film.year, cast: [], live: true})); for (const p of [path[i - 1].name, path[i + 1].name]) if (!f.cast.includes(p)) f.cast.push(p); } } return out; }51:[{"id":"b798dc4624730045e3227738a0d4ae257de0246e0af379364d42f5b7380a5886bfda26fc6c27309bb9a285dd101d5e1a9a21c6671c3c04ea29c78ba026e7d3e2","href":"https://static.observableusercontent.com/files/b798dc4624730045e3227738a0d4ae257de0246e0af379364d42f5b7380a5886bfda26fc6c27309bb9a285dd101d5e1a9a21c6671c3c04ea29c78ba026e7d3e2","name":"image.jpg","type":"image/jpeg","lastModified":1793819455872,"size":72911},{"id":"3b263b58fd471a9ad9cd37ff67dc76b9ba7a81265bf12e6e493cefebec19a8b110f45c66247e210061f9a7c97551a30dae81b79a7b4ce84e929cd2b7d3d73aae","href":"https://static.observableusercontent.com/files/3b263b58fd471a9ad9cd37ff67dc76b9ba7a81265bf12e6e493cefebec19a8b110f45c66247e210061f9a7c97551a30dae81b79a7b4ce84e929cd2b7d3d73aae","name":"stellan.jpg","type":"image/jpeg","lastModified":1793819483488,"size":39142},{"id":"7c19328f31b22a0b5618b65591bdd11b9e8612c7e2f0b336f6debc65455de345dfc00fddc51d2fcffff35d6aab861c2cecd982d2a708e32a4f8e6271f25b18a2","href":"https://static.observableusercontent.com/files/7c19328f31b22a0b5618b65591bdd11b9e8612c7e2f0b336f6debc65455de345dfc00fddc51d2fcffff35d6aab861c2cecd982d2a708e32a4f8e6271f25b18a2","name":"alexander.jpg","type":"image/jpeg","lastModified":1793819483491,"size":139946},{"id":"f0893f1a75840cee272b6d8a64c1a6396b040c503dc6f9d719d5bda274dc01248dffb6e79a7ba5ad1a9475cca035404e8b547892a22b6dda29f16d3420115eed","href":"https://static.observableusercontent.com/files/f0893f1a75840cee272b6d8a64c1a6396b040c503dc6f9d719d5bda274dc01248dffb6e79a7ba5ad1a9475cca035404e8b547892a22b6dda29f16d3420115eed","name":"gustaf.jpg","type":"image/jpeg","lastModified":1793819483493,"size":39520},{"id":"ee2bfef49e4194b018363fb2d9aa248d519bac0609f3caeb50cbf1b72a6dc4badd53c12bb38790ae56fba4e20dc763011ba350eeccff5b8def146989370b2d91","href":"https://static.observableusercontent.com/files/ee2bfef49e4194b018363fb2d9aa248d519bac0609f3caeb50cbf1b72a6dc4badd53c12bb38790ae56fba4e20dc763011ba350eeccff5b8def146989370b2d91","name":"bill.jpg","type":"image/jpeg","lastModified":1793819483495,"size":84782},{"id":"b798dc4624730045e3227738a0d4ae257de0246e0af379364d42f5b7380a5886bfda26fc6c27309bb9a285dd101d5e1a9a21c6671c3c04ea29c78ba026e7d3e2","href":"https://static.observableusercontent.com/files/b798dc4624730045e3227738a0d4ae257de0246e0af379364d42f5b7380a5886bfda26fc6c27309bb9a285dd101d5e1a9a21c6671c3c04ea29c78ba026e7d3e2","name":"valter.jpg","type":"image/jpeg","lastModified":1793819483497,"size":72911}] 48:{"id":"cba866ba0f0e7022","slug":"six-degrees-of-skarsgard","title":"Six Degrees of Skarsgård","thumbnail":"a265e976a35f37ec4dd3b0d6b65c6b6c05d74103e2adf9bf51d3ccdec126b39a","access_level":"public","create_time":"$D2026-11-04T19:09:52.138Z","update_time":"$D2026-11-10T18:57:00.405Z","view_time":null,"first_public_time":"$D2026-11-10T18:36:39.162Z","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":115,"publish_version":115,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Six Degrees of Skarsgård","cells":[{"id":26,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"display(sdFamily(G));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const starInput = Inputs.text({label: \"Pick a star\", placeholder: \"Type an actor's name\", datalist: G.actors, value: liveAdded.at(-1)?.name ?? \"Kevin Bacon\", width: 280});\nconst star = view(starInput);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"display(sdPicks(G, star, starInput));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## A. The chain\n\nJust the answer. Each hop is a film two people were both in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"display(sdChain(G, star));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Type Anyone (live)\n\nThis one searches real cast lists on [TMDb](https://www.themoviedb.org), so any actor works, not just the ${sdGraph(family, films).actors.length} in the sample. Whoever you find becomes the star in every view below and stays in the web and the orbit until you reload.\n\nYou can paste your own TMDb API Read Access Token (or API key) into the box.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Want everyone to be able to use \"Type anyone\"? Paste your TMDb token between the quotes.\n// Heads up: once the notebook is public, anyone can read it here. Leave it empty to keep it off.\nconst SHARED_TMDB_KEY = \"\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"const tmdbKeyInput = Inputs.password({label: \"TMDb key\", placeholder: \"Paste your API Read Access Token\", width: 360, value: (() => { try { return localStorage.getItem(\"sd-tmdb-key\") || \"\"; } catch (e) { return \"\"; } })()});\ntmdbKeyInput.addEventListener(\"input\", () => { try { localStorage.setItem(\"sd-tmdb-key\", tmdbKeyInput.value.trim()); } catch (e) {} });\nconst tmdbKey = view(tmdbKeyInput);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const liveQuery = view(Inputs.text({label: \"Type anyone\", placeholder: \"e.g. Pedro Pascal\", submit: \"Find the chain\", width: 280}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const liveAdded = view(sdLive(liveQuery.trim(), tmdbKey.trim() || SHARED_TMDB_KEY.trim(), family));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## B. The web\n\nHere is everyone at once colored by the Skarsgård they reach first. You can drag anyone around. You can click a dot to make them your star. The pink line is your star's path.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"display(sdWeb(G, star, webLayout, starInput));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## C. The collectors\n\nActors who have worked with more than one Skarsgård, with one face per shared project. Hover a face to see the film, or click a row to pick that actor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"display(sdCollectors(G, star, starInput));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## D. The orbit\n\nThe family sits in the middle, and each ring is one more step away. Click any dot to pick that actor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"display(sdOrbit(G, star, starInput));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## The data\n\nA hand-picked sample of films and shows, not full casts, so a real-world chain could be even shorter. Add a film or a cast member and every view updates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const G = sdGraph(family, sdLiveFilms(liveAdded, films));\nconst webLayout = sdWebLayout(G);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## The faces\n\nThe five portraits are made from photos attached to this notebook and printed in each Skarsgård's own ink. Change an ink in `INKS` and the faces, dots and lines all update.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Chart code\n\nPlain functions using the built-in `d3`. Each view returns a self-contained card with its own styles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$50","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 24:null