🌍 Public
Viewing a saved revision (read-only)
beb90951e68f462cb57fe8cc665da586
Star Wars Home Planets
This example visualizes the home planets of Star Wars characters as a scatterplot, with each planet represented by a colored circle positioned by coordinates and sized by radius. The circles are semi-transparent, using a vibrant color palette against a light green background. The visualization is built with D3, using the `d3.select` and `selectAll` API with a `join` operation to bind data to SVG circle elements, setting attributes like `cx`, `cy`, `r`, and `fill` directly from the dataset.
AI-generated description<svg width="960" height="500">
<g transform="translate(80,80)">
<circle r="40" stroke="black" fill="white"></circle>
<text dx="-20">Naboo</text>
</g>
<g transform="translate(200,80)">
<circle r="60" stroke="black" fill="white"></circle>
<text dx="-20">Tatooine</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Coruscant</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Dathomir</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Alderaan</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Kamino</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Ryloth</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Kashyyyk</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Mirial</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Corellia</text>
</g>
</svg>