The Cantor Set computed as an L-System and rendered using D3.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style> body { margin: 0 } </style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var rules = {
A: "ABA",
B: "BBB"
},
initialState = "A",
iterations = 8,
L = function(str){
return str.split("").map(function (d){
return rules[d];
}).join("")
},
data = d3.range(iterations).map(function iterate(i){
return i ? L(iterate(i - 1)) : initialState;
});
console.log(JSON.stringify(data, null, 2));
// Prints the following:
// [
// "A",
// "ABA",
// "ABABBBABA",
// "ABABBBABABBBBBBBBBABABBBABA",
// "ABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABA",
// "ABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABABBBBBBBBBBBBBBBBBBBBBBBBBBBABABBBABABBBBBBBBBABABBBABA",
// ...
var svg = d3.select("svg"),
x = d3.scaleBand()
.range([0, svg.attr("width")]),
y = d3.scaleBand()
.domain(d3.range(iterations))
.rangeRound([0, svg.attr("height")]),
rects = data
.map(function(str, j){
x.domain(d3.range(str.length));
return str.split("")
.map(function (symbol, i){
return {
symbol: symbol,
x: x(i),
y: y(j),
width: x.bandwidth(),
height: y.bandwidth()
};
})
.filter(function (d){
return d.symbol === "A";
});
})
.reduce(function (a, b){
return a.concat(b);
}, []);
svg.selectAll("rect").data(rects)
.enter().append("rect")
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.attr("width", function(d){ return d.width; })
.attr("height", function(d){ return d.height; })
.attr("fill", "black");
</script>
</body>