Nacho Portion Monitor

    multiclass-density-maps
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

    Multiclass Density Maps

    teaser

    What is This?

    Density maps (also known as density plots, binned scatterplots, and heatmaps) are our best friend to scale scatterplots. However, it is nontrivial to visualize multiclass data on density maps. Actually, various designs have been used (see the picture above). In this work, we unified those various designs into a single model, the Class Buffer Model.

    Interactive Demos

    Reference

    J. Jo, F. Vernier, P. Dragicevic and J. Fekete, "A Declarative Rendering Model for Multiclass Density Maps," in IEEE Transactions on Visualization and Computer Graphics. doi: 10.1109/TVCG.2018.2865141 pdf (hal)

    Integration with Your Code

    Install via npm:

    npm install multiclass-density-maps --save

    and import it in your code:

    import * as MDM from 'multiclass-density-maps';

    Parse and render a specification:

    let spec = // enter your JSON speficiation here.
     
    let config = new MDM.Config(spec); // parse the specification
     
    config.load().then(() => { // load the data
        let interp = new MDM.Interpreter(config); // create an interpreter
     
        interp.interpret(); // interpret the specification
     
        interp.render(document.getElementsByTagName('div')[0]); // render it to a div element.
    })

    See our wiki! https://github.com/e-/Multiclass-Density-Maps/wiki

    Development

    Install NodeJS and NPM from https://nodejs.org/en/download/

    Clone the repo:

    git clone https://github.com/e-/Multiclass-Density-Maps.git
    cd Multiclass-Density-Maps

    Install the dependencies:

    npm install

    Start the dev server:

    npm start

    Open the address that the server gives and navigate to index.html.

    FAQ

    1. Problems when installing topojson: Try npm install topojson --no-bin-links.

    2. How can I use my own data?: Here are some examples using different data sources: https://github.com/e-/Multiclass-Density-Maps/tree/master/data

    Keywords

    none

    Install

    npm i multiclass-density-maps

    DownloadsWeekly Downloads

    7

    Version

    0.1.5

    License

    BSD-2-Clause

    Unpacked Size

    115 MB

    Total Files

    306

    Last publish

    Collaborators

    • jaeminjo