Support for custom marker symbols #7653
Conversation
Co-authored-by: gatopeich <[email protected]>
Co-authored-by: gatopeich <[email protected]>
Co-authored-by: gatopeich <[email protected]>
Co-authored-by: gatopeich <[email protected]>
Co-authored-by: gatopeich <[email protected]>
…calculation Co-authored-by: gatopeich <[email protected]>
Co-authored-by: gatopeich <[email protected]>
Allow custom SVG marker functions directly as marker.symbol values
|
Hello @gatopeich! Before we review this PR, could you please help us understand what use case prompted this change? Ideally, you'd create an issue describing the problem and explaining why it should be fixed. |
|
I've used this professionally over the last few years to plot meaningful icons on top of maps, e.g. pedestrians, cars, directional wind arrows based on data... |
|
Let me add some nice example. |
|
Sounds good. While you're at it, could you double check the test you added? It's failing in CI. |
* Initial plan * Add data point and trace context to custom marker functions Co-authored-by: gatopeich <[email protected]> * Improve comment clarity for custom marker function parameters Co-authored-by: gatopeich <[email protected]> * Add weather map demo and documentation for custom marker functions Co-authored-by: gatopeich <[email protected]> * Add backward compatibility test demo Co-authored-by: gatopeich <[email protected]> * Remove dist folder changes - these are build artifacts for maintainers Co-authored-by: gatopeich <[email protected]> * 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] <[email protected]> Co-authored-by: gatopeich <[email protected]>
|
I polished the implementation and added access to customdata. |
2 participants
This pull request introduces support for custom markers via functions in Plotly.js scatter plots, allowing users to pass a function directly as the
marker.symbolproperty to define custom SVG marker shapes. The implementation includes updates to the drawing logic, comprehensive documentation, a demo HTML file, and new tests to ensure correct behavior. This feature provides a flexible and user-friendly way to extend marker capabilities beyond the built-in set.Custom Marker Function Support:
marker.symbolin scatter plots, enabling users to define custom SVG path markers directly without registration. The drawing logic is updated to handle both functions and traditional symbol identifiers throughout the rendering pipeline. [1] [2] [3] [4]Documentation and Examples:
CUSTOM_MARKER_FUNCTIONS.mdfile with detailed documentation, usage examples, function signatures, SVG path command explanations, and best practices for custom marker functions.devtools/custom_marker_demo.html) showcasing how to use custom marker functions in practice, with live examples and code snippets.Testing: