D3 Examples - Robert Hooke's letter

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-shape.v1.min.js"></script>
    <script src="wilkinssymbol.js"></script>
      <script src="wilkinspronounce.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
​
    
.node text { font: 12px 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: #111;
  stroke-width: 1px;
  opacity:.2;
}
    .animatedsymb {
  stroke:black;
  stroke-linecap:round;
  stroke-width: 6px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 10s linear forwards;
}
    
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
​
  </style>
</head>
​
<body>
  <h3><b> The Lord's Prayer </b></h3> 
<p>
</body>
  <script>
    
    
              
                var prayer = ['our', 'econ-1-2', 'who', 'is', 'in', 'world-2', 'your', 'transgen-1-4', 'may', 'eccles-5-1','your', 'civil-1-2', 'may', 'transact-6-1','your','power-1-4','transact-3-6','so','in','world-2-7','as','world-2', 'may','transact-4-4','to','us','in','this','measure-5-5','our','provis-1-2', 'transgen-5-7','and','may','judicial-2-9','to','us','our','transgen-3-2','as','we','are','judicial-2-9','to','them','who','have','transgen-3-2','against','us','and','not','transact-6-5','us','into','transgen-2-5','but','spiritact-1-5', 'us','from','transgen-3-2','for','the','civil-1-2', 'and','the','habit-2-5','and','the','habit-2-2','is','your','space-1-9'];
​
​
   
// set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
  width = 960 - margin.left - margin.right,
  height = 960 - margin.top - margin.bottom;
​
​
  // append the svg object to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  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(" + (width / 2 + 80) + "," + (height / 2 + 20)+")");
    
    
                var symb = svg.selectAll('.symb')
                  .data(prayer)
                  .enter().append('path')
                  .attr('transform', function(d, i) {
                    return 'translate(' + (60 + (i % 10 * 80)) + ',' + 80 * Math.ceil((i + 1) / 10) + ')';
                  })
                  .attr('d', function(d) {
                    return WilkinsSymbol(d, 1000);
                  })
                  .attr('fill', 'transparent')
                  .attr('class', 'animatedsymb');
​
  
  </script>
    