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';
// loading data using url
const csvUrl =https://gist.githubusercontent.com/Nikitha123171/8c9e355889a5f05b184c3de4cbbb4d60/raw/4402291031a78d14b94c9f54f3cea332b066f9d9/ICE%25206%2520Dataset.csv
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.Meta_score = +d['Meta_score'];
return d;
};
csv(csvUrl, row).then(data => {
setData(data.slice(0, 15));
});
}, []);
if (!data) {
return Loading...
;
}
const innerHeight = height - margin.top - margin.bottom -100;
const innerWidth = width - margin.left - margin.right - 50;
const yScale = scaleBand()
.domain(data.map(d => d.Series_Title))
.range([0, innerHeight]);
const xScale = scaleLinear()
.domain([0, max(data, d => d.Meta_score)])
.range([0, innerWidth]);
return (
);
};
const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);