Fork of Axes with React & D3

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart labeled with axes. It uses React hooks (useState, useEffect) to fetch and load CSV data from the United Nations World Population Prospects 2019, then renders bars via SVG rectangles. D3’s scaleBand and scaleLinear position the bars, while manually generated ticks and labels create the x and y axes without d3.axis. The chart updates after loading, with React managing the component state and D3 handling the data scaling and formatting.

NNick Hu

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization renders as an SVG with both x- and y-axes, where the x-axis uses linear scaling and the y-axis uses band scaling. Built with React and D3 v5, the code employs `scaleLinear`, `scaleBand`, `max`, and `csv` to load and process the data, then manually generates axis ticks and gridlines as SVG elements. React state management handles the asynchronous data loading and conditional rendering.

Ppinlin0816157

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, with population values from the United Nations World Population Prospects 2019. The visualization shows a basic bar chart with axes rendered using React and D3 v5. The code uses `d3.csv` for loading data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and manually renders axis ticks and labels as SVG elements. React manages the chart's state and rendering, while D3 handles data loading and scaling.

Ddsibi

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart, using React to render SVG elements and D3 (v5) for scales and data loading. The `xScale` and `yScale` are created with `scaleLinear` and `scaleBand`, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` function, and is sliced to the first ten rows for display.

Jjth500

Fork of Axes with React & D3

This example shows the top 10 most populous countries as a bar chart with manually drawn axes, rendered as SVG. The code uses React hooks (useState and useEffect) to fetch and load CSV data from the United Nations World Population Prospects 2019 via d3.csv, then scales the bars with d3.scaleBand and d3.scaleLinear. Axes are constructed from xScale.ticks() and yScale.domain() to render gridlines, tick labels, and values. The visualization is purely declarative, with React managing the SVG elements and D3 handling data parsing and scales.

AAllen Wong

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries as a horizontal bar chart with axes, using React for component structure and D3 for data loading and scales. The chart displays population values from the United Nations World Population Prospects 2019 dataset on the x-axis, while country names appear on the y-axis. The code uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to process data and position bars, with tick marks and labels generated manually via `xScale.ticks()`. All elements are rendered as SVG through React’s declarative JSX, with margins applied via a transform group.

Mmedi11

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart with custom axes. It uses React hooks (useState, useEffect, and useCallback) to load data from the United Nations World Population Prospects 2019 via d3.csv, then renders SVG bars and axes. The chart builds axes manually with d3.scaleBand and d3.scaleLinear, using d3.ticks for x-axis tick values and computed positions for y-axis labels, rather than using d3.axisBottom or d3.axisLeft.

SSophia Chiao

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 visualization renders as an SVG and combines React for component management with D3’s `scaleBand` and `scaleLinear` for axes and bars, while D3’s `csv` fetches the data. Axes are drawn manually with SVG elements, populating ticks and labels through D3’s scale methods, all within a React app that loads data asynchronously.

SShengjie Yang