JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<h2>Hata's Tree-Like Set</h2>
<div ng-app ng-init="N=3;" ng-controller="Controller">
<input type="range" min="1" max="10" step="1" ng-model="N">  
<div class="tree"></div>
</div>

CSS

body {font-family: Helvetica;}

JavaScript

function Controller($scope){

    $scope.$watch("N", function(){    
    
var len = 500;

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

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);
    
    });}