index.js
import React, { useState, useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { csv, scaleLinear, 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';
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' },
{ 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';
