import { select, csv, scaleLinear, extent, axisLeft, axisBottom, format, max, scaleOrdinal } from 'd3'; import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { useData } from './0713330_useData'; import ReactDropdown from 'react-dropdown'; import { AxisBottom } from './0713330_AxisBottom'; import { AxisLeft } from './0713330_AxisLeft'; import { Marks } from './0713330_Marks'; import { ColorLegend } from './0713330_ColorLegend'; const width = 960; const height = 400 ; const margin = { top: 20, right: 200, bottom: 65, left: 90 }; const xAxisLabelOffset = 50; const yAxisLabelOffset = 45; const fadeOpacity = 0.2; const attributes = [ { value: 'sepal length', label: 'Sepal Length' }, { value: 'sepal width', label: 'Sepal Width' }, { value: 'petal length', label: 'Petal Length' }, { value: 'petal width', label: 'Petal Width' }, // { value: 'class', label: 'class' } ]; const getLabel = value => { for (let i = 0; i < attributes.length; i++) { if (attributes[i].value === value) { return attributes[i].label; } } }; const App = () => { const data = useData(); const [hoveredValue, setHoveredValue] = useState(null); const initialXAttribute = 'petal length'; const [xAttribute, setXAttribute] = useState(initialXAttribute); const xValue = d => d[xAttribute]; const xAxisLabel = getLabel(xAttribute); const initialYAttribute = 'sepal width'; const [yAttribute, setYAttribute] = useState(initialYAttribute); const yValue = d => d[yAttribute]; const yAxisLabel = getLabel(yAttribute); 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['class']; const colorLegendLabel = 'class'; const filteredData = data.filter(d => hoveredValue === colorValue(d)); const circleRadius = 7; const siFormat = format('.2s'); const xAxisTickFormat = 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', '#7FFF00', '#1E90FF']); return ( <>

X setXAttribute(value)} /> Y setYAttribute(value)} />

); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Untitled

The-World-Muda