Alice Thornton’s Network, 1651-1669

A network of people in Alice Thornton’s autobiographical writings

A network of people mentioned in the narratives of Events tagged by the Alice Thornton’s Books project.

ojsEvNodes = transpose(ojs_ev_nodes)
ojsEvEdges = transpose(ojs_ev_edges)

ojsPeople = transpose(ojs_people)

// adapted code from KDL agents network
data = {
  return {
    nodes: ojsEvNodes,
    links: ojsEvEdges
  };
}

The network

• drag circles (“nodes”) or zoom the chart in and out to focus on specific areas
• hover over nodes or lines (“links” or “edges”) for additional information
• hover over a node also highlights that person’s connections
• click on the node to make it stick so you can take a closer look (click again anywhere else to reset)

See notes below for more detail about the network and the chart. The lookup table below provides a simple filter to find individuals of interest and click through to find out more about them in the ATB edition.

//legend (standalone using Plot.legend)
//see https://observablehq.com/d/a23f6e59f1380df0

Plot.legend({
  color: {
    domain: colourDomain, 
    range: colourRange
  },
  swatchSize: 14, 
  style: {
    fontSize: "14px" // standard size is a bit small
  },
  opacity: 0.75 // tweak to match links
})

chartHighlight()

Lookup people

// inputs search for subject
viewof search_ppl = Inputs.search(
    ojsPeople
    , {label: "Filter names:", columns: ["name"], width: 300}
    )

Inputs.table(
  search_ppl
  , 
  {
  rows: 10,
  //select: false, // doesn't work (Quarto issue, not Obs!); need css to hide select.
  format: {
    birth_s: (d) => `${d}`,
    death_s: (d) => `${d}`,
    name: (d, i, data) => htl.html`<a href=${data[i].url} target=_blank>${d}</a>`
  } ,
    columns: [
    "name",
    "gender",
    "birth_s",
    "death_s", 
    "mentions",
    "connections"
  ],
  header: {
    birth_s: "born",
    death_s: "died"
  }
}
  )

Notes and caveats

This is an exploratory chart, and shouldn’t be taken too seriously. It may suggest connections and groupings among individuals; but apparent links may be illusory, and stronger real links might be obscured by the limitations of the data. (It should be noted, for example, that Alice Thornton herself is a relatively minor presence in the chart because she rarely referred to herself in the third person and we chose not to tag first person references.)

The chart only shows a subset of all possible connections in the ATB data, to make it more legible:

• it’s restricted to events that began between 1651 (the year Alice Thornton married) and 1669 (the year after her husband died)
• some minor or fragmentary events have also been removed
• individuals must have at least 15 connections to be included
• pairs of individuals must have at least 2 connections for the link to be shown

The date filter removes (or reduces the significance of) many people involved in the tumultuous events of the 1640s and I may do a separate network chart for that period. It’s likely to look very different from this one.

Connections between people are made on the basis of co-occurrence in tagged mentions of events in the Books. There’s no attempt to measure the nature or strength of those connections; people may be mentioned in passing in an event and not directly interact with others who were more central to the narrative. Even so, the juxtaposition usually suggests there’s some kind of link between them.

Some features of the graph are designed to help consider the strength of connections: the size of nodes reflects (to some extent) how many connections an individual has overall, and the width of the links reflects the number of times a pair of individuals co-occur. (Hover over nodes and links to see actual numbers.)

Subject keywords were assigned to events by the project. I counted pairs’ shared keywords and used the top ranked keyword as a way to categorise the association between them. This seems to highlight a number of clusters in the network quite pleasingly, but hasn’t been tested out at all; at the level of individual pairs it might not necessarily feel like the most accurate representation of a relationship. (Some pairs could be very heavily skewed towards a particular keyword, but others were more evenly distributed.)

Resources

The chart has been made primarily using D3.js and ObservableJS. A number of Observable Notebooks were key resources for specific aspects:

• Lanchester family network (curvy lines and link categories)
• Network graph with d3.force grouping (highlighting and tooltips)
• Plot: Legends (standalone legend)

// functionify the chart (though it isn't really necessary in OJS) and then you can keep code out of the way

function chartHighlight() {

  // The force simulation mutates links and nodes, so create a copy
  // so that re-evaluating this cell produces the same result.
  
  const links = data.links.map(d => Object.create(d));
  const nodes = data.nodes.map(d => Object.create(d));


// added for highlighting from bn highlight chart
  
  // create link reference
  let linkedByIndex = {};
  data.links.forEach(d => {
    linkedByIndex[`${d.source},${d.target}`] = true;
  });
  
  // nodes map
  let nodesById = {};
  data.nodes.forEach(d => {
    nodesById[d.id] = {...d};
  })

  const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`];
  const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`];
  const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b;
  const isEqual = (a, b) => a === b;


// end of added bit



  // Create the SVG container.
    // tweak /2 in viewBox to adjust centering of graph vertical/horizontal

  const svg = d3.create("svg")
      .attr("viewBox", [-width / 2.5, -height / 2, width, height])
      .style("font", "11px sans-serif");
  
  

    // Create a simulation with several forces. 
    // what does strength do? bigger number=more spread out. -400 seems a reasonable default
  
  const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id))
      .force("charge", d3.forceManyBody().strength(-1200))
      .force("x", d3.forceX())
      .force("y", d3.forceY());




// ifClicked added from bn highlight chart

  let ifClicked = false;

  
// Create a container to enable mousewheel zoom 
// nb g = baseGroup in bn highlight chart. 

var g = svg.append("g")
    .attr("class", "everything");
  
  // Per-type markers, as they don't inherit styles. 
    
  svg.append("defs")
    .selectAll("marker")
    .data(types) // using the types array at this point, not nodes
    .join("marker")
      //.attr("id", d => `arrow-${d}`) // does this do anything? it does when you use types!
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -0.5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
        .append("path")
      .attr("d", "M0,-5L10,0L0,5");


    // tweak width and opacity of lines in this bit
    
  const link = g.append("g")
      .attr("fill", "none")
      //.attr("stroke-width", 1.5)
      .attr("stroke-opacity", 0.6) 
      .selectAll("path")
      .data(links)
      .join("path")
      .attr("stroke-width", d => d.weight2) 
      .attr("stroke", d => colour(d.type)) 
      //.attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`) // doesn't seem to do anything
      ;

    // alt text for type. cba to do more tooltips!
  link.append("title")
    .text(d => `pair type: ${d.type}; ${d.weight} connections`);



  const node = g.append("g")
      .attr("stroke-linecap", "round")
      .attr("stroke-linejoin", "round")
       //.attr("r", 5)
        .selectAll("g")
        .data(nodes)
      .join("g")
      .call(drag(simulation));


    // no idea why some things have to be in the next bit and others in the bit above. opacity can go in either. none of d3 makes much sense to me.
    
  node.append("circle")
      //.attr("stroke", "white") // not sure about this
      //.attr("stroke-width", 1)
      // not convinced by opacity here
        //.style("fill-opacity", 0.8)  // style instead of attr, why ffs.
      .attr("fill", "#454D5D") // #454D5D matches tooltip background
      //.attr("fill", d => color(d.infomap)) // works but need different scale
        .attr("r", d => d.grp_mentions) ; // size of node





  // text labels
  
   const textElems = g.append('g')
        .selectAll('text')
        .data(nodes)
        .join('text')
      .text(d => d.name) // adding stuff from nodes works here...
      .attr('font-size', 13)
      .attr("opacity", 1)
      .call(drag(simulation));



// ticked function added for highlight 
// NB this incorporates grp_mentions.

    function ticked() {
          link.attr("d", linkArc);
        node.attr("transform", d => `translate(${d.x},${d.y})`);
        textElems
        .attr("x", d => d.x + d.grp_mentions + 2)
        .attr("y", d => d.y);
    }
    
    // highlight chart also adds .nodes(nodes) to the original.
    // idk what that does, as it seems to work without it. possibly smoother?
    
    simulation
        .nodes(nodes)
        .on("tick", ticked)
    
    // it also adds this; again, no idea.
    
  simulation.force("link")
      .links(links);
        
// end of ticked edits

  
  
// adding mousey stuff for highlighting/tooltips 
// TODO add more info to tooltips? 

  const mouseOverFunction = (event, d) => {
    tooltip.style("visibility", "visible")
    .html(() => {
        const content = `${d.label_name}<br/>${d.n_mentions} mentions<br/>${d.degree} connections`; 
        return content;
      });

    if (ifClicked) return;

    node
      .transition(500)
        .style('opacity', o => {
          const isConnectedValue = isConnected(o.id, d.id);
          if (isConnectedValue) {
            return 1.0;
          }
          return 0.1;
        });

    link
      .transition(500)
        .style('stroke-opacity', o => {
        console.log(o.source === d)
      return (o.source === d || o.target === d ? 1 : 0.1)})
        .transition(500)
        .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()'));
        
    textElems
      .transition(500)
        .style('opacity', o => {
          const isConnectedValue = isConnected(o.id, d.id);
          if (isConnectedValue) {
            return 1.0;
          }
          return 0.1;
        });
        
  };

  const mouseOutFunction = (event, d) => {
  
    tooltip.style("visibility", "hidden");

    if (ifClicked) return;

    node
      .transition(500)
      .style('opacity', 1);

    link
      .transition(500)
      .style("stroke-opacity", o => {
        console.log(o.value)  
      });

        textElems
      .transition(500)
      .style('opacity', 1);

  };
  
  
  const mouseClickFunction = (event, d) => {
  
    // we don't want the click event bubble up to svg
    event.stopPropagation();
    
    ifClicked = true;
    
    node
      .transition(500)
      .style('opacity', 1)

    link
      .transition(500);
      
    textElems
      .transition(500)
      .style('opacity', 1)
 
 
    node
      .transition(500)
        .style('opacity', o => {
          const isConnectedValue = isConnected(o.id, d.id);
          if (isConnectedValue) {
            return 1.0;
          }
          return 0.1
        })

    textElems
      .transition(500)
        .style('opacity', o => {
          const isConnectedValue = isConnected(o.id, d.id);
          if (isConnectedValue) {
            return 1.0;
          }
          return 0.1
        })

    link
      .transition(500)
      .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0.1))
        .transition(500)
        .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()'));
        
  };
  

  node.on('mouseover', mouseOverFunction)
      .on('mouseout', mouseOutFunction)
      .on('click', mouseClickFunction)
      .on('mousemove', (event) => tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"));
  
  svg.on('click', () => {
    ifClicked = false;
    node
      .transition(500)
      .style('opacity', 1);

    link
      .transition(500)
      .style("stroke-opacity", 0.5)

    textElems
      .transition(500)
      .style('opacity', 1);
    
  });
// end of .mousey stuff
 

  invalidation.then(() => simulation.stop());



// mousewheel zoom functionality 
  
svg.call(d3.zoom()
      .extent([[0, 0], [width, height]])
      .scaleExtent([0, 8])
      .on("zoom", zoomed));

  function zoomed({transform}) {
    g.attr("transform", transform);
  }
  
  
  return svg.node();
}

// add tooltip
tooltip = d3.select("body").append("div")
  .attr("class", "svg-tooltip")
    .style("position", "absolute")
    .style("visibility", "hidden")
    .text("I'm a circle!");

height = 1200;

// i think this is not allowed in same code chunk as the domain/range!
colour = d3.scaleOrdinal(colourDomain, colourRange);

colourDomain = types;

// range is the d3 scheme; doesn't matter if there are more colours in the scheme than in the domain
// https://d3js.org/d3-scale-chromatic/categorical

colourRange = d3.schemeObservable10;

// list of event types. alphabetical sort
types =
    Array.from(new Set(data.links.map(d => d.type)))
    .sort()

// function for the curved edges, don't ask me how it works lol.

function linkArc(d) {
  const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
  return `
    M${d.source.x},${d.source.y}
    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
  `;
}

// drag function

function drag(simulation) {
  
  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;
  }
  
  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
}

// need to require d3
d3 = require("d3@7")