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.
| 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') | |
| svg { | |
| background: white; | |
| } | |
| .cell { | |
| fill: #EEE; | |
| stroke: #BBB; | |
| } | |
| .label { | |
| fill: #333; | |
| font-family: sans-serif; | |
| text-anchor: middle; | |
| pointer-events: none; | |
| } |
| <!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="http://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> |
| (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); |
