import React, { useState, useCallback, useEffect, } from 'react'; import ReactDOM from 'react-dom'; import ReactDropdown from 'react-dropdown'; import { csv, scaleLinear, scaleOrdinal, max, format, extent } from 'd3'; import {useData} from './useData'; import {AxisBottom} from './AxisBottom'; import {AxisLeft} from './AxisLeft'; import {Marks} from './Marks'; import {Dropdown} from './Dropdown'; const menueHeight = 60 const width = 960; const height = 500 - menueHeight; const margin = {top:20, right:30, bottom:60, left:100}; const xAxisLabelOffset= 50; const yAxisLabelOffset= -40; 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:"species", label: "Species"}, ]; 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 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); const colorValue = d => d.species; if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const siFormat = format(".2s"); const xAxisTickFormat = tickValue => siFormat(tickValue).replace('G', ' Billion').replace('M', ' Million'); 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", "#8E6CBA"]); return ( <>

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

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

Fork of Scatterplot with Color Legend

nexus1058