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/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv'; const width = 960; const height = 500; const margin = { top: 20, right: 20, bottom: 20, left: 120 }; 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

Loading...

; } console.log(data[0]); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.right - margin.left; const yScale = scaleBand() .domain(data.map((d) => d.Country)) .range([0, innerHeight]); const xScale = scaleLinear() .domain([0, max(data, (d) => d.Population)]) .range([0, innerWidth]); return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Mergins and Axes

hung2606