JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<h2>Hata's Tree-Like Set</h2>
<div class="tree"></div>
<p>Similar to Jason Davies' <a href="http://www.jasondavies.com/maps/simplify/koch/" target="_blank" >Koch Island</a>.</p>
<p>Example 1.2.9 in Jun Kigami's <a href="http://www-an.acs.i.kyoto-u.ac.jp/~kigami/AOF.pdf" target="_blank"><em>Analysis on Fractals</em></a></p>

CSS

body {font-family: Helvetica;}

JavaScript

var len = 500;

var tiling = d3.select(".tree").append("svg")
    .attr("width", len)
    .attr("height", len/2);

var lineFunction = d3.svg.line()
    .x(function (d) {
    return d.x;
})
    .y(function (d) {
    return -1*d.y+150;
})
    .interpolate("linear");

function L(z){
    return {'x': 0.5*z.x + Math.sqrt(3)/6*z.y, 'y': Math.sqrt(3)/6*z.x - 0.5*z.y};   
}

function R(z){
     return {'x': 2/3*z.x + 0*z.y + len*(1 - 2/3), 'y': 0*z.x - 2/3*z.y - 0 };   
}

function add(x){
    tiling.append("path")
    .attr("d", lineFunction(x))
    .attr("stroke-width", 1)
    .attr("stroke", "black")
    .attr("fill", "none");    
}

function grow(x){
    add( [L(x[0]), L(x[1]) ] );
    add( [R(x[0]), R(x[1]) ] );    
    return { "L": [L(x[0]), L(x[1]) ]  , "R": [R(x[0]), R(x[1]) ]   }
}    

var tree = [{'x': 0, 'y':0 },{'x': len, 'y':0 }];

for(var k = 0; k < 11; k++){
y = [];
for(var i = 0; i < tree.length; i++){
     y.push(L(tree[i]));   
}
y.push(tree[0]);
for(var i = 0; i < tree.length; i++){
     y.push(R(tree[i]));   
}
tree.push(tree[0]);

tree = tree.concat(y);
}
add(tree);