npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

covid-data-monitor

v1.0.0

Published

We Count Data Monitor project visualising Ontario Covid test centre data as accessible map

Downloads

3

Readme

We Count Covid Data Monitor

This package implements a map and query-based visualisation of data on Ontario COVID-19 assessment centre locations for project We Count.

It includes built-in data that merges the ODS assessment centre locations dataset with a mocked accessibility dataset for these assessment centres to visualize at [data/merged/output.csv].

Install

After checking out this project, run npm install.

Development

The primary styling of this project is written in Sass. At development, to automatically watch changes in Scss files and compile into CSS files, run

npm run watch:scss

To manually compile Scss files into CSS files, run

npm run build:scss

Testing

To quickly see the interface in action, load index.html from this directory in your browser from a local static HTTP server. This index sources live data from the GitHub covid-assessment-centres repository.

This repository is a demonstration of Project WeCount's pluralistic data infrastructure, whose implementation and description can be seen at forgiving-data. This infrastructure allows data to be aggregated and merged from a variety of sources whilst tracking provenance. In order to test the provenance display of this interface (at the time of writing), you can scroll to "North York" in the list of cities in the left panel, and then select from the first couple of hospitals shown - the first hospital in the list, "North York General Hospital - Branson" should show up with stale (2020 provenance in the bottom right display pane, and others should show up with synthetic provenance.

Building

To produce a rolled-up build suitable for deployment run

npm run build

To produce a build omitting the Infusion library, run

npm run build:noInfusion

The resulting build artefacts will be generated in directory build, together with a self-test for the build in build/index.html.

Regenerating SVG icon build

To produce a fresh HTML build from a collection of SVG icon files held in src/img, indexed by the file svgmap.json, run

node buildSVG.js

This will produce output in buildSVG/svgIcons.html which is automatically pasted into index.html and the bundled template in src/html/template.html.

Lint

The project files may be linted by running npm run lint.

Design

Live designs for this work may be seen in Figma.