Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

d47424da071b49d0b2ab1ce5a80c14f1

Shapes with SVG and CSS

1 star0🌍 Public
LLuda Shashua
Last edited Nov 4, 2020
Created on Nov 4, 2020

This example demonstrates population data for the world’s largest countries using rectangular shapes drawn as SVG elements, with each bar’s width representing the country’s population. The visualization uses D3 v5’s `csv` loader to parse the `data.csv` file and binds the parsed data to `rect` elements via `svg.selectAll('rect').data(data)`. The code also defines a separate `cars` dataset parsed from JSON, though it is not rendered. Styling is applied via CSS classes, including a `.lines` class that targets paths, while the React starter integrates the D3 logic within a component.

AI-generated description

React Starter code.