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

see here

import excentricLabeling from "excent";
import eli from "excentric-labeling-interaction";

const {addExcentricLabelingInteraction, computeSizeOfLabels} = eli;

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

// 2. interaction
// 2.1 precompute lable size of each point
/** @type {{x: number, y: number, color: string, label: string,labelWidth: number, labelHeight: number}} */
const rawInfos = computeLabelSizeEachPoint(coordinatesWithInfo, svg, interactionParams.fontSize);
// 2.2 add interaction
addExcentricLabelingInteraction(mainLayer, width, height, rawInfos, interactionParams);

function computeLabelSizeEachPoint(points, root, fontSize) {
  const rawInfos = points.map((point) => {
    return {
      x: point.x,
      y: point.x,
      color: point.color,
      label: point.label,
      labelWidth: 0,
      labelHeight: 0,
    };
  });
  computeSizeOfLabels(rawInfos, root, fontSize);
  return rawInfos;
}