Easy SVG sparklines

Maybe it's just because I have so much experience with design and visual art, but I think SVG is one of the most, if not the most underutilized web format. It's great for the self-contained static vector graphics that it's most commonly used for, but it can do so much more. SMIL animations can be a little clunky, but having an alternative to gif and video that doesn't require JS is pretty rad-- especially for throbbers and things like that. That you can work with SVGs so easily using JS and CSS is awesome. You can even build your own filter stacks using its built-in effects... though last time I did that with a detailed full-screen art piece, performance was rough.

Simple, data-driven graphics like this is one area where SVG really shines, I think. No need to load a JavaScript charting library if you just want some simple line charts like this. I create SVG images fairly often, and maybe half the time I find myself hand-coding them, or at least hand-tweaking them, since I enjoy the magic of seeing code turn into something visual.

The &quot;unfinished&quot; tiny line graph with no fill is actually closer to what Tufte meant by sparklines. He meant those to be placed in text, word-sized, along with words to help communicate better.<p><a href="https:&#x2F;&#x2F;www.edwardtufte.com&#x2F;bboard&#x2F;q-and-a-fetch-msg?msg_id=000AIr" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.edwardtufte.com&#x2F;bboard&#x2F;q-and-a-fetch-msg?msg_id=...</a><p>I feel like many people use &quot;sparkline&quot; to mean &quot;pretty graph.&quot; Those, frankly, lack the punch of a sparkline.

I like it! But instead of modifying your data to suit SVG&#x27;s default coordinate system, I suggest using a top-level &quot;g&quot; tag with a &quot;transform&#x2F;scale&quot; attribute. Like this:<p><pre><code> &lt;svg class=&quot;natural-units&quot; width=&quot;200px&quot; height=&quot;200px&quot; viewBox=&quot;-1 -1 2 2&quot; &gt; &lt;desc&gt;A static svg unit circle&lt;&#x2F;desc&gt; &lt;g transform=&quot;scale(1,-1)&quot;&gt; &lt;circle class=&#x27;unit-circle&#x27; r=&quot;1&quot; fill=&quot;none&quot; stroke-width=&quot;.001 &quot;&#x2F;&gt; &lt;&#x2F;g&gt;</code></pre> &lt;&#x2F;svg&gt;<p>Example adapted from: <a href="https:&#x2F;&#x2F;simpatico.io&#x2F;svg.md#naturalunits" rel="nofollow noreferrer">https:&#x2F;&#x2F;simpatico.io&#x2F;svg.md#naturalunits</a><p>In this way you can use the intuition about the coordinate system that you built in school.

This is cool!<p>For those who don&#x27;t know, there&#x27;s a font called Sparks that uses glyphs to create sparklines: <a href="https:&#x2F;&#x2F;github.com&#x2F;aftertheflood&#x2F;sparks">https:&#x2F;&#x2F;github.com&#x2F;aftertheflood&#x2F;sparks</a>

I&#x27;ve recently used this approach for generating Open Graph images for display when a link to the site is used on Twitter, WhatsApp, Facebook, etc [1]. I was pleasantly surprised at how quickly something could be implemented. The last time I&#x27;d done something similar was using Cairo and needing to write more of the scaling dynamics. I don&#x27;t think I ever got it to adjust to dynamic content very well. This time I put together a prototype in Inkscape, converted it to a template and render it to PNG with Sharp [2].<p>[1]: <a href="https:&#x2F;&#x2F;hntrends.net&#x2F;api&#x2F;og?word=twitter" rel="nofollow noreferrer">https:&#x2F;&#x2F;hntrends.net&#x2F;api&#x2F;og?word=twitter</a> [2]: <a href="https:&#x2F;&#x2F;github.com&#x2F;lovell&#x2F;sharp">https:&#x2F;&#x2F;github.com&#x2F;lovell&#x2F;sharp</a>

But SVG is slower than Canvas. The main use case for sparklines is embedding them into cells, many hundreds or even thousands of them [1]. With hundreds of SVG files page becomes becomes visibly slower (first paint, scroll, interactions). I suggest to invest some time and check canvas solution too.<p>[1]: <a href="https:&#x2F;&#x2F;www.google.com&#x2F;search?q=sparkline&amp;tbm=isch" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.google.com&#x2F;search?q=sparkline&amp;tbm=isch</a>

I ended up hand crafting my svg graphs for non.io for many of the same reasons. I originally was looking around at 3rd party libraries, but one of my goals with the site was to use as few external libraries as possible. I made an attempt at dynamically generating the svg points myself, and found it incredibly easy.<p>For context, here&#x27;s the 22 lines of code it took to create a simple svg graph: <a href="https:&#x2F;&#x2F;github.com&#x2F;jjcm&#x2F;soci-frontend&#x2F;blob&#x2F;master&#x2F;components&#x2F;soci-ledger.js#L228">https:&#x2F;&#x2F;github.com&#x2F;jjcm&#x2F;soci-frontend&#x2F;blob&#x2F;master&#x2F;components...</a><p>And here&#x27;s the final output: <a href="https:&#x2F;&#x2F;non.io&#x2F;Animation-example" rel="nofollow noreferrer">https:&#x2F;&#x2F;non.io&#x2F;Animation-example</a>

I thought it&#x27;d be fun to play with sparklines on Val Town, which is a server-side platform for running JavaScript.<p>First I did the opposite of this post and used all the libraries (react, htm, and react-sparkline): <a href="https:&#x2F;&#x2F;www.val.town&#x2F;v&#x2F;stevekrouse.sparklineEx" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.val.town&#x2F;v&#x2F;stevekrouse.sparklineEx</a><p>Then I found a comment below that does it in vanilla js, so I ported that over to Val Town as well: <a href="https:&#x2F;&#x2F;www.val.town&#x2F;v&#x2F;stevekrouse.sparklineEx2" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.val.town&#x2F;v&#x2F;stevekrouse.sparklineEx2</a>

SVG feels like the neglected stepchild of the web universe for reasons that are not entirely clear.<p>While its obviously not the solution to any and all visualizations in the browser its a remarkable addition to html and the dom. It should not really be considered a foreign format but the natural native one.<p>SVG can go a long way on its own or together with server side templates (as this post nicely demonstrates) but imho its pairing with js libraries such as d3 or vega is (still) out of this world in terms of the user experience they create.

Javascript version here: <a href="https:&#x2F;&#x2F;jsfiddle.net&#x2F;buk3dsqv&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;jsfiddle.net&#x2F;buk3dsqv&#x2F;</a>

Cool explanation! I use quite a lot of SVG visualisations generated server-side. Some basic charts (including sparkline) are bundled up into ContEx (an elixir library) - see <a href="https:&#x2F;&#x2F;contex-charts.org&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;contex-charts.org&#x2F;</a> (disclosure - author).

I&#x27;ve used a similar technique to implement one of the graphs for small &quot;header dashboard&quot; for a trading tool at my previous job. It was replacing an old decrepit tool and I wanted to add some pizzaz to the tool, and had an obsession with SVG and micro interactions at the time, so I&#x27;ve basically implemented most of the little graphics using hand-emitted SVG that was manipulatied through React. The updates happened in one batch too, so the performance was always great

This is fantastic. I&#x27;m already using string interpolation &amp; builders for my HTML&#x2F;JS&#x2F;CSS source, so why not the same for SVG?<p>I didn&#x27;t realize the syntax was so straightforward. It looks like you could even build the final SVG with some clever SQL queries if all you need to do is produce a time series visual (i.e. string aggregation over Path).

I&#x27;m going to be the Smug Lisp Weenie here (I wonder who gets the reference), and comment on this:<p>&gt; One of my favourite things about creating sparklines like this is that I can create the SVGs entirely on the backend. I don’t need to worry about using a JavaScript charting library, or sending the “points” data to the frontend. The browser requests an SVG. The server returns it. Simple!<p>Me, I don&#x27;t care where I create the SVGs. Most of my Clojure code is shared between backend and frontend (compiled and running on the JVM in the backend and compiled to JavaScript in the frontend). So I can generate SVGs wherever, it doesn&#x27;t matter, the code is only written once. Or rather, it might matter, because my website uses server-side rendering, so the same thing must be generated on both sides.<p>I&#x27;ll see myself out now.

I&#x27;ve always thought it would be neat to use sparklines to display trends in comment scores. You could see if a comment was monotonically being voted up or down or if it&#x27;s considered controversial, and if so, to what extent. It would help distinguish between bandwagon&#x2F;brigading activity and genuine organic rejection or appeal.<p>And it&#x27;s often interesting to see trends or cycles emerge as people in different geographical regions wake up and log on. Some comments play much better in the US than in Asia or the EU and vice versa, and sparklines would be a good way to observe that.

Cool idea! ChatGPT-4 was able to generate something for me pretty quick <a href="https:&#x2F;&#x2F;chat.openai.com&#x2F;share&#x2F;d0e8102c-9ea5-4709-8898-b278caa14ee0" rel="nofollow noreferrer">https:&#x2F;&#x2F;chat.openai.com&#x2F;share&#x2F;d0e8102c-9ea5-4709-8898-b278ca...</a> that looks pretty similar <a href="https:&#x2F;&#x2F;jsfiddle.net&#x2F;13awmx8y&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;jsfiddle.net&#x2F;13awmx8y&#x2F;</a>

love it and tried it on node-red to add a simmple sparkline to my dashboard

Ah! So all that complicated looking syntax is just a turtle with a pen.

this works well when you have a few sparklines with a dozen datapoints each, but less well when you have many sparklines with hundreds of datapoints.

pretty good. can user interactive charts be prepared in this way?