# [dotAtlas](https://get.carrotsearch.com/dotatlas/latest/)

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

![demo](https://get.carrotsearch.com/dotatlas/npm.png)

To add dotAtlas dependency to your project:

```shell
npm install @carrotsearch/dotatlas
```

The simplest React component showing a dotAtlas visualization:

```jsx
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](https://get.carrotsearch.com/dotatlas/latest/)
* [dotAtlas documentation](https://get.carrotsearch.com/dotatlas/latest/doc/)
* [dotAtlas code examples](https://get.carrotsearch.com/dotatlas/latest/demos/)

---

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](https://carrotsearch.com/contact).

---