block by nitaku 4afb54600dc9328d14bd

Gosper Displacement

Full Screen

A sequence displaced according to a Gosper space-filling curve. The layout tries to be as compact as possibile by folding the sequence onto itself. Neighbor items in the original sequence are respresented by adjacent cells, while the converse is not necesessarily true.

A similar experiment can be found in an article about compressing time series with Hilbert curves, by Jason Davies.

index.js

(function() {
  var height, scale, sequence, svg, translation, width;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  svg.attr({
    viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  sequence = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('').map(function(d) {
    return {
      label: d
    };
  });

  console.debug('Computing the Space-Filling Curve layout...');

  scale = 32;

  translation = sfc_layout.displace(sequence, sfc_layout.GOSPER, scale, scale, -Math.PI / 6);

  console.debug('Drawing...');

  svg.selectAll('.cell').data(sequence).enter().append('path').attr('class', 'cell').attr('d', jigsaw.hex_generate_svg_path(scale)).attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

  svg.selectAll('.label').data(sequence).enter().append('text').text(function(d) {
    return d.label;
  }).attr('class', 'label').attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  }).attr('dy', '.35em');

}).call(this);

index.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="description" content="Gosper Displacement" />
        <title>Gosper Displacement</title>
		<link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/zip.js"></script>
        <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/sfc_layout.js"></script>
        <script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/jigsaw.js"></script>
	</head>
	<body>
        <svg height="500" width="960"></svg>
        <script src="index.js"></script>
	</body>
</html>

index.coffee

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

# translate the viewBox to have (0,0) at the center of the vis
svg
  .attr
    viewBox: "#{-width/2} #{-height/2} #{width} #{height}"
    
sequence = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('').map (d) -> {label: d}


console.debug 'Computing the Space-Filling Curve layout...'
scale = 32
translation = sfc_layout.displace(sequence, sfc_layout.GOSPER, scale, scale, -Math.PI/6)


console.debug 'Drawing...'

svg.selectAll('.cell')
    .data(sequence)
  .enter().append('path')
    .attr('class', 'cell')
    .attr('d', jigsaw.hex_generate_svg_path(scale))
    .attr('transform', (d) -> "translate(#{d.x},#{d.y})")
    
svg.selectAll('.label')
    .data(sequence)
  .enter().append('text')
    .text((d) -> d.label)
    .attr('class', 'label')
    .attr('transform', (d) -> "translate(#{d.x},#{d.y})")
    .attr('dy', '.35em')

index.css

svg {
  background: white;
}

.cell {
  fill: #EEE;
  stroke: #BBB;
}
.label {
  fill: #333;
  font-family: sans-serif;
  text-anchor: middle;
  pointer-events: none;
}