import React, { useState, useCallback, useEffect, } from 'react'; import ReactDOM from 'react-dom'; import { select, axisLeft, axisBottom, csv, arc, pie, scaleBand, scaleLinear, max, format, } from 'd3'; const csvUrl = 'https://gist.githubusercontent.com/kannamAmulyachowdary/df25613085fff04c49c870aa83b6c381/raw/24da57bd4cd751db8f0ec1c766d5c77074639cda/Document.csv'# const height = 500; const margin = { top: 20, right: 20, bottom: 50, left: 200, }; const App = () => { const [data, setData] = useState(null); useEffect(() => { const row = (d) => { d.Cost = +d['Cost Per Month - Basic ($)']; return d; }; csv(csvUrl, row).then((data) => { setData(data.slice(0, 12)); }); }, []); if (!data) { return

Loading...

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

Marks and Channels

kannamAmulyachowdary