import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, max, format, extent, scaleOrdinal } from 'd3'; import { useData } from './useData'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; import { ColorLegend } from './ColorLegend'; const width = 960; const height = 500; const margin = { top: 20, right: 200, bottom: 65, left: 90 }; const xAxisLabelOffset = 50; const yAxisLabelOffset = 45; const fadeOpacity = 0.2 const App = () => { const data = useData(); const [hoveredValue, setHoveredValue] = useState(null); if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xValue = d => d.petal_length; const xAxisLabel = 'Petal Length'; const yValue = d => d.sepal_width; const yAxisLabel = 'Sepal Width'; const colorValue = d => d.species; const colorLegendLabel = 'Species'; const filteredData = data.filter(d => hoveredValue === colorValue(d)); const circleRadius = 7; const siFormat = format('.2s'); const xAxisTickFormat = tickValue => siFormat(tickValue).replace('G', 'B'); const yAxisTickFormat = tickValue => siFormat(tickValue).replace('G', 'B'); const xScale = scaleLinear() .domain(extent(data, xValue)) .range([0, innerWidth]) .nice(); const yScale = scaleLinear() .domain(extent(data, yValue)) .range([0, innerHeight]); const colorScale = scaleOrdinal () .domain(data.map(colorValue)) .range(['#E6842A', '#137B80', '#8E6C8A']); console.log(colorScale.domain()); return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);