@traviswheelerlab/corona-chart

1.0.2 • Public • Published

About

A simple tool built with d3 to visualize the daily number of new COVID-19 cases in an area.

An example chart

Usage

We provide a simple API to create and configure a chart to display daily case data.

class BarDatum {
    // the actual day for this datum
    date: Date;
    // whether or not the day increased in cases 
    increase: boolean
    // day index
    x: number;
    // the change in cases
    y: number;
}

class ChartConfig {
    // selector to get at the intended container DOM element
    selector:           string; 
    barWidth:           number; 
    barColor:           string;
    // define the formatting for the ticks on the x-axis
    xTickTimeFormat:    (date: Date) => string;
    font:               string;
    fontSize:           number;
    // number of degrees to rotate the labels on the x-axis
    textRotate:         number; 

A simple example:

import { CoronaChart, BarDatum, defaultConfig } from "coronachart";

const config = defaultConfig();
// provide a selector to the DOM container you want the chart in
config.setSelector("#corona-chart");

const chart = new CoronaChart(config);

// provide case data
const data: BarDatum[] = ( ... );
chart.render(data, "chart title");

Package Sidebar

Install

npm i @traviswheelerlab/corona-chart

Weekly Downloads

4

Version

1.0.2

License

MIT

Unpacked Size

43.8 kB

Total Files

6

Last publish

Collaborators

  • glesica
  • jackroddy
  • traviswheeler