mxGraphNarrativeChartsRewrite.js

// Function to wrangle data into the required format
function wrangle(data) {
  let charactersMap = {};

  // Helper function to get characters by ID
  function characterById(id) {
    if (!charactersMap[id]) {
      charactersMap[id] = data.characters.find(character => character.id === id);
    }
    return charactersMap[id];
  }

  return data.scenes.map(scene => ({
    characters: scene.map(characterById).filter(Boolean)
  }));
}

// Main function to handle visualization
function main(container) {
  const scenes = wrangle(data);
  const sceneWidth = 14;
  const width = scenes.length * sceneWidth * 4;
  const height = 300;

  // Initialize the narrative layout
  const narrative = initializeNarrative(scenes, width, height);

  // Set up the graph
  const graph = setUpGraph(container);

  // Populate the graph with data
  populateGraph(graph, narrative, sceneWidth);

  // Encode and log the graph
  logGraph(graph);
}

// Function to initialize the narrative layout
function initializeNarrative(scenes, width, height) {
  return d3.layout.narrative()
    .scenes(scenes)
    .size([width, height])
    .pathSpace(10)
    .groupMargin(20)
    .labelSize([110, 15])
    .scenePadding([5, width / (2 * scenes.length), 5, width / (2 * scenes.length)])
    .labelPosition('left')
    .layout();
}

// Function to set up the graph
function setUpGraph(container) {
  mxEvent.disableContextMenu(container);
  const graph = new mxGraph(container);
  graph.setEnabled(false);
  graph.setConnectable(false);
  graph.setCellsResizable(false);

  const style = {
    [mxConstants.STYLE_EDGE]: mxEdgeStyle.SegmentConnector,
    [mxConstants.STYLE_ENDARROW]: mxConstants.NONE,
    [mxConstants.STYLE_CURVED]: 1
  };
  graph.getStylesheet().putDefaultEdgeStyle(style);

  return graph;
}

// Function to populate the graph with data
function populateGraph(graph, narrative, sceneWidth) {
  const model = graph.getModel();
  const parent = graph.getDefaultParent();

  model.beginUpdate();
  try {
    const { appearanceVertices, introVertices } = drawScenes(graph, parent, narrative, sceneWidth);
    drawLinks(graph, parent, narrative, appearanceVertices, introVertices);
  } finally {
    model.endUpdate();
  }
}

// Function to draw scenes and return vertices
function drawScenes(graph, parent, narrative, sceneWidth) {
  const appearanceVertices = {};
  const introVertices = {};
  const scenes = narrative.scenes();

  scenes.forEach(scene => {
    const cluster = graph.insertVertex(
      parent, null, '', Math.round(scene.x) + 0.5, Math.round(scene.y) + 0.5, sceneWidth, scene.height,
      'rounded=1;arcSize=30;'
    );
    cluster.setConnectable(false);

    scene.appearances.forEach(appearance => {
      const characterId = appearance.character.id;
      const appearanceVertex = graph.insertVertex(
        cluster, null, '', appearance.x - 2, appearance.y, 4, 4,
        'shape=ellipse;fillColor=black;strokeColor=black;'
      );
      if (!appearanceVertices[characterId]) {
        appearanceVertices[characterId] = {};
      }
      appearanceVertices[characterId][scene.start] = appearanceVertex;
    });
  });

  narrative.introductions().forEach(d => {
    const intro = graph.insertVertex(
      parent, null, d.character.name, Math.round(d.x), Math.round(d.y), 110, 15,
      'align=right'
    );
    introVertices[d.character.id] = intro;
  });

  return { appearanceVertices, introVertices };
}

// Function to draw links between characters
function drawLinks(graph, parent, narrative, appearanceVertices, introVertices) {
  const links = narrative.links();

  links.forEach(link => {
    const sourceCharacterId = link.source.character.id;
    const targetCharacterId = link.target.character.id;
    const sourceSceneStart = link.source.scene ? link.source.scene.start : null;
    const targetSceneStart = link.target.scene ? link.target.scene.start : null;
    const sourceVertex = getVertex(sourceCharacterId, sourceSceneStart, true, appearanceVertices, introVertices);
    const targetVertex = getVertex(targetCharacterId, targetSceneStart, false, appearanceVertices, introVertices);

    if (sourceVertex && targetVertex) {
      graph.insertEdge(parent, null, '', sourceVertex, targetVertex, 'curved=1;endArrow=None');
    }
  });
}

// Helper function to get the vertex
function getVertex(characterId, sceneStart, isSource, appearanceVertices, introVertices) {
  return isSource && sceneStart == null ?
    introVertices[characterId] :
    appearanceVertices[characterId] && appearanceVertices[characterId][sceneStart];
}

// Function to encode and log the graph
function logGraph(graph) {
  const encoder = new mxCodec();
  const result = encoder.encode(graph.getModel());
  const xml = mxUtils.getXml(result);
  console.log(xml);
}