2c:null 2d:["$","title",null,{"children":"“Timeframing” Character Media Table | Erik Loyer | Observable"}] 32:T8eb,chart = { const cellSize = 4; const container = d3.create("div") .classed("container", true); var charactersById = {}; var stepsByCharacter = {}; for (let i = 0; i < json.characters.length; ++i) { let character = json.characters[i]; charactersById[character.id] = character; stepsByCharacter[character.id] = []; } var mediaById = {}; for (let i = 0; i < json.media.length; ++i) { let media = json.media[i]; mediaById[media.id] = media; } var actionsByCharacter = {}; var steps = json.scenes[0].sequences[0].steps; for (let i = 0; i < steps.length; ++i) { var currentActionsByCharacter = {}; for (let j = 0; j < json.characters.length; ++j) { let character = json.characters[j]; currentActionsByCharacter[character.id] = []; } for (let j = 0; j < steps[i].actions.length; ++j) { let action = steps[i].actions[j]; currentActionsByCharacter[action.character].push(action); } for (let j = 0; j < json.characters.length; ++j) { let character = json.characters[j]; if (currentActionsByCharacter[character.id].length == 0) { currentActionsByCharacter[character.id].push({}); } stepsByCharacter[character.id].push(currentActionsByCharacter[character.id]); } } const character = container.selectAll("div") .data(json.characters) .join("div") .classed("character", true) .html(d => { return `

${d.fullName}

`; }); const characterSteps = character.selectAll("div") .data(d => stepsByCharacter[d.id]) .join("div") .classed("cell", true) .style('background-image', d => { let style = null; for (let i = 0; i < d.length; i++) { switch (d[i].command) { case "show-image": case "show-video": let media = mediaById[d[i].content]; if (media) { style = `url(${media.thumbnail})` } } } return style; }) .html(d => { let textContent = ' '; for (let i = 0; i < d.length; i++) { if (d[i].command == 'speak') { textContent = d[i].content; } } return textContent; }); return container.node(); }33:[{"id":"b199382554539a4425e3761db667e0e4ca58d191cbb5807d3030b31fb58643491223952ed6a8fe9c2d9fe2017eff6c920259e85f47edf2285b1b753db712a6bd","href":"https://static.observableusercontent.com/files/b199382554539a4425e3761db667e0e4ca58d191cbb5807d3030b31fb58643491223952ed6a8fe9c2d9fe2017eff6c920259e85f47edf2285b1b753db712a6bd","name":"timeframing@1.json","type":"application/json","lastModified":1628688821991.07,"size":320875}] 30:{"id":"a09184e39267d46b","slug":"timeframingvis","title":"“Timeframing” Character Media Table","thumbnail":"4757363dd45ad5b1607e8bae67985c4c52ab9b5603a5b1752ce75ea9dd497e20","access_level":"unlisted","create_time":"$D2021-07-29T13:17:47.076Z","update_time":"$D2021-08-11T13:36:34.646Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"59ba702b322f22b3","login":"eloyer","name":"Erik Loyer","avatar_url":"https://avatars-next.observableusercontent.com/7004b2c7e7db847b1b0f9337df52eb42b76d022be00450c37e88d11bb432dc37","tier":"starter_2024"},"version":188,"publish_version":188,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d47403553555108","login":"eloyer","name":"Erik Loyer","avatar_url":"https://avatars-next.observableusercontent.com/7004b2c7e7db847b1b0f9337df52eb42b76d022be00450c37e88d11bb432dc37","tier":null}],"members":[{"type":"individual","id":"3d47403553555108","login":"eloyer","name":"Erik Loyer","avatar_url":"https://avatars-next.observableusercontent.com/7004b2c7e7db847b1b0f9337df52eb42b76d022be00450c37e88d11bb432dc37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"“Timeframing” Character Media Table","cells":[{"id":0,"value":"# “Timeframing” Character Media Table","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"json = FileAttachment(\"timeframing@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"FileAttachment(\"timeframing@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"