For the demonstrative purposes of explaining my polar style-difficulty chart of music, I decided I wanted to show off what the chart looks like.

It’s missing the hundreds of entries, slices, and other infographics that my notebook catalogue has, but it’s a compelling display nonetheless, I hope.

Gathering Data Points #

Firstly, I needed to gather the data points to display. As I already had the points drawn on paper, I just needed to digitalise each point’s position. To this end, I opened up GeoGebra in my browser, and started adding points.

Each point can have a name, and so I set each point’s name to be Artist - Album. After placing down enough points to satisfy me, it was time to get a usable, serialised output.

Luckily, GeoGebra has exposed a JavaScript API that you can access through the console. ggbApplet.getAllObjectNames() will return a list of all the names of objects, and ggbApplet.get{X,Y}coord(name) will get you the respective coordinate. A few maps later, and I had all the points in my clipboard as a JSON list.

As you might know (or have guessed), I generate this blog using Jekyll, which belongs to the Ruby/YAML era of web development A nice alternative to Node and PHP, in my humble opinion: there’s definitely something more magical about it.

Secondly, Jekyll supports data files (in a variety of formats), inside the /_data folder. These files are then read and available to use inside the site.data variable.

It’s important to note that the coordinates are given in their Cartesian forms, not polar forms. Although the conversion between the two is trivial, this is what GeoGebra defaulted to, and it makes handling them a bit easier later on.

Displaying The Points in HTML #

In Liquid template code, before generating any HTML, I normalise each point’s coordinates to be within between 0 and 1, with an added 20% padding from the edge. For reference, they’re mostly between -1 and 1; so it’s a scale + translation operation.

Then, I iterate through all the data points, and place a display: contents container for each point. In it, are the hidden popup, helper radius, and dot. The latter two are placed absolutely (in a relative container) using left: calc(100% * {normalised_x}).

The container uses the display: contents trick to not create a new box around its children, but still wrap them so as to give a :hover selector on a unique common ancestor. It’s how I highlight footnotes on both their reference and footnote simultaneously. Try me!

The circle element is a bit different: its radius I need to calculate $\left(\sqrt{x^2 + y^2}\right)$, which I do in Liquid. I needed to write a Ruby plugin to implement the sqrt filter, though:

module Sqrt
  def sqrt(num)
    Math.sqrt(num)
  end
end

Liquid::Template.register_filter(Sqrt)

The circle needs to have its center at $(50\%, 50\%)$ of the container. We know it has radius $r$, and we’re moving it by the top-left corner. That means we need to place it halfway, and subtract the radius; for both coordinates.

There seems to be a bit of rounding error when setting the circle radius, and it doesn’t always line up with the dot it’s supposed to pass through: but it works overwhelmingly well.

Since you can see the CSS yourself, it’s best you inspect it yourself too; my words can only substitute the experience up to a point — and I’ve given you the missing Liquid glue code you don’t see.

Calculating Trigonometric Functions in CSS #

Although it wasn’t necessary here, and it should be avoided if possible, you can calculate trig function values in pure CSS using Taylor/McLaurin series representations of the respective functions (which is how computers calculate the values of these functions, too), you can write the terms using CSS variables:

.sin {
  --sin-term1: var(--angle);
  --sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
  --sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
  --sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
  --sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
  --sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));
}

Not very pretty, or fast; but it does the job. I’ve lifted this code from this gist, where you can find out the spelled out CSS for sine, cosine, and tangent.