semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/export/exportChart.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportChart = exportChart;
+/**
+ * Export a semiotic chart to SVG or PNG from the browser.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null)
+ * // ... render chart inside ref ...
+ * <button onClick={() => exportChart(ref.current!)}>Download</button>
+ * ```
+ */
+async function exportChart(container, options) {
+    const { format = "svg", filename = "chart", scale = 2, background = "white" } = options || {};
+    // Find the SVG element inside the container
+    const svgElement = container.querySelector("svg");
+    if (!svgElement) {
+        throw new Error("No SVG element found in the container");
+    }
+    // Clone the SVG to avoid modifying the original
+    const clone = svgElement.cloneNode(true);
+    // Ensure the clone has explicit width/height attributes
+    const bbox = svgElement.getBoundingClientRect();
+    if (!clone.getAttribute("width")) {
+        clone.setAttribute("width", String(bbox.width));
+    }
+    if (!clone.getAttribute("height")) {
+        clone.setAttribute("height", String(bbox.height));
+    }
+    // Add xmlns if missing
+    if (!clone.getAttribute("xmlns")) {
+        clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    }
+    // Inline computed styles for standalone rendering
+    inlineStyles(svgElement, clone);
+    if (format === "svg") {
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(clone);
+        const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+        downloadBlob(blob, `${filename}.svg`);
+    }
+    else {
+        // PNG: render SVG to canvas
+        const width = bbox.width * scale;
+        const height = bbox.height * scale;
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(clone);
+        const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(svgBlob);
+        const img = new Image();
+        img.width = bbox.width;
+        img.height = bbox.height;
+        await new Promise((resolve, reject) => {
+            img.onload = () => {
+                const canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext("2d");
+                // Fill background
+                ctx.fillStyle = background;
+                ctx.fillRect(0, 0, width, height);
+                // Scale and draw
+                ctx.scale(scale, scale);
+                ctx.drawImage(img, 0, 0);
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        downloadBlob(blob, `${filename}.png`);
+                        resolve();
+                    }
+                    else {
+                        reject(new Error("Failed to create PNG blob"));
+                    }
+                }, "image/png");
+                URL.revokeObjectURL(url);
+            };
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                reject(new Error("Failed to load SVG image"));
+            };
+            img.src = url;
+        });
+    }
+}
+/**
+ * Inline computed styles from source SVG elements into clone elements.
+ * This ensures the exported SVG/PNG looks the same as on screen.
+ */
+function inlineStyles(source, target) {
+    const sourceChildren = source.children;
+    const targetChildren = target.children;
+    // Copy computed styles for the element itself
+    const computed = window.getComputedStyle(source);
+    const important = ["fill", "stroke", "stroke-width", "stroke-dasharray",
+        "opacity", "fill-opacity", "stroke-opacity", "font-family",
+        "font-size", "font-weight", "text-anchor", "dominant-baseline"];
+    for (const prop of important) {
+        const value = computed.getPropertyValue(prop);
+        if (value && value !== "none" && value !== "") {
+            ;
+            target.style?.setProperty(prop, value);
+        }
+    }
+    // Recurse into children
+    for (let i = 0; i < Math.min(sourceChildren.length, targetChildren.length); i++) {
+        inlineStyles(sourceChildren[i], targetChildren[i]);
+    }
+}
+/**
+ * Trigger a file download from a blob.
+ */
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}

package/ai/dist/src/components/generic_utilities/functions.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genericFunction = void 0;
+const genericFunction = value => () => value;
+exports.genericFunction = genericFunction;

package/ai/dist/src/components/geometry/areaDrawing.js

@@ -0,0 +1,312 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hexbinning = exports.contouring = void 0;
+exports.lineBounding = lineBounding;
+exports.heatmapping = heatmapping;
+exports.trendlining = trendlining;
+exports.shapeBounds = shapeBounds;
+const React = __importStar(require("react"));
+const d3_scale_1 = require("d3-scale");
+const regression_1 = __importDefault(require("regression"));
+const d3_shape_1 = require("d3-shape");
+// Re-export from new locations for backwards compatibility
+var contourLayout_1 = require("./contourLayout");
+Object.defineProperty(exports, "contouring", { enumerable: true, get: function () { return contourLayout_1.contouring; } });
+var hexbinLayout_1 = require("./hexbinLayout");
+Object.defineProperty(exports, "hexbinning", { enumerable: true, get: function () { return hexbinLayout_1.hexbinning; } });
+const generateLineBounds = (xydata, basedata, topBoundingAccessor, bottomBoundingAccessor) => {
+    const tops = xydata.map((d, i) => [
+        d[0],
+        d[1] + topBoundingAccessor(basedata[i])
+    ]);
+    const bottoms = xydata.map((d, i) => [
+        d[0],
+        d[1] - bottomBoundingAccessor(basedata[i])
+    ]);
+    return [...tops, ...bottoms.reverse()];
+};
+function lineBounding({ summaryType, data, defined }) {
+    let projectedSummaries = [];
+    if (!summaryType.type) {
+        summaryType = { type: summaryType };
+    }
+    const { boundingAccessor, topBoundingAccessor = boundingAccessor, bottomBoundingAccessor = boundingAccessor } = summaryType;
+    data.forEach((lineData) => {
+        const definedData = lineData._baseData.map(defined);
+        let currentBaseData = [];
+        let currentXYFC = [];
+        const boundingPieces = [
+            {
+                xyf: currentXYFC,
+                base: currentBaseData
+            }
+        ];
+        definedData.forEach((d, i) => {
+            if (d === true) {
+                currentBaseData.push(lineData._baseData[i]);
+                currentXYFC.push(lineData._xyfCoordinates[i]);
+            }
+            else if (definedData[i + 1]) {
+                currentBaseData = [];
+                currentXYFC = [];
+                boundingPieces.push({
+                    xyf: currentXYFC,
+                    base: currentBaseData
+                });
+            }
+        });
+        boundingPieces.forEach(({ xyf, base }) => {
+            const boundingProjectedSummary = {
+                data: lineData,
+                parentSummary: lineData,
+                _xyfCoordinates: generateLineBounds(xyf, base, topBoundingAccessor, bottomBoundingAccessor)
+            };
+            projectedSummaries = [...projectedSummaries, boundingProjectedSummary];
+        });
+    });
+    return projectedSummaries;
+}
+function heatmapping({ preprocess = true, processedData = false, summaryType: baseSummaryType, data: baseData, finalXExtent = [
+    Math.min(...baseData.coordinates.map((d) => d.x)),
+    Math.max(...baseData.coordinates.map((d) => d.x))
+], finalYExtent = [
+    Math.min(...baseData.coordinates.map((d) => d.y)),
+    Math.max(...baseData.coordinates.map((d) => d.y))
+], size, xScaleType = (0, d3_scale_1.scaleLinear)(), yScaleType = (0, d3_scale_1.scaleLinear)(), margin, styleFn, classFn, renderFn, chartSize }) {
+    if (processedData && baseData) {
+        return baseData.coordinates;
+    }
+    if (baseData.coordinates && !baseData._xyfCoordinates) {
+        baseData._xyfCoordinates = baseData.coordinates.map((d) => [d.x, d.y]);
+    }
+    const data = Array.isArray(baseData) ? baseData : [baseData];
+    let projectedSummaries = [];
+    let summaryType;
+    if (!baseSummaryType.type) {
+        summaryType = { type: summaryType };
+    }
+    else {
+        summaryType = baseSummaryType;
+    }
+    const { 
+    //    binGraphic = "square",
+    binValue = (d) => d.length, xBins = summaryType.yBins || 0.05, yBins = xBins, xCellPx = !summaryType.xBins && summaryType.xCellPx, yCellPx = !summaryType.yBins && summaryType.yCellPx, customMark, binMax } = summaryType;
+    const xBinPercent = xBins < 1 ? xBins : 1 / xBins;
+    const yBinPercent = yBins < 1 ? yBins : 1 / yBins;
+    const heatmapBinXScale = xScaleType.domain(finalXExtent).range([0, size[0]]);
+    const heatmapBinYScale = yScaleType.domain(finalYExtent).range([size[1], 0]);
+    const actualResolution = [
+        Math.ceil(((xCellPx && xCellPx / size[0]) || xBinPercent) * size[0] * 10) /
+            10,
+        Math.ceil(((yCellPx && yCellPx / size[1]) || yBinPercent) * size[1] * 10) /
+            10
+    ];
+    let maxValue = -Infinity;
+    data.forEach((heatmapData) => {
+        const grid = [];
+        const flatGrid = [];
+        let cell;
+        let gridColumn;
+        for (let i = 0; Math.ceil(i) < size[0]; i += actualResolution[0]) {
+            const x = heatmapBinXScale.invert(i);
+            const x1 = heatmapBinXScale.invert(i + actualResolution[0]);
+            gridColumn = [];
+            grid.push(gridColumn);
+            for (let j = 0; Math.ceil(j) < size[1]; j += actualResolution[1]) {
+                const y = heatmapBinYScale.invert(j);
+                const y1 = heatmapBinYScale.invert(j + actualResolution[1]);
+                cell = {
+                    gx: i,
+                    gy: j,
+                    gw: actualResolution[0],
+                    gh: actualResolution[1],
+                    x: (x + x1) / 2,
+                    y: (y + y1) / 2,
+                    binItems: [],
+                    value: 0,
+                    _xyfCoordinates: [
+                        [x, y],
+                        [x1, y],
+                        [x1, y1],
+                        [x, y1]
+                    ],
+                    parentSummary: heatmapData
+                };
+                gridColumn.push(cell);
+                flatGrid.push(cell);
+            }
+            gridColumn.push(cell);
+        }
+        grid.push(gridColumn);
+        heatmapData._xyfCoordinates.forEach((d, di) => {
+            const baseX = heatmapBinXScale(d[0]);
+            const baseY = heatmapBinYScale(d[1]);
+            const xCoordinate = Math.floor(baseX / actualResolution[0]);
+            const yCoordinate = Math.floor(baseY / actualResolution[1]);
+            if (grid[xCoordinate][yCoordinate]) {
+                grid[xCoordinate][yCoordinate].binItems.push(heatmapData.coordinates[di]);
+            }
+        });
+        flatGrid.forEach((d) => {
+            d.value = binValue(d.binItems);
+            maxValue = Math.max(maxValue, d.value);
+        });
+        flatGrid.forEach((d) => {
+            d.percent = d.value / maxValue;
+            d.customMark = customMark && (React.createElement("g", { transform: `translate(${d.gx},${d.gy})` }, customMark({
+                d,
+                margin,
+                styleFn,
+                classFn,
+                renderFn,
+                chartSize,
+                adjustedSize: size
+            })));
+        });
+        projectedSummaries = [...projectedSummaries, ...flatGrid];
+    });
+    if (binMax) {
+        binMax(maxValue);
+    }
+    if (preprocess) {
+        const preprocessedSummary = {
+            type: "heatmap",
+            processedData: true,
+            _baseData: [],
+            _xyfCoordinates: [],
+            data: [],
+            bounds: [],
+            x: 0,
+            y: 0,
+            coordinates: projectedSummaries,
+            binMax: maxValue
+        };
+        return preprocessedSummary;
+    }
+    return projectedSummaries;
+}
+function trendlining({ preprocess = false, summaryType: baseSummaryType, data: baseData, finalXExtent = [
+    Math.min(...baseData.coordinates.map((d) => d.x)),
+    Math.max(...baseData.coordinates.map((d) => d.x))
+], xScaleType = (0, d3_scale_1.scaleLinear)() }) {
+    if (preprocess) {
+        return baseData[0].coordinates;
+    }
+    let projectedSummaries = [];
+    let summaryType;
+    if (!baseSummaryType.type) {
+        summaryType = { type: summaryType };
+    }
+    else {
+        summaryType = baseSummaryType;
+    }
+    const { regressionType: baseRegressionType = "linear", order = 2, precision = 4, controlPoints = 20, curve = d3_shape_1.curveCardinal } = summaryType;
+    let regressionType = baseRegressionType;
+    if (finalXExtent[0] < 0 &&
+        (baseRegressionType === "logarithmic" ||
+            baseRegressionType === "power" ||
+            baseRegressionType === "exponential")) {
+        console.error(`Cannot use this ${baseRegressionType} regressionType type with value range that goes below 0, defaulting to linear`);
+        regressionType = "linear";
+    }
+    if (baseData.coordinates && !baseData._xyfCoordinates) {
+        baseData._xyfCoordinates = baseData.coordinates.map((d) => [d.x, d.y]);
+    }
+    const data = Array.isArray(baseData) ? baseData : [baseData];
+    const xScale = xScaleType.domain([0, 1]).range(finalXExtent);
+    projectedSummaries = [];
+    data.forEach((bdata) => {
+        const regressionLine = regression_1.default[regressionType](bdata._xyfCoordinates.map((d) => {
+            let x = d[0];
+            let y = d[1];
+            if (typeof x !== "number") {
+                x = x.getTime();
+            }
+            if (typeof y !== "number") {
+                y = y.getTime();
+            }
+            return [x, y];
+        }), {
+            order,
+            precision
+        });
+        const controlStep = 1 / controlPoints;
+        let steps = [0, 1];
+        if (regressionType !== "linear") {
+            steps = [];
+            for (let step = 0; step < 1 + controlStep; step += controlStep) {
+                steps.push(step);
+            }
+        }
+        const controlPointArray = [];
+        steps.forEach((controlPoint) => {
+            controlPointArray.push(regressionLine.predict(xScale(controlPoint)));
+        });
+        projectedSummaries.push({
+            centroid: false,
+            customMark: undefined,
+            data: bdata,
+            parentSummary: bdata,
+            value: regressionLine.string,
+            r2: regressionLine.r2,
+            curve,
+            _xyfCoordinates: controlPointArray
+        });
+    });
+    return projectedSummaries;
+}
+function shapeBounds(coordinates) {
+    let left = [Infinity, 0];
+    let right = [-Infinity, 0];
+    let top = [0, Infinity];
+    let bottom = [0, -Infinity];
+    coordinates.forEach((d) => {
+        left = d[0] < left[0] ? d : left;
+        right = d[0] > right[0] ? d : right;
+        bottom = d[1] > bottom[1] ? d : bottom;
+        top = d[1] < top[1] ? d : top;
+    });
+    return {
+        center: [(left[0] + right[0]) / 2, (top[1] + bottom[1]) / 2],
+        top,
+        left,
+        right,
+        bottom
+    };
+}

package/ai/dist/src/components/geometry/contourLayout.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contouring = contouring;
+const d3_contour_1 = require("d3-contour");
+const d3_scale_1 = require("d3-scale");
+function shapeBounds(coordinates) {
+    let left = [Infinity, 0];
+    let right = [-Infinity, 0];
+    let top = [0, Infinity];
+    let bottom = [0, -Infinity];
+    coordinates.forEach((d) => {
+        left = d[0] < left[0] ? d : left;
+        right = d[0] > right[0] ? d : right;
+        bottom = d[1] > bottom[1] ? d : bottom;
+        top = d[1] < top[1] ? d : top;
+    });
+    return {
+        center: [(left[0] + right[0]) / 2, (top[1] + bottom[1]) / 2],
+        top,
+        left,
+        right,
+        bottom
+    };
+}
+function contouring({ summaryType, data, finalXExtent, finalYExtent }) {
+    let projectedSummaries = [];
+    if (!summaryType.type) {
+        summaryType = { type: summaryType };
+    }
+    const { resolution = 500, thresholds = 10, bandwidth = 20, neighborhood } = summaryType;
+    const xScale = (0, d3_scale_1.scaleLinear)()
+        .domain(finalXExtent)
+        .rangeRound([0, resolution])
+        .nice();
+    const yScale = (0, d3_scale_1.scaleLinear)()
+        .domain(finalYExtent)
+        .rangeRound([resolution, 0])
+        .nice();
+    data.forEach((contourData) => {
+        let contourProjectedSummaries = (0, d3_contour_1.contourDensity)()
+            .size([resolution, resolution])
+            .x((d) => xScale(d[0]))
+            .y((d) => yScale(d[1]))
+            .thresholds(thresholds)
+            .bandwidth(bandwidth)(contourData._xyfCoordinates);
+        if (neighborhood) {
+            contourProjectedSummaries = [contourProjectedSummaries[0]];
+        }
+        const max = Math.max(...contourProjectedSummaries.map((d) => d.value));
+        contourProjectedSummaries.forEach((summary) => {
+            summary.parentSummary = contourData;
+            summary.bounds = [];
+            summary.percent = summary.value / max;
+            summary.coordinates.forEach((poly) => {
+                poly.forEach((subpoly, i) => {
+                    poly[i] = subpoly.map((coordpair) => {
+                        coordpair = [
+                            xScale.invert(coordpair[0]),
+                            yScale.invert(coordpair[1])
+                        ];
+                        return coordpair;
+                    });
+                    //Only push bounds for the main poly, not its interior rings, otherwise you end up labeling interior cutouts
+                    if (i === 0) {
+                        summary.bounds.push(shapeBounds(poly[i]));
+                    }
+                });
+            });
+        });
+        projectedSummaries = [...projectedSummaries, ...contourProjectedSummaries];
+    });
+    return projectedSummaries;
+}

package/ai/dist/src/components/geometry/hexbinLayout.js

@@ -0,0 +1,163 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hexbinning = hexbinning;
+const React = __importStar(require("react"));
+const d3_hexbin_1 = require("d3-hexbin");
+const d3_scale_1 = require("d3-scale");
+function hexbinning({ preprocess = true, processedData = false, summaryType: baseSummaryType, data: baseData, finalXExtent: baseXExtent, finalYExtent: baseYExtent, size, xScaleType = (0, d3_scale_1.scaleLinear)(), yScaleType = (0, d3_scale_1.scaleLinear)(), margin, styleFn, classFn, renderFn, chartSize }) {
+    let finalXExtent = baseXExtent;
+    let finalYExtent = baseYExtent;
+    if (!finalXExtent) {
+        const xData = baseData.coordinates.map((p) => p.x);
+        finalXExtent = [Math.min(...xData), Math.max(...xData)];
+    }
+    if (!finalYExtent) {
+        const yData = baseData.coordinates.map((p) => p.y);
+        finalYExtent = [Math.min(...yData), Math.max(...yData)];
+    }
+    if (processedData && baseData) {
+        return baseData.coordinates;
+    }
+    let projectedSummaries = [];
+    let summaryType;
+    if (!baseSummaryType.type) {
+        summaryType = { type: summaryType };
+    }
+    else {
+        summaryType = baseSummaryType;
+    }
+    const { bins = 0.05, cellPx, binValue = (d) => d.length, binMax, customMark } = summaryType;
+    if (baseData.coordinates && !baseData._xyfCoordinates) {
+        baseData._xyfCoordinates = baseData.coordinates.map((d) => [d.x, d.y]);
+    }
+    const data = Array.isArray(baseData) ? baseData : [baseData];
+    const hexBinXScale = xScaleType.domain(finalXExtent).range([0, size[0]]);
+    const hexBinYScale = yScaleType.domain(finalYExtent).range([0, size[1]]);
+    const actualResolution = (cellPx && cellPx / 2) || ((bins > 1 ? 1 / bins : bins) * size[0]) / 2;
+    const hexbinner = (0, d3_hexbin_1.hexbin)()
+        .x((d) => hexBinXScale(d._xyfPoint[0]))
+        .y((d) => hexBinYScale(d._xyfPoint[1]))
+        .radius(actualResolution)
+        .size(size);
+    let hexMax;
+    const allHexes = hexbinner.centers();
+    data.forEach((hexbinData) => {
+        hexMax = 0;
+        const hexes = hexbinner(hexbinData._xyfCoordinates.map((d, i) => ({
+            _xyfPoint: d,
+            ...hexbinData.coordinates[i]
+        })));
+        const centerHash = {};
+        hexes.forEach((d) => {
+            centerHash[`${parseInt(d.x)}-${parseInt(d.y)}`] = true;
+        });
+        allHexes.forEach((hexCenter) => {
+            if (!centerHash[`${parseInt(hexCenter[0])}-${parseInt(hexCenter[1])}`]) {
+                const newHex = [];
+                newHex.x = hexCenter[0];
+                newHex.y = hexCenter[1];
+                hexes.push(newHex);
+            }
+        });
+        hexMax = Math.max(...hexes.map((d) => binValue(d)));
+        if (binMax) {
+            binMax(hexMax);
+        }
+        const hexBase = [
+            [0, -1],
+            [0.866, -0.5],
+            [0.866, 0.5],
+            [0, 1],
+            [-0.866, 0.5],
+            [-0.866, -0.5]
+        ];
+        const hexWidth = hexBinXScale.invert(actualResolution) - finalXExtent[0];
+        const hexHeight = hexBinYScale.invert(actualResolution) - finalYExtent[0];
+        const hexacoordinates = hexBase.map((d) => [
+            d[0] * hexWidth,
+            d[1] * hexHeight
+        ]);
+        const hexbinProjectedSummaries = hexes.map((d) => {
+            const hexValue = binValue(d);
+            const gx = d.x;
+            const gy = d.y;
+            d.x = hexBinXScale.invert(d.x);
+            d.y = hexBinYScale.invert(d.y);
+            const percent = hexValue / hexMax;
+            return {
+                customMark: customMark && (React.createElement("g", { transform: `translate(${gx},${size[1] - gy})` }, customMark({
+                    d: {
+                        ...d,
+                        binItems: d,
+                        percent,
+                        value: hexValue,
+                        radius: actualResolution,
+                        hexCoordinates: hexBase.map((d) => [
+                            d[0] * actualResolution,
+                            d[1] * actualResolution
+                        ])
+                    },
+                    margin,
+                    styleFn,
+                    classFn,
+                    renderFn,
+                    chartSize,
+                    adjustedSize: size
+                }))),
+                _xyfCoordinates: hexacoordinates.map((p) => [p[0] + d.x, p[1] + d.y]),
+                value: hexValue,
+                percent,
+                data: d,
+                parentSummary: hexbinData,
+                centroid: true
+            };
+        });
+        projectedSummaries = [...projectedSummaries, ...hexbinProjectedSummaries];
+    });
+    if (preprocess) {
+        projectedSummaries.forEach((d) => {
+            d.x = d.data.x;
+            d.y = d.data.y;
+        });
+        return {
+            type: "hexbin",
+            processedData: true,
+            coordinates: projectedSummaries,
+            binMax: hexMax
+        };
+    }
+    return projectedSummaries;
+}