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>