A radial variation on the traditional rendering of the Cantor Set computed as an L-System and rendered using D3.
You can buy prints of this graphic.
Built with blockbuilder.org
forked from curran‘s block: Cantor Set
<!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="960"></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"),
width = svg.attr("width"),
height = svg.attr("height"),
x = d3.scaleBand()
.range([-Math.PI, Math.PI]),
y = d3.scaleBand()
.domain(d3.range(iterations))
.range([0, width/2]),
arc = d3.arc(),
arcs = data
.map(function(str, j){
x.domain(d3.range(str.length));
return str.split("")
.map(function (symbol, i){
return {
symbol: symbol,
innerRadius: y(j),
outerRadius: y(j) + y.bandwidth() + 1,
startAngle: x(i),
endAngle: x(i) + x.bandwidth()
};
})
.filter(function (d){
return d.symbol === "A";
});
})
.reduce(function (a, b){
return a.concat(b);
}, []);
svg.append("g")
.attr("transform", "translate(" + [width/2, 250] + ")")
.selectAll("path").data(arcs)
.enter().append("path")
.attr("d", arc)
.attr("fill", "black");
</script>
</body>