Optimize marker rendering and support custom markers by gatopeich · Pull Request #7653 · plotly/plotly.js
AI and others added 11 commits
November 19, 2025 11:16
Allow custom SVG marker functions directly as marker.symbol values
* Initial plan * Add data point and trace context to custom marker functions Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> * Improve comment clarity for custom marker function parameters Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> * Add weather map demo and documentation for custom marker functions Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> * Add backward compatibility test demo Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> * Remove dist folder changes - these are build artifacts for maintainers Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> * Fix coercion to allow function values for marker.symbol Allow functions to pass through enumerated coercion for custom marker symbols. Update weather map demo with proper meteorological wind barbs. * Auto-rotate custom marker functions via align() - Export align() from symbol_defs.js - Apply align() automatically to custom function results in makePointPath() - Simplify custom function signature to (r, d, trace) - Update weather demo with cleaner wind barbs and compact layout * Simplify custom marker function signature to (r, customdata) - Custom functions now receive (r, customdata) instead of (r, d, trace) - customdata is the value from trace.customdata[i] for each point - Rotation and standoff handled automatically via align() - Updated demos to use new signature * Improve weather demo with jet stream wind pattern * Add UTF-8 icons to weather demo legend * Rename pt back to d to match call sites * Remove unused trace parameter from makePointPath * Update docs and tests for (r, customdata) signature --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com>
Custom marker functions are called multiple times per point due to plotly's plot + style phases. Updated tests to use flexible assertions that check for minimum calls and value presence rather than exact counts.
Claude
AI
mentioned this pull request
* Initial plan * Initial plan: replace symbolFuncs with symbolPaths and use SVG symbol/use rendering Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/a8812772-a901-48c4-a259-cf15aee5b4ff * Replace symbolFuncs/makePointPath with symbolPaths + SVG symbol/use rendering - symbol_defs.js: replace f() functions with p: precomputed SVG paths at r=20 with integer coordinates; remove n: magic numbers, align(), parse-svg-path - index.js: add lookupSymbol() (handles names, numeric codes, custom SVG paths), ensureSymbolDef() with overflow=visible, singlePointStyle/selectedPointStyle use <use> elements; symbolNumber() kept for compat; translatePoint() handles <use> - scatter/plot.js, scatter/style.js: use.point instead of path.point - scattergeo/plot.js, box/plot.js, box/style.js: same - legend/style.js: use.scatterpts instead of path.scatterpts - scattergl/convert.js: use lookupSymbol + rotatePath; viewBox matches SYMBOL_SIZE=20 - Tests: fix getMarkerSize helper (* 40), update path.point selectors, remove custom-function tests (feature removed), add scatter_symbol_perf_test.js Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/a8812772-a901-48c4-a259-cf15aee5b4ff * Address review feedback: revert whitespace changes, remove fallback, revert package-lock.json Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/8c978e3d-55d6-407b-bdb5-647e5dcac295 * Clarify rotatePath() is only for scattergl SDF pipeline; SVG markers use transform Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/5157d817-2ab4-4a91-bd4c-2b190a527478 * Update weather map demos to use new SVG symbol/use API with static paths at r=20; rebuild dist Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/e0bacfbc-a436-49b7-803f-385d56b0c46a * Clean up decimal precision in SVG path strings in demo files Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/e0bacfbc-a436-49b7-803f-385d56b0c46a * Add weather map SVG output file to repo Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/36cb92ca-28a3-4ade-85ab-c2834b756f7e * Remove temporary weather demo capture files from repo Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/36cb92ca-28a3-4ade-85ab-c2834b756f7e * Scope _symMap to defs DOM node (per-SVG, not per-layout) Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/7dd7be3b-6019-4fc2-9a09-e71a0c331eab * Remove temp verify_ids.html demo file Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/7dd7be3b-6019-4fc2-9a09-e71a0c331eab * Pre-build dot-variant paths at init; ensureSymbolDef reduced to single append Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/742adff1-2175-4ddc-9511-71fb5d0778a9 * ensureSymbolDef: per-SVG map on defs node; custom paths get c0,c1,… ids; no global singleton Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/76f3a75a-762e-4119-ba75-436d372c01d8 * ensureSymbolDef: uniform path→id map; single lookup for all symbol types Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/6904d12d-0514-441d-803a-460cad616d39 * plan: give n=100 its own <symbol> via open-encoded sym.n Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/bcb0d524-eaad-4505-aa70-46ef5f8ed344 * Document why Z cannot replace CSS for open/closed markers; pre-build all 4 variant paths; sym.n matches legacy numeric encoding Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/bcb0d524-eaad-4505-aa70-46ef5f8ed344 * gitignore: stop tracking dist build artifacts (JS bundles, plot-schema.json, translation-keys.txt) Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/5ab0bc3d-aecd-4fe4-b7f6-21de2d1f96c1 * drawing: remove expanded Z-command reasoning comment Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com> Agent-Logs-Url: https://github.com/gatopeich/plotly.js/sessions/33b07737-3bca-440f-9dbd-77fc6b0f8e1d --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gatopeich <7722268+gatopeich@users.noreply.github.com>
gatopeich
changed the title
Support for custom marker symbols
Use SVG symbols and support custom marker symbols
gatopeich
changed the title
Use SVG symbols and support custom marker symbols
Use SVG symbols and support custom markers
gatopeich
changed the title
Use SVG symbols and support custom markers
Optimize marker rendering and support custom markers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters