@mbostock Sometimes I design custom symbols in SVG typically using Inkscape (here is an example: https://resources.cisnet.cancer.gov/projects/#crcr/uspstf/explorer ). I’d like to add some symbols to extend the ones included in d3.symbol (e.g. https://github.com/d3/d3-shape/blob/master/src/symbol/cro…

Hi john-clarke, I’ve been using the symbol tag. It’s a pretty easy way to cut and paste custom paths. But it doesn’t use the d3.shape library. Here’s an example. [image] Scatterplot with Symbols An Observable notebook by bchoatejr.

I agree with @bchoatejr ’s recommendation. Seems like a good use of the SVG Symbol and Use elements. d3.symbol would be more appropriate if you wanted to ensure that the visual weight of your symbols for a given value (when using graduated symbols) is comparable. If you’re using fixed-size symbols i…

Thank you @mbostock and @bchoatejr . This answers my question.

2+ years later, and this approach still holds water - thanks @bchoatejr for sharing this! @mbostock , do you have any sense of if/when performance within observable takes a hit with this approach? Is it in the hundreds, thousands of elements rendered? Is this an impossible question?

How to create custom symbols from existing SVG path

Help

Topic		Replies	Views
Custom symbols in Plot Help	5	261	July 4, 2024
Possible to draw a triangle chart instead of bars with D3? Help	1	435	July 12, 2021
Positioning tooltip on chart with symbols? Help	1	291	February 2, 2022
Adding path lines to SVG export Help	2	164	January 5, 2024
Setting CSS Custom Properties with d3 on each element Help	3	2042	May 9, 2022

How to create custom symbols from existing SVG path

Related topics