Document Relationship Network

Interactive visualization of document relationships

Keywords

D3, force-directed graph, document analysis

d3 = require("d3@7")

// Load data with absolute path resolution
rawData = {
  try {
    return await FileAttachment("document-graph/document-relationships-visualization.json").json();
  } catch (error) {
    console.error("Failed to load data:", error);
    // Return empty structure if file not found
    return {
      nodes: [],
      edges: [],
      metadata: { total_documents: 0 },
      statistics: {}
    };
  }
}

// Display loading status
html`<div style="padding: 10px; background: #f0f0f0; margin-bottom: 20px;">
  <strong>Data Status:</strong> Loaded ${rawData.nodes?.length || 0} nodes and ${rawData.edges?.length || 0} edges
  <br><strong>Generated:</strong> ${rawData.metadata?.generated_at || 'Unknown'}
</div>`

graphData = {
  const nodes = (rawData.nodes || []).map(n => ({
    id: n.id,
    label: n.label || n.id,
    categories: n.categories || [],
    tags: n.tags || []
  }));
  
  // Use the pre-calculated edges with strength values
  const links = (rawData.edges || []).map(e => ({
    source: e.from,
    target: e.to,
    value: e.value,
    title: e.title,
    type: 'shared_metadata'
  }));
  
  return { nodes, links };
}

// Interactive force-directed graph
chart = {
  if (!graphData.nodes.length) {
    const svg = d3.create("svg")
      .attr("width", 1200)
      .attr("height", 800)
      .style("max-width", "100%");
    
    svg.append("text")
      .attr("x", 600)
      .attr("y", 400)
      .attr("text-anchor", "middle")
      .text("No data available. Run generate_doc_relationships.py to create visualization data.")
      .style("font-size", "18px")
      .style("fill", "#666");
    
    return svg.node();
  }
  
  const width = 1200;
  const height = 800;
  
  const categories = [...new Set(graphData.nodes.flatMap(d => d.categories))];
  const color = d3.scaleOrdinal(categories.length > 0 ? categories : ['default'], d3.schemeTableau10);
  
  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("max-width", "100%")
    .style("height", "auto")
    .style("font", "12px sans-serif");
  
  // Deep copy nodes for simulation
  const nodes = graphData.nodes.map(d => Object.create(d));
  const links = graphData.links.map(d => Object.create(d));
  
  const simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(d => d.id).distance(150))
    .force("charge", d3.forceManyBody().strength(-400))
    .force("x", d3.forceX(width / 2).strength(0.1))
    .force("y", d3.forceY(height / 2).strength(0.1))
    .force("collide", d3.forceCollide().radius(60));
  
  // Links - width and color show strength
  const maxStrength = d3.max(links, d => d.value) || 1;
  const linkWidthScale = d3.scaleLinear()
    .domain([0, maxStrength])
    .range([1, 8]);
  
  const link = svg.append("g")
    .selectAll("line")
    .data(links)
    .join("line")
    .attr("stroke", d => d3.interpolateBlues(0.3 + (d.value / maxStrength) * 0.5))
    .attr("stroke-opacity", d => 0.3 + (d.value / maxStrength) * 0.5)
    .attr("stroke-width", d => linkWidthScale(d.value));
  
  // Add tooltips to links
  link.append("title")
    .text(d => `${d.title || 'Related'}\nStrength: ${d.value}`);
  
  // Node container
  const node = svg.append("g")
    .selectAll("g")
    .data(nodes)
    .join("g")
    .style("cursor", "pointer")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));
  
  // Node circles
  node.append("circle")
    .attr("r", 10)
    .attr("fill", d => color(d.categories[0] || 'default'))
    .attr("stroke", "#fff")
    .attr("stroke-width", 2);
  
  // Node labels
  node.append("text")
    .text(d => d.id.replace('.md', ''))
    .attr("x", 15)
    .attr("y", 5)
    .attr("font-size", "11px")
    .attr("fill", "#333");
  
  // Tooltips for nodes
  node.append("title")
    .text(d => `${d.id}\nTags: ${d.tags.join(', ') || 'none'}\nCategories: ${d.categories.join(', ') || 'none'}`);
  
  // Hover effects
  node.on("mouseenter", function(event, d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 15);
    
    d3.select(this).select("text")
      .attr("font-weight", "bold")
      .attr("font-size", "13px");
  });
  
  node.on("mouseleave", function(event, d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 10);
    
    d3.select(this).select("text")
      .attr("font-weight", "normal")
      .attr("font-size", "11px");
  });
  
  simulation.on("tick", () => {
    link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
    
    node.attr("transform", d => `translate(${d.x},${d.y})`);
  });
  
  function dragstarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
  }
  
  function dragended(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  
  invalidation.then(() => simulation.stop());
  
  return svg.node();
}