import React, { useState, useEffect, useCallback, } from 'react'; import ReactDOM from 'react-dom'; import { csv, extent, scaleLinear, max, format, } from 'd3'; import { useData } from './useData'; import { AxisBottom } from './AxisBottom.js'; import { AxisLeft } from './AxisLeft.js'; import { Marks } from './Marks.js'; import 'styles.css'; const App = () => { const data = useData(); console.log(data); const width = 960; const height = 500; const margin = { top: 20, right: 40, left: 80, bottom: 100, }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; if (!data) { return

; } const xValue = (d) => d.petal_length; const xAxisLabel = 'Petal Length'; const xAxisLabelOffset = innerHeight + 60; const yValue = (d) => d.sepal_width; const yAxisLabel = 'Sepal Width'; const yAxisLabelOffset = -40; const xScale = scaleLinear() .domain(extent(data, xValue)) .range([0, innerWidth]) .nice(); const yScale = scaleLinear() .domain(extent(data, yValue)) .range([0, innerHeight]); const siFormat = format('.2s'); const xAxisTickFormat = (tickValue) => siFormat(tickValue).replace('G', 'B'); return ( ); }; const rootElement = document.getElementById( 'root' ); ReactDOM.render(, rootElement);

scatterplot

Blake McCarty