Examples / Custom Marks

Single SVG marks

You can use the CustomMark to place a single SVG element at a specific x/y coordinate.

<Plot grid>
    <CustomMark x={40} y={16}>
        {#snippet mark({ record })}
            <g
                transform="translate({record.x}, {record.y})">
                <circle
                    r={20}
                    opacity={0.2}
                    fill={record.fill} />
                <circle
                    r={80}
                    opacity={0.1}
                    fill={record.fill} />
            </g>
        {/snippet}
    </CustomMark>
    <Dot
        data={penguins}
        x="culmen_length_mm"
        y="culmen_depth_mm"
        fill="species" />
</Plot>
Last update at: 2025/10/05 22:03:08