# excentric-labeling-interaction

> exentric labeling interaction

Latest version **0.0.2** (published 2023-04-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install excentric-labeling-interaction
pnpm add excentric-labeling-interaction
yarn add excentric-labeling-interaction
bun add excentric-labeling-interaction
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-04-27 |
| First published | 2023-04-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 61.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | cheng peng |
| Maintainers | viruspc |
| Keywords | visualization, interaction, layout, exentric labeling |

## Links

- npm: https://www.npmjs.com/package/excentric-labeling-interaction
- Repository: https://github.com/VirusPC/excentric-labeling-interaction
- Homepage: https://github.com/VirusPC/excentric-labeling-interaction#readme
- Issues: https://github.com/VirusPC/excentric-labeling-interaction/issues
- npm.io page: https://npm.io/package/excentric-labeling-interaction

## Dependencies (3)

- [d3-shape](https://npm.io/package/d3-shape.md) ^3.2.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0
- [excentric-labeling](https://npm.io/package/excentric-labeling.md) ^3.0.4

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-04-27
- 0.0.1 — 2023-04-27

## README

# Excentric Labeling

[![](https://img.shields.io/npm/l/excentric-labeling?registry_uri=https%3A%2F%2Fregistry.npmjs.com)](https://github.com/VirusPC/excentric-labeling/blob/master/LICENSE)

## Introduction


Excentric labeling interaction is based on the [excentric labeling layout algrithm](https://github.com/VirusPC/excentric-labeling). It allows you to augment your scatter plot, bar chart, tree map or any other visualizatoins with labeling technique in a few lines of code!

## Live Demo
- [live demo](https://excentric-labeling-react.vercel.app/)
- [source code](https://github.com/VirusPC/excentric-labeling-react) 

## Usage

```ts
import excentricLabeling from "excent";

import eli from "excentric-labeling-interaction";

const {addExcentricLabelingInteraction, computeSizeOfLabels} = eli;

const {mainLayer, coordinatesWithInfo} = renderScatterPlot(g, width, height, data, fieldX, fieldY, fieldColor, interactionParams, setStateFuncs);

  // interaction
const rawInfos = getRawInfos(coordinatesWithInfo, svg, interactionParams.fontSize);
addExcentricLabelingInteraction(mainLayer, width, height, rawInfos, interactionParams, {
    onMove: (rawInfos, nearest) => {
        const rp = randomPoint(rawInfos);
        setStateFuncs.setCurLabel(nearest?.label || "");
        setStateFuncs.setRandomLabel(rp?.label || "");
    }
});

function getRawInfos(points, root, fontSize) {
  const rawInfos = points.map((point) => {
    return {
      ...point,
      labelWidth: 0,
      labelHeight: 0,
    };
  });
  computeSizeOfLabels(rawInfos, root, fontSize);
  return rawInfos;
}
```

---
_Source: https://npm.io/package/excentric-labeling-interaction · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._