hilbert grid layout [UNLISTED]

Working towards a Hilbert Curve based grid layout. The idea would be to quickly layout a 1-dimensional array of data in a compact 2D area.

It has the added benefit that the sorting of the 1D array impacts the 2D distance, namely that items close together in 1D will be close together in 2D

LSystem code lifted from this block by nitaku who has many fascinating d3 experiments

Built with blockbuilder.org

forked from enjalot's block: hilbert grid

forked from enjalot's block: hilbert grid layout

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="lsystem.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    
    .curve {
      fill: none;
      stroke: #b5b5b5;
    }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    /*
    
    TODO / the main problem with this code is that all cells are 1x1 rect, not paths on the hilbert curve; so we cannot represent a State with its number of representatives.
    
    */
    
// data copied from the snake viz at https://projects.fivethirtyeight.com/2016-election-forecast/
d3.json('snake.json', (_, snake)=>{ 
  
    
    var height = 400;
    var n=8;

console.log("snake", snake[0])
  
  
  var exampleData = d3.range(n*n).map(function(d) { return Math.random() });
    
  exampleData = snake
  .map(d => {return { name: d.state.state, evs: d.evs, margin: d.state.margin.polls.margin }; })
  .sort((a,b) => d3.ascending(a.margin, b.margin))

var sumevs = exampleData.map(d => d.evs).reduce((a,b) => a+b,0);
  
    var layout = new hilbert()
      .sideLength(Math.floor(height/Math.sqrt(sumevs)))
    
    //console.log("NODES", layout.nodes(exampleData))

}
    
})

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js