diff --git a/README.md b/README.md index c9c7e71..6fdd3d3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,80 @@ -# Automatic scatter labelling +## Automatic scatter labelling -Implementation in d3 of NOLOOKAHEAD algorithm described in: +Compute the positions of labels in a scatter plot. +It implements the NOLOOKAHEAD algorithm described in: Theophil S., Schödl A. _An Efficient Algorithm for Scatter Chart Labeling_ [AAAI](https://www.think-cell.com/en/career/talks/pdf/think-cell_article_aaai2006.pdf) -![example](https://github.com/furstenheim/automatic-scatter-labelling/blob/master/example-v0.0.2.png) \ No newline at end of file +![example](https://raw.githubusercontent.com/furstenheim/automatic-scatter-labelling/master/example.gif) + + +### Install + +`$ npm install --save automatic-scatter-labelling` + +It requires of a webworker so right now it only works for the browser. + +### Example + + Running `npm run gulp` will launch a full working example in the browser + +### Basic usage + +With browserify or webpack + +```js +const algorithm = require('automatic-scatter-labelling') +const pointsToLabel = [ + {id: 1, + position: { + x: 10, + y: -20 + }, + label: { + height: 30, + width: 20 + } + }, + { + id: 2, + position: { + x: 10, + y: -20 + }, + label: { + height: 30, + width: 20 + } +] + +mainAlgorithm(pointsToLabel) + .then(function (rectangles) { + const rectangle = rectangles[0] + const id = rectangle.id // Corresponding to the id provided in the algorithm + // Coordinates to place the rectangle + const {left, right, top, bottom} = rectangle.rectangle + }) + + +``` + +### Advanced usage + +Additionally to the points we want to label we can provide extra arguments to tweak the algorithm. `radius` is used to indicate that some space should be left around the points. `bbox` to indicate where the labels should be restricted (so that they don't go offscreen). + +Example: + +```js + const result = await algorithm(pointsToLabel, { + radius: 5, + bbox: { + top: margin.top, + bottom: -margin.top + height, + left: margin.left, + right: margin.left + width, + width, + height: height + } + }) + +``` \ No newline at end of file diff --git a/example/index.js b/example/index.js index 5290e5f..1cd2476 100644 --- a/example/index.js +++ b/example/index.js @@ -45,7 +45,6 @@ .attr('class', 'label') .attr('transform', 'rotate(-90)') .attr('y', 10) - //.attr('dy', '.71em') .style('text-anchor', 'end') .text('Life expectancy at 60') const developmentGroups = _.map(_.uniqBy(data, 'development_group'), 'development_group') @@ -76,9 +75,6 @@ co(function * () { yield * renderLoop(data) }) - /* setTimeout(function () { - render(data.slice(0, 5), xAxis, yAxis) - }, 2000)*/ }) function * renderLoop(data) { @@ -183,7 +179,6 @@ var a = new Date() const result = yield mainAlgorithm(extendedPoints, { MAX_NUMBER_OF_ITERATIONS: 1, - isWebgl: false, NUMBER_OF_RAYS: 25, radius: 3 * radius, bbox: {