mdm-deckgl

This package is a deck.gl implementation of this project : https://github.com/e-/Multiclass-Density-Maps

Multiclass Density Maps

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.

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 mdm-deckgl

and import it in your code:

import {MdmLayer} from 'mdm-deckgl';

Example usage:

import {Deck} from '@deck.gl/core';
import {MdmLayer} from 'mdm-deckgl';


const exampleSpecs = {
    data: {
        url: 'yourDataFileHere.json'
    },
    compose: {
        mix: 'max'
    },
    rescale: {
        type: 'log'
    }
}

const layer = new MdmLayer({
  data: [{ position: [0, 0], radius: 100000 }],
  getPosition: (d: any) => d.position,
  getRadius: (d: any) => d.radius,
  mdmSpecs: {
    baseUrl: '',
    specs: exampleSpecs
  }
});

new Deck({
  initialViewState:  {
    longitude: 0.0,
    latitude: 0.0,
    zoom: 8
  },
  controller: true,
  layers: [layer]
});

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

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

License

MIT