import React, { useState, useCallback, useEffect,} from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, max, format, extent} 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: 80, left: 220, }; const xAxisLabelOffset = 50; const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xValue = d => d.sepal_length const yValue = d => d.sepal_width const siFormat = format(".2s") const xAxisTickFormat = tickValue => siFormat(tickValue).replace('G','B'); const App = () => { const data = useData(); if (!data) { return

Loading...

; } console.log(data[0]); const xScale = scaleLinear() .domain(extent(data,xValue)) .range([0, innerWidth]); const yScale = scaleLinear() .domain(extent(data,yValue)) .range([0, innerHeight]); return ( ); }; const rootElement = document.getElementById( 'root' ); ReactDOM.render(, rootElement); // To compute the arcs manually (without d3.pie): // data.map((d, i) => ( // // ))

ScatterChart2

antJesus