Activity6_Task1
This example visualizes the 2020 population estimates for 30 countries using a horizontal bar chart rendered as SVG in React. Population values are shown on the x-axis via a linear scale, with countries listed on the y-axis using a band scale. The code employs D3 v5 functions like `csv`, `scaleLinear`, `scaleBand`, and `max` through `useData` to load and process data from a GitHub CSV file. Axis components and bars are built with custom React components, and hover tooltips display formatted population values using the `format` API.
AI-generated descriptionimport React from 'react';
export const Marks = ({ data, xScale, yScale, xValue, yValue, tooltipFormat, }) => ( <g className="marks"> {data.map((d) => ( <rect className="mark" key={yValue(d)} x={0} y={yScale(yValue(d))} width={xScale(xValue(d))} height={yScale.bandwidth()} > <title>{tooltipFormat(xValue(d))}</title> </rect> ))} </g> );