Excentric Labeling

Introduction

Excentric labeling interaction is based on the excentric labeling layout algrithm. 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
• source code

Usage

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;
}