How to use topojson-client - 10 common examples

.then(res => {
        if (res.status !== 200) return
        const world = res.data
        // Transform your paths with topojson however you want...
        const countries = feature(world, world.objects[Object.keys(world.objects)[0]]).features
        this.setState({ geographyPaths: countries })
      })
  }

const { data: countries } = this.props;
    const countriesByCode = _.keyBy( countries, "place_code" );
    if ( !world || !worldData ) {
      return;
    }
    const domNode = ReactDOM.findDOMNode( this );
    const mountNode = $( ".map .chart", domNode ).get( 0 );
    const svg = d3.select( mountNode ).select( "svg" );
    const g = svg.select( "g" );
    const maxScale = 100;
    const zoom = d3.zoom( )
      .scaleExtent( [0, maxScale] )
      .on( "zoom", zoomed );
    let active = d3.select( null );
    svg.select( "rect" ).on( "click", reset );
    let worldFeatures = _.map( topojson.feature( world, world.objects.countries ).features, f => {
      let newProperties = {};
      if ( f.id === "-99" ) return f;
      const worldCountry = worldData[f.id];
      if ( worldCountry ) {
        newProperties = Object.assign( newProperties, worldCountry );
        const country = countriesByCode[worldCountry.iso_a2];
        if ( country ) {
          newProperties = Object.assign( newProperties, country );
          newProperties.difference = ( newProperties.observations || 0 ) - ( newProperties.observations_last_year || 0 );
          newProperties.differencePercent = (
            ( newProperties.observations || 0 ) - ( newProperties.observations_last_year || 0 )
          ) / ( newProperties.observations_last_year || 0 ) * 100;
        } else {
          // // TEST
          // newProperties.observations = 100;
          // newProperties.observations_last_year = 50;

merged.type = 'Polygon';
    merged.arcs = merged.arcs[0];

    // Delete smallest and its chosen neighbor
    geometries.splice(neighborIndex, 1);
    geometries.shift();

    // Add new merged shape in sorted order
    geometries.splice(bisect(geometries, merged.area), 0, merged);
  }

  if (numPieces > geometries.length) {
    throw new RangeError("Can't collapse topology into " + numPieces + ' pieces.');
  }

  return feature(topology, topology.objects.triangles).features.map(f => {
    f.geometry.coordinates[0].pop();
    return f.geometry.coordinates[0];
  });
}

export function collapseTopology(topology, numPieces: number) {
  const geometries = topology.objects.triangles.geometries;
  const bisect = bisector(d => d.area).left;

  while (geometries.length > numPieces) {
    mergeSmallestFeature();
  }

  if (numPieces > geometries.length) {
    throw new RangeError("Can't collapse topology into " + numPieces + ' pieces.');
  }

  return feature(topology, topology.objects.triangles).features.map(f => {
    f.geometry.coordinates[0].pop();
    return f.geometry.coordinates[0];
  });

  function mergeSmallestFeature() {
    const smallest = geometries[0],
      neighborIndex = neighbors(geometries)[0][0],
      neighbor = geometries[neighborIndex],
      merged = mergeArcs(topology, [smallest, neighbor]);

    // MultiPolygon -> Polygon
    merged.area = smallest.area + neighbor.area;
    merged.type = 'Polygon';
    merged.arcs = merged.arcs[0];

    // Delete smallest and its chosen neighbor

export function collapseTopology(topology, numPieces) {
  const geometries = topology.objects.triangles.geometries,
    bisect = bisector(d => d.area).left;

  while (geometries.length > numPieces) {
    mergeSmallestFeature();
  }

  if (numPieces > geometries.length) {
    throw new RangeError(
      "Can't collapse topology into " + numPieces + " pieces."
    );
  }

  return feature(topology, topology.objects.triangles).features.map(f => {
    f.geometry.coordinates[0].pop();
    return f.geometry.coordinates[0];
  });

  function mergeSmallestFeature() {
    const smallest = geometries[0],
      neighborIndex = neighbors(geometries)[0][0],
      neighbor = geometries[neighborIndex],
      merged = mergeArcs(topology, [smallest, neighbor]);

    // MultiPolygon -> Polygon
    merged.area = smallest.area + neighbor.area;
    merged.type = "Polygon";
    merged.arcs = merged.arcs[0];

    // Delete smallest and its chosen neighbor

/* eslint consistent-return:"off" */
import React, { useReducer, useRef, useEffect } from 'react';
import useSpring from 'react-use/lib/useSpring';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import * as d3 from 'd3-geo';
import * as topojson from 'topojson-client';
import versor from 'versor';

import json from './countries.json';
import Versor from './versor';

const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
const themes = {
  light: {
    ocean: '#EDF4F4',
    graticule: '#EDF4F4',
    land: '#CCEAEA',
    activeLand: '#AFD3D3',
    border: '#AFD3D3',
    marker: '#4E6AF6',
    activeMarker: '#4E6AF6',
  },
  dark: {
    ocean: '#09233B',
    graticule: '#09233B',
    land: '#0D2344',
    activeLand: '#173159',
    border: '#89DDD9',

function getTopoJSONFeature (topology, object) {
    let feature = topojson.feature(topology, object);

    // Convert single feature to a feature collection
    if (feature.type === 'Feature') {
        feature = {
            type: 'FeatureCollection',
            features: [feature]
        };
    }
    return feature;
}

loadPaths() {
    const world = data
    const geographyPaths = feature(
      world,
      world.objects[Object.keys(world.objects)[0]]
    ).features
    this.setState({ geographyPaths })
  }

constructor() {
    super();
    this.state = {
      projection: null
    };

    this.worldData = feature(jsonData, jsonData.objects.land).features;
  }