import React, { useState, useCallback, useEffect, } from 'react'; import ReactDOM from 'react-dom'; import { csv, arc, pie, scaleBand, scaleLinear, max, format } from 'd3'; import { useData } from './useData' import { AxisBottom } from './AxisBottom' import { AxisLeft } from './AxisLeft' import { Marks } from './Marks' const width = 960; const height = 500; const margin = {top: 20, right:30, bottom:65, left:220 } const xAxisLabelOffset = 50 const App = () => { const data = useData() if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom const innerWidth = width - margin.left - margin.right const yValue = d => d.Country const xValue = d => d.Population const siFormat = format('.2s') const xAxisTickFormat = tickValue => siFormat(tickValue).replace('G', 'B') const yScale = scaleBand() .domain(data.map(yValue)) .range([0, innerHeight]) .paddingInner(0.1) const xScale = scaleLinear() .domain([0, max(data, xValue)]) .range([0, innerWidth]) return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Stylized bar chart

sophievanderhorst