import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { scaleBand, scaleLinear, max, axisBottom, axisLeft, select } from 'd3'; const csvData = 'https://gist.githubusercontent.com/manogna-vanama/449e2dad5b390c2c4075eee091135236/raw/a9552d896f47b2675f5382798bb619c58b427b83/cards.csv'; const height = 500; const width = 960; const margin = { top: 20, right: 20, bottom: 70, left: 100 }; const App = () => { const [data, setData] = useState([]); useEffect(() => { const rows = csvData.trim().split('\n').map(row => row.split(',')); const headers = rows.shift(); const parsedData = rows.map(row => { const obj = {}; row.forEach((value, index) => { obj[headers[index].replace(/"/g, '')] = isNaN(value) ? value.replace(/"/g, '') : +value; }); return obj; }); setData(parsedData); }, []); if (data.length === 0) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const yScale = scaleBand() .domain(data.map(d => d.face + ' of ' + d.suit)) .range([0, innerHeight]) .padding(0.1); const xScale = scaleLinear() .domain([0, max(data, d => d.value)]) .range([0, innerWidth]); return (

Fork of Akhil -vizhub assignment bat-scatter

M