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/VemulaDowtyasriprasanth/d12747931b44af5f6f486da905f38580/raw/790c5d10ef57946dae10047045901e657fbf3716/ICE6%2520Prasanth%2520Solution" const width = 960; 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.Value = +d['PerMonthCost - Starter ($)']; d.Category = d.Zone; return d; }; csv(csvUrl, row).then(data => { setData(data.slice(1, 15)); }); }, []); 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]); const yScale = scaleBand() .domain(data.map((d) => d.Category)) .range([0, innerHeight]); const xScale = scaleLinear() .domain([0, max(data, (d) => d.Value)]) .range([0, innerWidth]); return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Final ICE6 submission

Prasanth