Part 3 of 3: Plotly in React – Merge Multiple Selections using polygon-clipping
How to elegantly merge, or union, multiple polygonal selections in plotly
In this article…
In this article I will be showing you how to take the plotly chart you created in Part 2 and automatically merge your overlapping selections together.
What do you mean by merging selections?
Currently your plot’s selections overlap each other. If you draw a circle, and then draw another circle next to it with some overlap between them, you’ll create a sort of venn diagram. The two selections are still very much distinct. Merging the selections will cause the inner, overlapping lines to be removed so those two circles will instead become one polygon and will create more of a peanut shape.
Instead of having to crack open our geometry books to figure out how to perform a union on multiple polygons, we’ll use a small and clever library called polygon-clipping .
What you should know beforehand
Steps in creating this merged selections data plot
Import polygon-clipping into our app
In the Add Dependency text field, import the `polygon-clipping` package
Create method getMergedPolygonsFromSelections
Create a new file called getMergedPolygonsFromSelections and populate is as below:
import { PlotSelectionState } from "./types";
import polygonClipping from "polygon-clipping";
export const getMergedPolygonsFromSelections = (selections: PlotSelectionState[]) => {
const polys = selections.map((selection) => {
const { lassoPoints, range } = selection;
let poly: polygonClipping.Polygon = [[[0, 0]]];
if (lassoPoints) {
poly = [
lassoPoints.x.map((lassoPointX, i) => [lassoPointX, lassoPoints.y[i]])
];
} else if (range) {
const { x, y } = range;
// creating a box counterclockwise from lower left point
poly = [
[
[x[0], y[0]],
[x[1], y[0]],
[x[1], y[1]],
[x[0], y[1]],
[x[0], y[0]]
]
];
}
return poly;
});
// union all the polygons together
return polygonClipping.union(polys);
};
Retrieve paths from polygons
In your App.tsx, import the function you just created
import { getMergedPolygonsFromSelections } from "./getMergedPolygonsFromSelections";
const mergedPolygons = getMergedPolygonsFromSelections(allSelections);
const paths = mergedPolygons.map((unionPolygon) => {
let path = "";
unionPolygon[0].forEach((pair, i) => {
path += `${i === 0 ? "M" : "L"}${pair[0]},${pair[1]}`;
});
return path;
});
– Read more about SVG line paths here.
Convert paths to shapes
In App.tsx, import `Shape` from ‘plotly.js`:
import { Shape } from "plotly.js";
const shapesToUse = paths.map(
(path) =>
({
type: "path",
path,
xref: "x",
yref: "y"
} as Partial<Shape>)
);
Pass shapes to Plot
In Plot.layout, replace the value passed to the shapes prop with shapesToUse
shapes: shapesToUse
You can see an already built sandbox here: https://codesandbox.io/s/plotly-polygon-clipping-lgxjqw?file=/src/App.tsx
Conclusion
These three articles gave you a little taste of what plotly is capable of doing. While dealing almost exclusively with scatterplots, plotly provides histograms, 2D density plots, heatmaps, 3D line and surface plots, and much more. To discover all that plotly has to offer for the javascript library, go to https://plotly.com/javascript/.
3-Part Series:
- Part 1 of 3: Plotly in React – Real time data visualization
- Part 2 of 3: Plotly in React – Display Multiple Selections with Annotations
- Part 3 of 3: Part 3 of 3: Plotly in React – Merge Multiple Selections using polygon-clipping
About Intertech
Intertech is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Intertech teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Intertech employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Intertech is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.