SVG basic mapping

You map between an element in an SVG and a value in a dataset by adding the value from the dataset as a new attribute called data-cv-key for the corresponding region in the SVG.

The behavior for other SVG elements is undefined.

The following SVG file does not have the data-cv-key attribute set for the circles:

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="10" cy="10" fill="#cd5c5c" r="10"/>
		<circle cx="30" cy="10" fill="#fa8072" r="10"/>
		<circle cx="50" cy="10" fill="#e9967a" r="10"/>
		<circle cx="70" cy="10" fill="#ffa07a" r="10"/>
		<circle cx="90" cy="10" fill="#dc143c" r="10"/>
	</g>
	<g>
		<circle cx="70" cy="30" fill="#adff2f" r="10"/>
		<circle cx="10" cy="30" fill="#ff0000" r="10"/>
		<circle cx="30" cy="30" fill="#b22222" r="10"/>
		<circle cx="50" cy="30" fill="#8b0000" r="10"/>
	</g>
</svg>

If you would load this visualization, it would display as follows. Mapping to data is not possible.

If you add the data-cv-key attribute to the SVG, then you can map data to the circles in the SVG.

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle data-cv-key="A2" cx="10" cy="10" fill="#cd5c5c" r="10"/>
		<circle data-cv-key="A3" cx="30" cy="10" fill="#fa8072" r="10"/>
		<circle data-cv-key="A4" cx="50" cy="10" fill="#e9967a" r="10"/>
		<circle data-cv-key="A5" cx="70" cy="10" fill="#ffa07a" r="10"/>
		<circle data-cv-key="B2" cx="90" cy="10" fill="#dc143c" r="10"/>
	</g>
	<g>
		<circle data-cv-key="B3" cx="70" cy="30" fill="#adff2f" r="10"/>
		<circle data-cv-key="B4" cx="10" cy="30" fill="#ff0000" r="10"/>
		<circle data-cv-key="B5" cx="30" cy="30" fill="#b22222" r="10"/>
		<circle data-cv-key="D1" cx="50" cy="30" fill="#8b0000" r="10"/>
	</g>
</svg>

And the following data:

If you use this SVG and drag ref to the Locations data slot and cat to the Location color data slot, then the color of the circles is mapped with the cat data.