import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleBand, scaleLinear, max, format, extent, count } 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'; const width = 960; const menuHeight = 80; const height = 500 - menuHeight; const margin = { top: 20, right: 30, bottom: 65, left: 375 }; const xAxisLabelOffset = 50; const attributesEnroll = [ {value: 'Total', label: 'All Categories'}, {value: 'Over 40,000', label: 'Over 40,000'}, {value: '30,001 – 40,000', label: '30,001 – 40,000'}, {value: '20,001 – 30,000', label: '20,001 – 30,000'}, {value: '10,001 – 20,000', label: '10,001 – 20,000'}, {value: '5,001 – 10,000', label: '5,001 – 10,000'}, {value: '2,501 – 5,000', label: '2,501 – 5,000'}, {value: '1,001 – 2,500', label: '1,001 – 2,500'}, {value: '501 – 1,000', label: '501 – 1,000'}, {value: '251 – 500', label: '251 – 500'}, {value: 'Under 250', label: 'Under 250'}, ]; const attributesCat = [ {value: 'Total', label: 'All Categories'}, {value: 'R1', label: 'R1'}, {value: 'R2', label: 'R2'}, {value: 'R3', label: 'R3'}, {value: 'M1', label: 'M1'}, {value: 'M2', label: 'M2'}, {value: 'M3', label: 'M3'}, {value: 'Other', label: 'Other'}, ]; const attributesType = [ {value: 'Total', label: 'All Categories'}, {value: 'Private', label: 'Private'}, {value: 'Public', label: 'Public'}, ]; const App = () => { const data = useData(); const initialXAttribute = 'Total'; const [xAttribute, setXAttribute] = useState(initialXAttribute); //Need to insert the count calculation here to get the right xValue //Just trying to use the count function, but it's not working //const newxValue = d3.count(data, d => d.Enrollment) var counts = {}; for (var i=0; i d[xAttribute]; if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const yValue = d => d['Office Type']; const siFormat = format('d'); const xAxisTickFormat = tickValue => siFormat(tickValue); const yScale = scaleBand() .domain(data.map(yValue)) .range([0, innerHeight]) .paddingInner(0.15); const xScale = scaleLinear() .domain([0, 82]) .range([0, innerWidth]); return ( <>

Enrollment: setXAttribute(value)} /> Classification: setXAttribute(value)} /> Public/Private: setXAttribute(value)} />

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

NACRO Membership by Office Type with Menus

JCarpenter-WPI