Changing Markers - d3.carto

Changing markers with d3.carto.map.

In this example, the buttons show different markers used for the points, either simple SVG shapes, like the rectangle marker, or scaled circles, or images, or SVG paths either from an icon or from another D3 layout (a pie chart in this case). The Circle Marker button randomly selects one of several data attributes for each point and sizes the circle by that attribute, whereas the pie marker button creates a pie chart based off those attributes.

Any point layer added with d3.carto.layer.csv or d3.carto.layer.xyArray automatically creates SVG circle elements for each point. These reside in a g.marker that you can access and replace the contents of in the same way you would with any other d3 data visualization. In this example I use d3.selectAll because there's only one points layer, but each layer has a .g() function that gives you access to the parent g element of that layer, which you can then use to select some or all of the child g.marker elements of that specific layer and change, update or replace content.