A Monologue with the Æther

Dealing with Scale on the Web

I recently added elevation profiles to the weblogue posts on my
cross-continental bicycle ride. They are rudimentary still but quite
serviceable. There is, however, a notable issue regarding screen resolution.
Rather than providing a fixed width and height to the SVG files, I take
advantage of the scalable bit in Scalable Vector Graphic by setting the viewBox
attribute on the svg element, except these profiles are line/area graphs with
axes for distance (independent variable) and elevation (dependent variable).

I generate the SVG files running the d3.js Javascript library via
node to create static (so to speak) rather than dynamic images. It works
well except for the issue when shrinking the image say by opening the page on
a mobile screen the axes and the labelling squishes and the left axis has its
labels pushed off-screen if the elevation is more than 2 digits. I can fix the
issue by drawing the graph into a smaller region for instance a region whose
bounds are mobile device sized, but that leads to equal ugliness when scaling
the image up. Everything becomes too exaggerated.

Possible solutions: use d3.js to dynamically generate a graph sized to fit the
screen it’s displaying on; don’t display the graph on small screens unless the
viewer explicitly selects to view the image by clicking a link; other ideas
which violate the purpose of using scalable vector graphics.

I don’t like either idea. The first suffers from needing to run Javascript and
process datasets which add up to large sizes quickly. The second is preferable
and would still require generating the image dynamically to fit the screen, but
would defer the performance penalty to explicit viewer action. Each discrete
elevation profile is not particularly problematic; the problem manifests most
unhappily when attempting to draw the profile for entire 3800 mile trek. One of
my goals is to not sacrifice content to reliance on Javascript. Meaning even if
one loses functional niceties provided by Javascript, one shouldn’t be required
to use Javascript to see all the content or use the site.

I suppose that I could resort to using a PNG fall-back graphic in the absence
of a more dynamic approach (scaling SVG or Javascript).