{tooltipFormat(xValue(d))}

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'; const AxisBottom = ({ xScale, innerHeight, tickFormat, tickOffset = 3 }) => xScale.ticks().map(tickValue => ( {tickFormat(tickValue)} )); const AxisLeft = ({ yScale, innerWidth, tickOffset = 3 }) => yScale.ticks().map(tickValue => ( {tickValue} )); const Marks = ({ data, xScale, yScale, xValue, yValue, colorScale, colorValue, tooltipFormat, circleRadius }) => data.map(d => ( {tooltipFormat(xValue(d))} )); const csvUrl = 'https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv'; const useData = () => { const [data, setData] = useState(null); useEffect(() => { const row = d => { d.sepal_length = +d.sepal_length; d.sepal_width = +d.sepal_width; d.petal_length = +d.petal_length; d.petal_width = +d.petal_width; return d; }; csv(csvUrl, row).then(setData); }, []); return data; }; const width = 960; const menuHeight = 80; const height = 500 - menuHeight; const margin = { top: 20, right: 30, bottom: 65, left: 90 }; const xAxisLabelOffset = 50; const yAxisLabelOffset = 45; 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' } ]; 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', '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','#BD2D28','#688BAB']); return ( <>

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

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

Untitled

Hsu0208