| height: 960 |
Trying to fit every rational number in a single finite box. It works in theory! Lol. Right? Unless I'm mistaken? Ok, positive rationals. Just hold up a mirror if you want negatives too. Yes there are duplicates.
TODO: Tryyyyy to add some kind of lazyloading zoom a la Jason Davies's beautiful Ford circles.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| width: 960px; | |
| height: 960px; | |
| font-family: sans-serif; | |
| } | |
| div { | |
| position: absolute; | |
| } | |
| </style> | |
| <body></body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var data = d3.merge( | |
| d3.range(150).map( | |
| d => d3.range(150).map( | |
| dd => [d,dd] | |
| ) | |
| ) | |
| ) | |
| var body = d3.select("body"), | |
| width = body.node().offsetWidth, | |
| height = body.node().offsetHeight; | |
| var x = d => (Math.atan(d) / Math.PI) * width; | |
| body.selectAll("div") | |
| .data(data) | |
| .enter() | |
| .append("div") | |
| .style("left", d => x(d[0]) + 'px') | |
| .style("top", d => x(d[1]) + 'px') | |
| .style("font-size", d => 150/((d[0] + 1) * (d[1] + 1)) + 'px') | |
| .html(d => '<sup>' + (d[0] + 1) + '</sup>/<sub>' + (d[1] + 1) + '</sub>') | |
| </script> |
