Easily build and display interactive ‘Matrices of Harris’

The Harris Matrix is a tool used in archaeology to depict the temporal succession of archaeological contexts and thus the sequence of events. It was first developed by Edward Harris. Despite the name, it is not a matrix, but a directed acyclic graph (DAG).

The component can be used to display any kind of DAG.

In this page:

• Basic example with DOT notation data
• Basic example with data array
• Example with onClickNode event
• API Documentation

Basic example with DOT notation data

<HarrisMatrix 
      containerClassNames="border"
      dot='digraph G {
        "1126" -> "833"; 
        "1018" -> "1102"; 
        "1018" -> "1085"; 
        "1171" -> "1160"; 
        "1171" -> "1159";
        }
      '
  />

Basic example with data array

<HarrisMatrix 
    containerClassNames="border"
    data={[
      ["uno", "due"],
      ["due", "tre"]
    ]}
  />

Example with onClickNode event

<HarrisMatrix 
    containerClassNames="border"
    data={[
      ["uno", "due"],
      ["due", "tre"]
    ]}
    onClickNode={ text => alert(`Hai cliccato il nodo con testo: ${text}`) }
  />

API documentation

dot

The DOT string representing the graph.

• String
• Required if data is not set
• Default: null

data

The array of edges representing the graph. Each edge is represented as an array of two strings.

• Array
• Required if dot is not set
• Default: []

width

The width of the graph container

• String
• Optional
• Default: "100%"

height

The height of the graph container.

• String
• Optional
• Default: "400px"

containerClassNames

Additional class names for the container.

• String
• Optional
• Default: null

onClickNode

Function to call when a node is clicked. The node's text is passed as a parameter.

• Function
• Optional
• Default:

  nodeText => { console.log(nodeText) }