marco-irene

@marco-irene·2 public vizzes

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, using a dataset from the United Nations World Population Prospects 2019. Each bar’s length encodes the population value, with a tooltip on hover showing the formatted figure. The visualization is built with D3 v5’s `scaleBand` and `scaleLinear`, rendered as SVG within a React application using `ReactDOM`. The code also uses `format` for tick labels and `csv` to load the data, with custom axis components and Poppins typography for styling.

Nov 26, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart renders as SVG via React, with D3’s `scaleBand` and `scaleLinear` computing the bar positions, while custom React components draw the axis ticks and labels. Axis lines and text are generated manually using `xScale.ticks()` and `yScale.domain()`, without relying on D3’s axis component. The code loads CSV data with `d3.csv` and manages state through React hooks.

Nov 26, 2022