@stamen/punchcard

    0.2.0 • Public • Published

    Punchcard

    A categorized view of a set of values, each with a label and simple graphical representation (a circle).

    Part of the @stamen/panorama toolkit.

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Punchcard } from '@panorama/toolkit';
    
    let punchcardConfig = {
      header: {
        title: 'Erie Canal',
        subtitle: 1850,
        caption: 1635089
      },
      categories: [
        {
          commodities: [
            {
              name: 'Wheat',
              value: 3670754,
              normalizedValue: 359733.892
            },
            {
              name: 'Flour',
              value: 3256077,
              normalizedValue: 319095.546
            },
            {
              name: 'Grain',
              value: 7339865,
              normalizedValue: 172486.8275
            }
          ],
          name: 'Grains, Alcohol & Tobacco',
          aggregateNormalizedValue: 851316.2655
        },
        {
          commodities: [
            {
              name: 'Boards & scantling',
              value: 425095442,
              normalizedValue: 637643.163
            },
            {
              name: 'Shingles',
              value: 58433000,
              normalizedValue: 29216.5
            }
          ],
          name: 'Building Materials',
          aggregateNormalizedValue: 666859.663
        },
        // ...
      ]
    };
    
    ReactDOM.render(<Punchcard {...punchcardConfig}/>, document.body);

    Keywords

    none

    Install

    npm i @stamen/punchcard

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    ISC

    Last publish

    Collaborators

    • ericsoco
    • mojodna
    • stamen