import React, { useState, useCallback, useEffect, } from 'react'; import ReactDOM from 'react-dom'; import ReactDropdown from 'react-dropdown'; import { csv, scaleLinear, scaleOrdinal, extent, format } 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 menuHeight = 80; const height = 500 - menuHeight; const margin = { top: 20, right: 200, bottom: 70, 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; const colorLegendLabel = 'Species' const circleRadius = 7; 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', '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() // FIXME this finds unique values in column, but you alread have this info .domain(data.map(colorValue)) .range(["#E6842A", "#137B80", "#8E6C8A"]); return ( <>

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

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

Scatter plot and color legend

Elliot Hill