An npm Downloads Comparison Chart in 300 Lines of Vanilla JS — Nice-Tick Math and API-Direct Fetch
A new tool has been developed to compare npm package downloads using vanilla JavaScript. It fetches daily download data from the npm API and displays it in an inline SVG chart without relying on external chart libraries. The tool allows users to select multiple packages and view their download statistics over various time periods.
- ▪The tool overlays up to six npm packages on a single chart.
- ▪It consists of approximately 300 lines of vanilla JavaScript code.
- ▪Users can instantly switch the time range for the download data.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3871729) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } SEN LLC Posted on May 24 An npm Downloads Comparison Chart in 300 Lines of Vanilla JS — Nice-Tick Math and API-Direct Fetch #javascript #npm #dataviz #webdev "react vs vue vs svelte vs solid-js — who's actually winning?" This tool answers it. Fetches daily downloads from api.npmjs.org (CORS-enabled, no auth) and overlays up to 6 packages on one inline SVG chart. No chart library. ~300 lines of vanilla JS. The scale + tick math is pure and gets 17 unit tests.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
