Skip to main content
100%

Rendering Data with React and D3(Bar Chart)

✓ Published1🌍 Public
AAleksandra Timofejeva
Last edited Jul 4, 2021
Created on Jul 3, 2021

This example demonstrates a horizontal bar chart that displays population data for ten countries from the UN Population 2019 dataset, using React components to render SVG marks and axes. The `Marks.js` file generates `<rect>` elements with titles for tooltips, while separate axis components handle tick rendering. The visualization leverages D3 v7's `scaleBand` and `scaleLinear` for scaling, with data loaded asynchronously via a custom `useData` hook that fetches and parses the CSV. Styling applies a teal color to bars and custom fonts, though an unused `handleMouseMove` function logs coordinates without affecting the chart.

AI-generated description

Pathetic Bar Chart

MIT Licensed

Similar vizzes