sparky

Simple, responsive sparklines in Vanilla JavaScript. 📈

Backstory 📖

My goal in building this repo was not to create the perfect "Sparkline" library (see Edward Tufte's writing on sparklines for a brief history). Instead, my goal was to really just do a deep-dive into the native SVGElement API.

I've been building data visualizations in web apps for quite a few years now using wonderful libraries (including D3.js, Chartist.js and others!) but my knowledge of SVGs was basically limited to masking, injecting some custom visual elements, or putting in an ugly (and probably innefficient) hack.

After doing this little hobby project, I feel like I've have gained a nice rudimentary knowledge of the SVGElement API (P.S. - here's a great tutorial if you want to learn as well!). However, in addition to that, I've gained a huge appreciate for the data visualization libraries out there.

My other, and less obvious goal was to make something stupid lightweight and stupid simple. A teeny-tiny data visualization library that's both responsive and browser-compatible.

It worked! I was honestly surprised at how quickly I moved from "Hello World!" to drawing fancy little sparklines. Who knows, maybe sparky will take off?

Thanks for reading! If you want to find out more about my code and other creative endeavors (like novels and music), then please check out my website, lukemoorman.com.

Setup

Prerequisites

Software

• Node
• Yarn

Install Locally

In a terminal, run the following command:

git clone git@github.com:kmoo/sparky.git

Then install the required dependencies with this command:

yarn install

Example

Run the following command in a terminal:

yarn serve

Navigate to the following link in a browser:

http://localhost:5000/example

You should see something like this! 🎉

Running tests

Tests are located in the /src/ directory with the extension .test.js. To run them use Jest. To run the tests from the terminal, simply enter the following command:

yarn test

Linting

ESLint and Prettier are used to style JS.

Run the following terminal command to lint JS:

yarn lint

Run the following terminal command to automatically style JS:

yarn prettier

Contributing

• Please reach out to @kmoo. Thanks!