Skip to main content
100%

Shapes with SVG and CSS

✓ Published0🌍 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.

MIT Licensed

Similar vizzes