curran/.block

## .block
license: mit
border: no
height: 750

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>