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(); }