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).