Dependence of propositions in Book I of Euclid's Elements

.block

license: gpl-3.0
height: 800

README.md

An example of a directed force layout made in D3.js adapated from Mike Bostock's examples Mobile Patent Suits and Sticky Force Layout. This is a dependency diagram of the propositions from Book I of Euclid's Elements. Proposition A depends on proposition B if and only if proposition B needs to be invoked in order to prove proposition A. The dependence of the first book's 48 propositions on the definitions, common notions, and postulates given by Euclid at the beginning of the book is not shown in this diagram. To see a full dependency diagram for Book I, albeit non-interactive, take a look at Thomson Nguyen's diagram.

Click on a node to drag it and read the statement of the corresponding proposition. Propositions colored red depend on the selected (blue) proposition. Follow the link to read a proof of the proposition at David Joyce's online edition of the Elements. Double click the node to clear the selection.

The proposition text comes from David Joyce's online edition of Euclid's Elements. Read the full text here. Inspiration for this project comes from serving as a TA for David Jabon's history of mathematics course taught during the summer 2017 session of the University of Chicago's SESAME Program.

euclid_bookI.json

{
	"BookI": [
		{
			"prop": "1.1",
			"dependencies": [],
			"text": "To construct an equilateral triangle on a given finite straight line.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI1.html"
		},
		{
			"prop": "1.2",
			"dependencies": ["1.1"],
			"text": "To place a straight line equal to a given straight line with one end at a given point.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI2.html"
		},
		{
			"prop": "1.3",
			"dependencies": ["1.1", "1.2"],
			"text": "To cut off from the greater of two given unequal straight lines a straight line equal to the less.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI3.html"
		},
		{
			"prop": "1.4",
			"dependencies": [],
			"text": "If two triangles have two sides equal to two sides respectively, and have the angles contained by the equal straight lines equal, then they also have the base equal to the base, the triangle equals the triangle, and the remaining angles equal the remaining angles respectively, namely those opposite the equal sides.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI4.html"
		},
		{
			"prop": "1.5",
			"dependencies": ["1.3", "1.4"],
			"text": "In isosceles triangles the angles at the base equal one another, and, if the equal straight lines are produced further, then the angles under the base equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI5.html"
		},
		{
			"prop": "1.6",
			"dependencies": ["1.3", "1.4"],
			"text": "If in a triangle two angles equal one another, then the sides opposite the equal angles also equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI6.html"
		},
		{
			"prop": "1.7",
			"dependencies": ["1.5"],
			"text": "Given two straight lines constructed from the ends of a straight line and meeting in a point, there cannot be constructed from the ends of the same straight line, and on the same side of it, two other straight lines meeting in another point and equal to the former two respectively, namely each equal to that from the same end.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI7.html"
		},
		{
			"prop": "1.8",
			"dependencies": ["1.5", "1.7"],
			"text": "If two triangles have the two sides equal to two sides respectively, and also have the base equal to the base, then they also have the angles equal which are contained by the equal straight lines.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI8.html"
		},
		{
			"prop": "1.9",
			"dependencies": ["1.1", "1.3", "1.8"],
			"text": "To bisect a given rectilinear angle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI9.html"
		},
		{
			"prop": "1.10",
			"dependencies": ["1.1", "1.4", "1.9"],
			"text": "To bisect a given finite straight line.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI10.html"
		},
		{
			"prop": "1.11",
			"dependencies": ["1.1", "1.3", "1.8"],
			"text": "To draw a straight line at right angles to a given straight line from a given point on it.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI11.html"
		},
		{
			"prop": "1.12",
			"dependencies": ["1.8", "1.10"],
			"text": "To draw a straight line perpendicular to a given infinite straight line from a given point not on it.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI12.html"
		},
		{
			"prop": "1.13",
			"dependencies": ["1.11"],
			"text": "If a straight line stands on a straight line, then it makes either two right angles or angles whose sum equals two right angles.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI13.html"
		},
		{
			"prop": "1.14",
			"dependencies": ["1.11", "1.13"],
			"text": "If with any straight line, and at a point on it, two straight lines not lying on the same side make the sum of the adjacent angles equal to two right angles, then the two straight lines are in a straight line with one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI14.html"
		},
		{
			"prop": "1.15",
			"dependencies": ["1.11", "1.13"],
			"text": "If two straight lines cut one another, then they make the vertical angles equal to one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI15.html"
		},
		{
			"prop": "1.16",
			"dependencies": ["1.3", "1.4", "1.10", "1.15"],
			"text": "In any triangle, if one of the sides is produced, then the exterior angle is greater than either of the interior and opposite angles",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI16.html"
		},
		{
			"prop": "1.17",
			"dependencies": ["1.13", "1.16"],
			"text": "In any triangle the sum of any two angles is less than two right angles.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI17.html"
		},
		{
			"prop": "1.18",
			"dependencies": ["1.3", "1.5", "1.16"],
			"text": "In any triangle the angle opposite the greater side is greater.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI18.html"
		},
		{
			"prop": "1.19",
			"dependencies": ["1.5", "1.18"],
			"text": "In any triangle the side opposite the greater angle is greater.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI19.html"
		},
		{
			"prop": "1.20",
			"dependencies": ["1.3", "1.5", "1.19"],
			"text": "In any triangle the sum of any two sides is greater than the remaining one.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI20.html"
		},
		{
			"prop": "1.21",
			"dependencies": ["1.16", "1.20"],
			"text": "If from the ends of one of the sides of a triangle two straight lines are constructed meeting within the triangle, then the sum of the straight lines so constructed is less than the sum of the remaining two sides of the triangle, but the constructed straight lines contain a greater angle than the angle contained by the remaining two sides.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI21.html"
		},
		{
			"prop": "1.22",
			"dependencies": ["1.3", "1.20"],
			"text": "To construct a triangle out of three straight lines which equal three given straight lines: thus it is necessary that the sum of any two of the straight lines should be greater than the remaining one.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI22.html"
		},
		{
			"prop": "1.23",
			"dependencies": ["1.8", "1.22"],
			"text": "To construct a rectilinear angle equal to a given rectilinear angle on a given straight line and at a point on it.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI23.html"
		},
		{
			"prop": "1.24",
			"dependencies": ["1.3", "1.4", "1.5", "1.19", "1.23"],
			"text": "If two triangles have two sides equal to two sides respectively, but have one of the angles contained by the equal straight lines greater than the other, then they also have the base greater than the base.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI24.html"
		},
		{
			"prop": "1.25",
			"dependencies": ["1.4", "1.24"],
			"text": "If two triangles have two sides equal to two sides respectively, but have the base greater than the base, then they also have the one of the angles contained by the equal straight lines greater than the other.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI25.html"
		},
		{
			"prop": "1.26",
			"dependencies": ["1.3", "1.4", "1.16"],
			"text": "If two triangles have two angles equal to two angles respectively, and one side equal to one side, namely, either the side adjoining the equal angles, or that opposite one of the equal angles, then the remaining sides equal the remaining sides and the remaining angle equals the remaining angle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI26.html"
		},
		{
			"prop": "1.27",
			"dependencies": ["1.3", "1.4", "1.10", "1.15", "1.16"],
			"text": "If a straight line falling on two straight lines makes the alternate angles equal to one another, then the straight lines are parallel to one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI27.html"
		},
		{
			"prop": "1.28",
			"dependencies": ["1.13", "1.15", "1.27"],
			"text": "If a straight line falling on two straight lines makes the exterior angle equal to the interior and opposite angle on the same side, or the sum of the interior angles on the same side equal to two right angles, then the straight lines are parallel to one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI28.html"
		},
		{
			"prop": "1.29",
			"dependencies": ["1.13", "1.15", "1.27"],
			"text": "A straight line falling on parallel straight lines makes the alternate angles equal to one another, the exterior angle equal to the interior and opposite angle, and the sum of the interior angles on the same side equal to two right angles.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI29.html"
		},
		{
			"prop": "1.30",
			"dependencies": ["1.29"],
			"text": "Straight lines parallel to the same straight line are also parallel to one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI30.html"
		},
		{
			"prop": "1.31",
			"dependencies": ["1.23", "1.27"],
			"text": "To draw a straight line through a given point parallel to a given straight line.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI31.html"
		},
		{
			"prop": "1.32",
			"dependencies": ["1.13", "1.29", "1.31"],
			"text": "In any triangle, if one of the sides is produced, then the exterior angle equals the sum of the two interior and opposite angles, and the sum of the three interior angles of the triangle equals two right angles.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI32.html"
		},
		{
			"prop": "1.33",
			"dependencies": ["1.4", "1.27", "1.29"],
			"text": "Straight lines which join the ends of equal and parallel straight lines in the same directions are themselves equal and parallel.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI33.html"
		},
		{
			"prop": "1.34",
			"dependencies": ["1.4", "1.26", "1.29"],
			"text": "In parallelogrammic areas the opposite sides and angles equal one another, and the diameter bisects the areas.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI34.html"
		},
		{
			"prop": "1.35",
			"dependencies": ["1.4", "1.29", "1.34"],
			"text": "Parallelograms which are on the same base and in the same parallels equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI35.html"
		},
		{
			"prop": "1.36",
			"dependencies": ["1.33", "1.34", "1.35"],
			"text": "Parallelograms which are on equal bases and in the same parallels equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI36.html"
		},
		{
			"prop": "1.37",
			"dependencies": ["1.31", "1.34", "1.35"],
			"text": "Triangles which are on the same base and in the same parallels equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI37.html"
		},
		{
			"prop": "1.38",
			"dependencies": ["1.31", "1.34", "1.36"],
			"text": "Triangles which are on equal bases and in the same parallels equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI38.html"
		},
		{
			"prop": "1.39",
			"dependencies": ["1.31", "1.37"],
			"text": "Equal triangles which are on the same base and on the same side are also in the same parallels.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI39.html"
		},
		{
			"prop": "1.40",
			"dependencies": ["1.31", "1.38"],
			"text": "Equal triangles which are on equal bases and on the same side are also in the same parallels.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI40.html"
		},
		{
			"prop": "1.41",
			"dependencies": ["1.34", "1.37"],
			"text": "If a parallelogram has the same base with a triangle and is in the same parallels, then the parallelogram is double the triangle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI41.html"
		},
		{
			"prop": "1.42",
			"dependencies": ["1.10", "1.23", "1.31", "1.38", "1.41"],
			"text": "To construct a parallelogram equal to a given triangle in a given rectilinear angle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI42.html"
		},
		{
			"prop": "1.43",
			"dependencies": ["1.4", "1.26", "1.29", "1.34"],
			"text": "In any parallelogram the complements of the parallelograms about the diameter equal one another.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI43.html"
		},
		{
			"prop": "1.44",
			"dependencies": ["1.15", "1.29", "1.31", "1.42", "1.43"],
			"text": "To a given straight line in a given rectilinear angle, to apply a parallelogram equal to a given triangle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI44.html"
		},
		{
			"prop": "1.45",
			"dependencies": ["1.14", "1.29", "1.30", "1.33", "1.34", "1.42", "1.44"],
			"text": "To construct a parallelogram equal to a given rectilinear figure in a given rectilinear angle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI45.html"
		},
		{
			"prop": "1.46",
			"dependencies": ["1.3", "1.11", "1.29", "1.31", "1.34"],
			"text": "To describe a square on a given straight line.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI46.html"
		},
		{
			"prop": "1.47",
			"dependencies": ["1.4", "1.14", "1.31", "1.41", "1.46"],
			"text": "In right-angled triangles the square on the side opposite the right angle equals the sum of the squares on the sides containing the right angle.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI47.html"
		},
		{
			"prop": "1.48",
			"dependencies": ["1.3", "1.8", "1.11", "1.47"],
			"text": "If in a triangle the square on one of the sides equals the sum of the squares on the remaining two sides of the triangle, then the angle contained by the remaining two sides of the triangle is right.",
			"url": "http://aleph0.clarku.edu/~djoyce/elements/bookI/propI48.html"
		}
	]
}

index.html

<!DOCTYPE html>
<style>

#caption {
  width: 500px;
  height: 6em;
  margin-left: 1em;
}

#propositon-name {
  font: bold 16px sans-serif;
  margin-bottom: 0em;
}

#propositon-text {
  font: 12px sans-serif;
  margin-top: 0.5em;
}

.link {
  stroke: #666;
  stroke-width: 1.5px;
}

.node {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

.arrow {
  fill: darkred;
}

.label {
  font: 10px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.selected {
  fill: steelblue;
  stroke: black;
}

.active {
  fill: firebrick;
  stroke: black;
}

.inactive {
  opacity: 0.2;
}

</style>
<body>
<div id="caption">
  <p id="propositon-name"></p>
  <p id="propositon-text"></p>
</div>
<div id="svg"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var margin = {top: 30, right: 0, bottom: 0, left: 30},
    outerWidth = 960,
    outerHeight = 700,
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom;      

var svg = d3.select("#svg").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("euclid_bookI.json", function(error, data) {
  if (error) throw error;

  var nodes = {},
      links = [];

  // given nodes as data
  data.BookI.forEach((prop) => {
    nodes[prop.prop] = prop;
  });

  // create links from the nodes
  data.BookI.forEach((prop) => {
    prop.dependencies.forEach((dependency) => {
      links.push({ source: nodes[dependency], target: prop });
    });
  });

  var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(100)
      .charge(-620)
      .on("tick", tick)
      .start();

  force.drag()
      .on("dragstart", dragstart);

  // define links between nodes
  var link = svg.append("g").selectAll(".path")
      .data(force.links())
    .enter().append("line")
      .attr("class", d => "link link" + d.source.prop.split(".")[1])
      .attr("marker-end", "url(#end)");

  // define nodes
  var node = svg.append("g").selectAll("circle")
      .data(force.nodes())
    .enter().append("circle")
      .attr("class", d => "node node" + d.prop.split(".")[1])
      .attr("r", 6)
      .call(force.drag)
      .on("dblclick", dblclick)
      .on("click", function(d) {
        clearSelection();

        d3.select("#propositon-name").html("<a href='" + d.url + "'> Proposition " + d.prop.split(".")[1] + " -></a>")
        d3.select("#propositon-text").text(d.text);

        d3.select(this).classed("selected", true);
        d3.selectAll(".node").each(function(p) {
          if (p.dependencies.includes(d.prop)) {
            d3.select(this).classed("active", true);
          } else if (d.prop != p.prop) {
            d3.select(this).classed("inactive", true);
            d3.select(".label" + p.prop.split(".")[1]).classed("inactive", true);
          }
        });

        d3.selectAll(".link").each(function(l) {
          if (d.prop == l.source.prop) {
            d3.select(this).classed("active", true);
          } else {
            d3.select(this).classed("inactive", true);
          }
        });
      });

  // add arrows to links
  svg.append("defs").selectAll("marker")
      .data(["end"])
    .enter().append("marker")
      .attr("class", "arrow")
      .attr("id", d => d)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 20)
      .attr("refY", -0.5)
      .attr("markerWidth", 5)
      .attr("markerHeight", 5)
      .attr("orient", "auto")
    .append("path")
      .attr("d", "M0,-5L10,0L0,5");

  // add labels to nodes
  var label = svg.append("g").selectAll("text")
      .data(force.nodes())
    .enter().append("text")
      .attr("class", d => "label label" + d.prop.split(".")[1])
      .attr("x", 8)
      .attr("y", ".31em")
      .text(d => d.prop);

  function 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", transform);
    label.attr("transform", transform);
  }

  function transform(d) {
    return "translate(" + d.x + "," + d.y + ")";
  }
});

function defaultText() {
  d3.select("#propositon-name")
      .html("Euclid's <i>Elements</i> Book I");
  d3.select("#propositon-text")
      .html("Click on a node to read the statement of the corresponding proposition from Book I of Euclid's <i>Elements</i>. Colored red are the propositions from the first book whose proofs depend on the selected proposition. Follow the link to read a proof of the proposition at Clark University's online edition of the <i>Elements</i>. Double click the node to clear the selection.");
}

defaultText();

function clearSelection() {
  d3.select(".selected").classed("selected", null);
  d3.selectAll(".active").classed("active", null);
  d3.selectAll(".inactive").classed("inactive", null);
}

function dblclick(d) {
  defaultText();
  clearSelection();
  d3.select(this).classed("fixed", d.fixed = false);
}

function dragstart(d) {
  d3.select(this).classed("fixed", d.fixed = true);
}

</script>
</body>
</html>

preview.png

thumbnail.png