main page: unknownpleasures

Of course, the first thing I thought when I found this font for making graphs is “let's remake Joy Division's Unknown Pleasures album cover”

Let's do exactly that, shall we?

The album cover is pretty much a copy of a graph found in some paper concerning the first quasar ever discovered, PSR B1919+21, surely the data for it can be found somewhere on the Internet in a easily parseable format, isn't it?

Why yes someone made it in a SVG and 3D printed it and stuff

According to the font docs I just have to translate the data in the U+0100-017F range and that's it:

unknownpleasures.js

function n(val, smin, smax, dmin, dmax)
{
    return Math.floor((val - smin)/(smax - smin)*(dmax - dmin) + dmin);
}
 
fetch("https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv")
.then(r=>r.text())
.then(r=>{
    a = r.split("\n").map(v=>v.split(",").map(w=>parseFloat(w)));
    max = Math.max(...a.map(v=>Math.max(...v)));
    min = Math.min(...a.map(v=>Math.min(...v)));
    s = a.map(v=>v.map(w=>String.fromCodePoint(n(w, min, max, 0x100, 0x17f))).join("")).join("\\\\\n");
    console.log(s);
})

Now let's add some CSS:

unknownpleasures.css

.page
{
  font-family: "Linefont", system-ui;
  font-optical-sizing: auto;
  font-weight: 75;
  font-style: normal;
  font-variation-settings: "wdth" 25;
  font-size: 64px;
  line-height: 0.12;
}

And there you go, a text version of Unknown Pleasures, have fun