import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import ReactDropdown from 'react-dropdown'; import {max,scaleSqrt } from 'd3'; import { useDataMap } from './useDataMap'; import { useDataViews } from './useDataViews'; import { Marks } from './Marks'; import {Dropdown} from './Dropdown'; const width = 960; const height = 500; const attributes = [ { value: 'TotalViews', label: 'All' }, { value: 'Biology', label: 'Biology' }, { value: 'Circuits1', label: 'Circuits1' }, { value: 'Circuits2', label: 'Circuits2' }, { value: 'CS1-H', label: 'CS1-H' }, { value: 'CS1-MIT', label: 'CS1-MIT' }, { value: 'CS2-MIT', label: 'CS2-MIT' }, { value: 'E&M', label: 'E&M' }, { value: 'HealthEnv', label: 'HealthEnv' }, { value: 'HealthStat', label: 'HealthStat' }, { value: 'MechRev', label: 'MechRev' }, { value: 'Poverty', label: 'Poverty' }, { value: 'SSChem1', label: 'SSChem1' }, { value: 'SSchem2', label: 'SSchem2' }, { value: 'Structures', label: 'Structures' }, ] const initialValue = 'all'; const getLabel = value => { for (let i = 0; i < attributes.length; i++) { if (attributes[i].value === value) { return attributes[i].label; }; const App = () => { const mapData = useDataMap(); const viewData = useDataViews(); const initialAttributes = 'All' if (!useDataMap||!useDataViews) { return

Loading...

; } const lng = d => d.Lng; const lat = d => d.Lat; const country = d => d.Countries; const views = d => d.TotalViews; const sizeValue = d => d.views; const maxRadius = 20; const sizeScale = scaleSqrt() .domain([0, max(viewData, sizeValue)]) .range([0, maxRadius]); return ( <>

Choose by Course: setSelectedAttributes(value)} />

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

Tweaking WenLei Cao's MA Safety Map

sophburke