index.js
import React, {
useState,
useCallback,
useEffect,
} from 'react';
import ReactDOM from 'react-dom';
import { csv, scaleBand, scaleLinear, max } from 'd3';
const csvUrl =
'https://gist.githubusercontent.com/kalmdown/8fe908904184d708e9a6962e3f9fac3b/raw/UN_Population_2020.csv';
const width = 960;
const height = 500;
const margin = { top: 20, right: 20, bottom: 20, left: 100 };
const App = () => {
const [data, setData] = useState(null);
useEffect(() => {
const row = (d) => {
d.Population = +d['2020'];
return d;
};
csv(csvUrl, row).then((data) => {
setData(data.slice(0, 10));
});
}, []);
if (!data) {
return <pre>'Loading...'</pre>;
}
innerHeight = height - margin.top - margin.bottom;
innerWidth = width - margin.left - margin.right;
const yScale = scaleBand()
