broadinstitute / lattice

lattice.js

Lattice.js is a JavaScript library for creating coordinated multivariate visualizations for sciences. At its core, Lattice champions a 2D grid-based design approach, which offers an intuitive yet powerful visual solution for rendering multivariate data.

Demos

To see demos of our sample use cases and basic plot types, visit https://lattice.broadinstitute.org.

Installing and using lattice.js

Use npm to install the package in your project.

npm install lattice-viz

import the library to use lattice. There are 3 different imports you can use that will depend on your specific use case.

import { LatticeLib, Plot, Lattice } from "lattice-viz";

1. LatticeLib - This exposes basic usage of Lattice.js as a charting library, allowing someone to call LatticeLib.plot(...) or LatticeLib.lattice(...) to generate a lattice or a plot.
2. Plot - This allows someone to build their own visualization tool and instantiate a Plot object within it.
3. Lattice - Similarly to 2, this allows someone to build their own visualization tool and instantiate a Lattice object within it.

Data visualization developers who may want to layer additional interactive pieces on top of the base visualization are able to do so using options 2 and 3 in conjuction with D3.js.

Styling

Out-of-the-box CSS styling has been provided for easy usage of the lattice.js library and can be imported into your app at its entrypoint.

import "lattice-viz/src/css/LatticeLib.css";

You will need to install style-loader and css-loader and add a basic rule for css to your webpack config.

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}
...

---

Developing the lattice.js library

Getting started

After cloning the respository from GitHub, run npm install at the root of the repository.

To generate jsdocs

npm run docs

lattice's Issues

PR merging

Merge the pending pull request.
#46

Create JS tutorials in addition to the website demos.

• create a directory with simple, straightforward cases that uses the import syntax
• things we may want to show:
  • how to customize the look (e.g. tooltips)
  • how to manipulate the d3 object from lattice

lattice.js export cleanup

LatticeLib.js currently exports multiple things — should clean it up, and just have an index.js that imports/exports everything instead

Look into the security warning messages.

Update Tooltip.js edge adjustment code

The way the HTML is written for the https://github.com/getzlab/dlbcl-classifier-portal portal, the edge adjustment checks broke the tooltip -- the top positioning would go negative, and not "appear" on the page. The edge adjustment code needs to be tested more robustly and updated. For now, have an just-in-time fix within the icomut-lattice repo that overrides the 0.1.4 version Tooltip.js.

phase out "plotTypes" and "plots" from constants.js

originally seen in code from PR #46 -- moving out to a separate issue to be completed later.

~ L19

CSS mandatory

Right now, NPM documentation says the CSS stuff is optional, but it's actually not because of the tooltip. Should clean up the documentation, or always include the tooltip a different way to make the CSS actually optional

Document the process to create a Node.js package and how to update it.

Resources:
https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-nodejs/