Beginning component used to add in transitions.

beginning-map.txt

import React, { FC, useLayoutEffect, useCallback } from 'react';
import * as d3 from 'd3';
import * as topojson from 'topojson';
import * as statesMap from '../../data/states-albers-10m.json';
import * as cities from '../../data/us-cities.json';

export const USMapRotate: FC = () => {

    const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
    const path = d3.geoPath();
    //@ts-ignore
    const us = statesMap.default;
    //@ts-ignore
    const data = cities.default;

    const mapWidth = 975;
    const mapHeight = 610;

    const map = <svg viewBox={`0 0 ${mapWidth} ${mapHeight}`}>
        <path fill='#ddd' d={`${path(topojson.feature(us, us.objects.nation))}`}></path>
        <path fill='none' stroke='#fff' strokeLinejoin='round' strokeLinecap='round' d={`${path(topojson.mesh(us, us.objects.states, (a, b) => a !== b))}`}></path>
        <g id='parentG' textAnchor='middle' fontFamily='sans-serif' fontSize='10' style={{ position: 'relative' }}>
            {
                //@ts-ignore
                data.map(({ capital, lat, long }, index, array) => {
                    const projected = projection([long, lat]);
                    const projectedX = projected ? projected[0] : 0;
                    const projectedY = projected ? projected[1] : 0;

                    return (
                        projected ? <g
                            transform={
                                `translate(${projected.join()})`
                            }
                        >
                            <defs>
                                <radialGradient id='grad1' >
                                    <stop offset='10%' stopColor='red' stopOpacity={.8} />
                                    <stop offset='50%' stopColor='yellow' stopOpacity={.5} />
                                    <stop offset='400%' stopColor='white' stopOpacity={.8} />
                                </radialGradient>
                            </defs>
                            <circle r='8' fill='url(#grad1)' ></circle>
                            <text y='-6'>{capital}</text>
                        </g>
                            : null
                    )
                }
                )
            }
        </g>
    </svg>

    return <div style={{ width: '100%', height: '100%' }}>{map}</div>
}