@carrotsearch/dotatlas v1.0.0

dotAtlas

dotAtlas is a map-like visualization of 2d points for browser.

To add dotAtlas dependency to your project:

npm install @carrotsearch/dotatlas

The simplest React component showing a dotAtlas visualization:

import React, { useEffect, useRef } from "react";
import { DotAtlas as DotAtlasImpl } from "@carrotsearch/dotatlas";

export const DotAtlas = () => {
  const element = useRef(null);
  useEffect(() => {
    const points = [
      { x: 0, y: 0, elevation: 1.0, label: "Central peak" },
      { x: -1, y: 0, elevation: 0.6, label: "West peak" },
      { x: 1, y: 0, elevation: 0.6, label: "East peak" },
      { x: 0, y: -1, elevation: 0.4, label: "North peak" },
      { x: 0, y: 1, elevation: 0.4, label: "South peak" }
    ];

    const dotatlas = DotAtlasImpl.embed({
      element: element.current,
      layers: [
        { points: points, type: "elevation" },
        { points: points, type: "marker" },
        { points: points, type: "label" }
      ]
    });

    return () => dotatlas.dispose();
  }, []);

  return <div ref={element} style={{ width: 400, height: 300 }} />;
};

For more information, see:

• dotAtlas website
• dotAtlas documentation
• dotAtlas code examples

Notable features:

• Customizable colors, sizes, shapes, opacities, elevations and textual labels for all the points.

• Independent control of the elevations, markers, outline and label layers.

• Built-in finding of clusters of nearby points for easy multi-point hover and selection.

• WebGL-based implementation for 60 FPS interaction animations, also with large data sets.

This package contains a free-of-charge branded version of dotAtlas. For licensing of a branding-free version, contact Carrot Search.