import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, scaleOrdinal, max, format, extent } from 'd3'; import ReactDropdown from 'react-dropdown'; import { useData } from './useData'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; import { Dropdown } from './Dropdown'; import { ColorLegend } from './ColorLegend'; const width = 960; const menuHeight = 82; const height = 500 - menuHeight; const margin = { top: 20, right: 300, bottom: 65, left: 90 }; 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 => { // .find() is not compatible with all browsers, use this: 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); if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const colorValue = d => d.species; const siFormat = format('.2s'); const xAxisTickFormat = (tickValue) => siFormat(tickValue).replace('G', 'B'); const xScale = scaleLinear() .domain(extent(data, xValue)) // Same as [min(data, xValue), max(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"]); return ( <>

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

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

Fork of Scatter Plot with Color, Legend and Menus

Sonja Ek