53°F

Aaron Parecki

  • Articles
  • Notes
  • Photos
  • Day 7: Nicer sparklines for tag pages

    December 27, 2016

    A while ago, inspired by @adactio, I had added sparklines to my home page and tag pages. After having them for a while, I realized that my tag pages would look better as sparkline bar charts instead of as a plain line.

    The lines looked fine for tags that had a lot of data, but didn't look good when there were only a few data points.

    I made a few changes that affect the display of these.

    The main difference was switching to rendering the data as a bar chart. I also added zero-padding to the data when the amount of data in the chart is less than the number of segments I want to display. Without that, the bar segments would be potentially different widths for different tags. This also does a better job of representing the use of a new tag on my site like #hamradio.

    I also realized that the SVG wasn't scaling on narrow screens, it was just cropping from the right. To fix this, I added a couple attributes to the main SVG tag, width="100%" and preserveAspectRatio="none". This allows the SVG to shrink its width while still maintaining the desired height!

    Portland, Oregon
    Tue, Dec 27, 2016 2:37pm -08:00 #indieweb #100daysofindieweb
    5 mentions

    Other Mentions

    • Aaron Parecki aaronparecki.com
      Week in Review #100DaysOfIndieWeb
      Fri, Dec 30, 2016 2:18pm -08:00
    • Aaron Parecki aaronparecki.com
      Week in Review #100DaysOfIndieWeb
      Fri, Dec 30, 2016 2:18pm -08:00
    • Aaron Parecki aaronparecki.com
      Day 8: Pinned Posts #100DaysOfIndieWeb
      Wed, Dec 28, 2016 9:06am -08:00
    • Aaron Parecki aaronparecki.com
      Day 8: Pinned Posts #100DaysOfIndieWeb
      Wed, Dec 28, 2016 9:06am -08:00
    • 100 Days of IndieWeb aaronparecki.com/tag/100daysofindieweb
      Day 7: Nicer sparklines for tag pages: aaronparecki.com/2016/12/27/10/…
      Tue, Dec 27, 2016 10:37pm +00:00 (via brid-gy.appspot.com)
Posted in /articles using quill.p3k.io

Hi, I'm Aaron Parecki, Director of Identity Standards at Okta, and co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and participate in the OAuth Working Group at the IETF. I also help people learn about video production and livestreaming. (detailed bio)

I've been tracking my location since 2008 and I wrote 100 songs in 100 days. I've spoken at conferences around the world about owning your data, OAuth, quantified self, and explained why R is a vowel. Read more.

  • Director of Identity Standards at Okta
  • IndieWebCamp Founder
  • OAuth WG Editor
  • OpenID Board Member

  • 🎥 YouTube Tutorials and Reviews
  • 🏠 We're building a triplex!
  • ⭐️ Life Stack
  • ⚙️ Home Automation
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Trips
  • Videos
  • Contact
© 1999-2025 by Aaron Parecki. Powered by p3k. This site supports Webmention.
Except where otherwise noted, text content on this site is licensed under a Creative Commons Attribution 3.0 License.
IndieWebCamp Microformats Webmention W3C HTML5 Creative Commons
WeChat ID
aaronpk_tv