paulobunga/gooymde.markdown

## gooymde.markdown

      
    Raw
  

              gooymde.markdown
            
          
    gOOymdE

A Pen by Laura-Annabel Tombs on CodePen.
License.

  
## index.html
<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/babel-standalone"></script>

  <script src="//unpkg.com/d3"></script>

  <script src="//unpkg.com/react-globe.gl"></script>
  <!--<script src="../../dist/react-globe.gl.js"></script>-->
</head>

<body>
<div id="globeViz"></div>

<script type="text/jsx">
  const { useState, useEffect, useMemo } = React;
  const World = () => {
    const [countries, setCountries] = useState({ features: []});
    const [hoverD, setHoverD] = useState();
    useEffect(() => {
      // load data
      fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(setCountries);
    }, []);
    const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
    // GDP per capita (avoiding countries with small pop)
    const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
    const maxVal = useMemo(
      () => Math.max(...countries.features.map(getVal)),
      [countries]
    );
    colorScale.domain([0, maxVal]);
    return <Globe
      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
      polygonsData={countries.features}
      polygonAltitude={d => d === hoverD ? 0.12 : 0.06}
      polygonCapColor={d => d === hoverD ? 'steelblue' : colorScale(getVal(d))}
      polygonSideColor={() => 'rgba(0, 100, 0, 0.15)'}
      polygonStrokeColor={() => '#111'}
      polygonLabel={({ properties: d }) => `
        <b>${d.ADMIN} (${d.ISO_A2}):</b> <br />
        GDP: <i>${d.GDP_MD_EST}</i> M$<br/>
        Population: <i>${d.POP_EST}</i>
      `}
      onPolygonHover={setHoverD}
      polygonsTransitionDuration={300}
    />;
  };
  ReactDOM.render(
    <World />,
    document.getElementById('globeViz')
  );
</script>
</body>

## style.css
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
}
	<head>
	<style> body { margin: 0; } </style>

	<script src="//unpkg.com/react@16/umd/react.production.min.js"></script>
	<script src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script src="//unpkg.com/babel-standalone"></script>

	<script src="//unpkg.com/d3"></script>

	<script src="//unpkg.com/react-globe.gl"></script>
	<!--<script src="../../dist/react-globe.gl.js"></script>-->
	</head>

	<body>
	<div id="globeViz"></div>

	<script type="text/jsx">
	const { useState, useEffect, useMemo } = React;
	const World = () => {
	const [countries, setCountries] = useState({ features: []});
	const [hoverD, setHoverD] = useState();
	useEffect(() => {
	// load data
	fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(setCountries);
	}, []);
	const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
	// GDP per capita (avoiding countries with small pop)
	const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
	const maxVal = useMemo(
	() => Math.max(...countries.features.map(getVal)),
	[countries]
	);
	colorScale.domain([0, maxVal]);
	return <Globe
	globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
	polygonsData={countries.features}
	polygonAltitude={d => d === hoverD ? 0.12 : 0.06}
	polygonCapColor={d => d === hoverD ? 'steelblue' : colorScale(getVal(d))}
	polygonSideColor={() => 'rgba(0, 100, 0, 0.15)'}
	polygonStrokeColor={() => '#111'}
	polygonLabel={({ properties: d }) => `
	<b>${d.ADMIN} (${d.ISO_A2}):</b> <br />
	GDP: <i>${d.GDP_MD_EST}</i> M$<br/>
	Population: <i>${d.POP_EST}</i>
	`}
	onPolygonHover={setHoverD}
	polygonsTransitionDuration={300}
	/>;
	};
	ReactDOM.render(
	<World />,
	document.getElementById('globeViz')
	);
	</script>
	</body>
	body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	overflow: hidden;
	}