import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, arc, pie, scaleBand, scaleLinear, max } from 'd3'; // Think like computer. // How computer stores the values! const csvUrl = 'https://raw.githubusercontent.com/eschnou/covid19-be/master/covid19-belgium.csv'; const const height = 500; const width = 960; const margin = { top: 50, bottom: 80, left: 200, right: 50 }; const innerWidth = width - margin.right - margin.left; const innerHeight = height - margin.top - margin.bottom; const App = () => { const [data, setData] = useState(null); useEffect(() => { const row = (d) => { d.punishment = Math.floor(+d[['Punishment for Rape']]); return d; }; csv(csvUrl, row).then(setData); }, []); if (!data) { return <>Not loaded; } console.log(data[0]); const yScale = scaleBand() .domain(data.map((d) => d.State)) .range([0, innerHeight]); //console.log('yScale', yScale.domain()); // console.log('bandwidth', yScale.bandwidth()); const xScale = scaleLinear() .domain([0, max(data, (d) => d.punishment)]) .range([0, innerWidth]); const tickValue = xScale.ticks(); console.log('ticks', tickValue); return ( ); }; ReactDOM.render(, document.getElementById('root'));

Belgium corona data

Nita