import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { json, max, select, geoPath, geoNaturalEarth1, scaleSequential, interpolateYlOrRd } from 'd3'; import { feature } from 'topojson'; import { useData } from './useData'; const jsonUrl = "https://unpkg.com/world-atlas@2.0.2/countries-50m.json"; const dataUrl = "https://gist.githubusercontent.com/bindhureddy98/d67d262063360b4c306e2a45f30eac8c/raw/33d397fe522da6b6d1628e1ae3fd7cfdc9fad6ba/ice8.csv"; const countryUrl = "https://gist.githubusercontent.com/bindhureddy98/e03076e77582ed16b91a55e592018a4e/raw/20adc48fb7014bc8b5068e6f91cbc0e8f5391430/ice8_Contry.csv"; const width = 900; const height = 450; const selectedYear = 2019; const App = () => { const [atlasData, setAtlasData] = useState(null); const data = useData(dataUrl); const codes = useData(countryUrl); useEffect(() => { json(jsonUrl).then(topojsonData => { const { countries } = topojsonData.objects; setAtlasData(feature(topojsonData, countries)); }); }, []); if (!atlasData || !data || !codes) { return

; } const codeMap = new Map(); codes.forEach(code => codeMap.set(code['country-code'], code['alpha-3'])); const newData = data.filter(d => +d.Year === selectedYear); const dataMap = new Map(); newData.forEach(country => dataMap.set(country.Code, country)); const colorValue = d => d['Deaths - Brain and central nervous system cancer - Sex: Both - Age: All Ages (Number)']; const colorScale = scaleSequential(interpolateYlOrRd).domain([0, max(newData, colorValue)]); const maxValue = +max(newData, colorValue); let legendDomain = []; for(let i=0; i <= maxValue; i += parseInt(maxValue/5)) { legendDomain.push(i); } console.log(legendDomain); const projection = geoNaturalEarth1().scale(width / 1.3 / Math.PI).translate([width/2, height/2]); const path = geoPath(projection); return ( <>

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

Fork of D3: GeoEarth

bindhureddy98