Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

thing 0002

thing 0002

playing with spirals and the basics of trigonometry.

square roots make all the difference.

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;position:fixed;top:0;right:0;bottom:0;left:0; 
    background: #111;
    }
  </style>
</head>

<body>
  <script>
    var width = 960;
    var height = 500;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

var num = 200;
    var maxlen = 50;
    
    var cellSize = 15;
    var angleVelocity = 206.432
    var radiusVelocity = 7.4597881856
    
    //https://coolors.co/359aa8-fad8d6-6b62c4-cc5151-e5c03b
    var colors = [
      "#359AA8",
      "#FAD8D6",
      "#6B62C4",
      "#CC5151",
      "#E5C03B",
    ]
    
    var i = 0;
    var sequences = d3.range(num).map(function(j) {
      var len = maxlen
      var len = 5 + Math.ceil(Math.random() * maxlen)
      
      var color = colors[Math.floor(Math.random()*colors.length)]
      //var color = colors[j % colors.length]
      return d3.range(len).map(function(k) {
        i++;
        return {
          i: i, j: j, k: k,
          color: color//"#60ffe4"
        }
      })
    })
    
    
    var rects = []
    sequences.forEach(function(sequence) {
      sequence.forEach(function(cell) {
        var ai = Math.sqrt(64+cell.i)
        var theta = ai * angleVelocity * Math.PI/180
        var radius = ai * radiusVelocity
        cell.x = width/2 + radius * Math.cos(theta)
        cell.y = height/2 + radius * Math.sin(theta)
        cell.theta = theta
        rects.push(cell)
      })
    })
    console.log("sequences", sequences)
    
    var gs = svg.selectAll("g.cell").data(rects)
    gs.exit().remove()
    var gsE = gs.enter()
    	.append("g").classed("cell", true)
    gsE.append("rect")
    gs = gsE.merge(gs)
    
    gs.select("rect")
      .attr("x", function(d) {
      	return d.x
    	})
      .attr("y", function(d) {
      	return d.y
    	})
      .attr("width", function(d) {
        return cellSize
      })
      .attr("height", function(d) {
        return cellSize
      })
      .style("fill", function(d) { return d.color })
//    .style("stroke", "#111")
//    .style("stroke-width", 1.5)
    .style("fill-opacity", 0.8)
    .attr("transform", function(d) {
      return "rotate(" + (d.theta/Math.PI*180) + "," + [d.x + cellSize/2, d.y + cellSize/2] + ")"
    })

</script>
</body>

https://d3js.org/d3.v4.min.js