Built with blockbuilder.org
Last active
February 8, 2018 04:02
-
-
Save stevenwmarks/e920c8654846631311333567406bc4be to your computer and use it in GitHub Desktop.
Family dendrogram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| scrolling: yes | |
| height: 540 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name | parent | birth | |
|---|---|---|---|
| Pauline Peter Steven Marks | null | ||
| Jack Charles Marks | Pauline Peter Steven Marks | 1915 | |
| Mavis Lillian Arnold | Pauline Peter Steven Marks | ||
| William Charles Marks | Jack Charles Marks | 1878 | |
| Jessie Rowlinson | Jack Charles Marks | ||
| Walter Arnold | Mavis Lillian Arnold | ||
| Lillian Mary Fulcher | Mavis Lillian Arnold | ||
| Henry Charles Marks | William Charles Marks | 1847 | |
| Elizabeth Ann Saveall | William Charles Marks | ||
| William Rowlinson | Jessie Rowlinson | ||
| Ellen Cornell | Jessie Rowlinson | ||
| William Henry Arnold | Walter Arnold | ||
| Eliza Sooby | Walter Arnold | ||
| Frank Fulcher | Lillian Mary Fulcher | ||
| Ada Louisa Walker | Lillian Mary Fulcher | ||
| Benjamin Marks | Henry Charles Marks | 1819 | |
| Elizabeth Watts | Henry Charles Marks | ||
| William Saveall | Elizabeth Ann Saveall | ||
| Richard Rowlingson | William Rowlinson | ||
| Elizabeth Cornwell | William Rowlinson | ||
| Samuel Cornell 1826 | Ellen Cornell | ||
| Elizabeth Coe | Ellen Cornell | ||
| Mary Thomas | William Henry Arnold | ||
| Edward Arnold | William Henry Arnold | ||
| John Sooby | Eliza Sooby | ||
| Caroline Elizabeth Newton | Eliza Sooby | ||
| Henry Fulcher | Frank Fulcher | ||
| Charlotte Childs | Frank Fulcher | ||
| Joseph Ebenezer Walker | Ada Louisa Walker | ||
| Mary Daycock | Ada Louisa Walker | ||
| Edward Marks 1781 | Benjamin Marks | 1781 | |
| Rachel (?) | Benjamin Marks | ||
| Richard Rollingson | Richard Rowlingson | ||
| Martha Browne | Richard Rowlingson | ||
| Samuel Cornell 1800 | Samuel Cornell 1826 | ||
| Ann Hammond | Samuel Cornell 1826 | ||
| John Arnold | Edward Arnold | ||
| Ann Allard | Edward Arnold | ||
| James Fulcher | Henry Fulcher | ||
| Mary Little | Henry Fulcher | ||
| John Walker | Joseph Ebenezer Walker | ||
| Eliza Taylor | Joseph Ebenezer Walker | ||
| Edward Marks 1742 | Edward Marks 1781 | 1742 | |
| Joan Parish | Edward Marks 1781 | ||
| Richard Rollinson | Richard Rollingson | ||
| Hannah Smith | Richard Rollingson | ||
| Daniel Cornell | Samuel Cornell 1800 | ||
| Mary Mansfield | Samuel Cornell 1800 | ||
| Thomas Marks | Edward Marks 1742 | 1702 | |
| Joane Higgins | Edward Marks 1742 | ||
| Samuel Cornell 1740 | Daniel Cornell | ||
| Mary Filney | Daniel Cornell | ||
| Edward Marks 1673 | Thomas Marks | 1673 | |
| Jane Brain | Thomas Marks | ||
| John Cornell | Samuel Cornell 1740 | ||
| Ann Gowers | Samuel Cornell 1740 | ||
| John Markes | Edward Marks 1673 | 1647 | |
| Lucretia Mitchell | Edward Marks 1673 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Family lines dendrogram</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .node circle { | |
| fill: #fff; | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| .node text { font: 9px sans-serif; } | |
| .node--internal text { | |
| text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // width, height, margins and padding | |
| var margin = {top: 10, right: 80, bottom: 10, left: 140}, | |
| padding = {top: 10, right: 10, bottom: 10, left: 10}, | |
| width = 960 - margin.left - margin.right, | |
| height = 540 - margin.top - margin.bottom; | |
| // declare tree layout and size | |
| var famLine = d3.tree() | |
| .size([height, width]); | |
| // load data | |
| d3.csv("famLines.csv", function(error, flatData) { | |
| if (error) throw error; | |
| // assign null | |
| flatData.forEach(function(d) { | |
| if (d.parent == "null") { d.parent = null}; | |
| }); | |
| // assign different color to nodes at different depths | |
| var depthScale = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| // convert flat data into a hierarchy | |
| var famData = d3.stratify() | |
| .id(function(d) { return d.name; }) | |
| .parentId(function(d) { return d.parent; }) | |
| (flatData); | |
| // assign name to each node | |
| famData.each(function(d) { | |
| d.name = d.id; | |
| }); | |
| // assign data to hierarchy using parent-child relationships | |
| var nodes = d3.hierarchy(famData, function(d) { | |
| return d.children; | |
| }); | |
| // map data to famLine | |
| nodes = famLine(nodes); | |
| // append svg to body | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom), | |
| g = svg.append("g") | |
| .attr("transform", "translate (" + margin.left + "," + margin.top + ")"); | |
| // add links between nodes | |
| var link = g.selectAll(".link") | |
| .data(nodes.descendants().slice(1)) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| return "M" + d.y + "," + d.x | |
| + "C" + (d.y + d.parent.y) / 2 + "," + d.x | |
| + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x | |
| + " " + d.parent.y + "," + d.parent.x; | |
| }); | |
| // add each node as a group | |
| var node = g.selectAll(".node") | |
| .data(nodes.descendants()) | |
| .enter().append("g") | |
| .attr("class", function(d) { | |
| return "node" + | |
| (d.children ? " node--internal" : " node--leaf");}) | |
| .attr("transform", function(d) { | |
| return "translate(" + d.y + "," + d.x + ")";}); | |
| // add circle to node | |
| node.append("circle") | |
| .attr("r", 7) | |
| .style("fill", function(d) { return depthScale(d.depth); }); | |
| // add text to node | |
| node.append("text") | |
| .attr("dy", ".35em") | |
| .attr("x", function(d) { return d.children ? -13 : 13; }) | |
| .style("text-anchor", function(d) { | |
| return d.children ? "end" : "start";}) | |
| .text(function(d) { return d.data.name; }); | |
| }); // end load data | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment