@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/src/components/topojson-map/index.ts

@@ -0,0 +1,436 @@
+import { Selection } from 'd3-selection'
+import { D3ZoomEvent, zoom, ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3-zoom'
+import { timeout } from 'd3-timer'
+import { geoPath, GeoProjection } from 'd3-geo'
+import { color } from 'd3-color'
+import { feature } from 'topojson-client'
+
+// Core
+import { ComponentCore } from 'core/component'
+import { MapGraphDataModel } from 'data-models/map-graph'
+
+// Utils
+import { clamp, getNumber, getString, isNumber } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { getColor, hexToBrightness } from 'utils/color'
+import { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
+
+// Types
+import { MapLink } from 'types/map'
+
+// Local Types
+import { MapData, MapFeature, MapPointLabelPosition } from './types'
+
+// Config
+import { TopoJSONMapConfig, TopoJSONMapConfigInterface } from './config'
+
+// Modules
+import { arc, getLonLat } from './utils'
+
+// Styles
+import * as s from './style'
+
+export class TopoJSONMap<
+  AreaDatum,
+  PointDatum = unknown,
+  LinkDatum = unknown,
+> extends ComponentCore<
+  MapData<AreaDatum, PointDatum, LinkDatum>,
+  TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum>,
+  TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>
+  > {
+  static selectors = s
+  config: TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum> = new TopoJSONMapConfig()
+  datamodel: MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> = new MapGraphDataModel()
+  g: Selection<SVGGElement, unknown, null, undefined>
+  private _firstRender = true
+  private _isResizing = false
+  private _initialScale: number = undefined
+  private _center: [number, number]
+  private _currentZoomLevel: number = undefined
+  private _transform: ZoomTransform
+  private _path = geoPath()
+  private _projection: GeoProjection
+  private _prevWidth: number
+  private _prevHeight: number
+  private _animFrameId: number
+
+  private _featureCollection: GeoJSON.FeatureCollection
+  private _zoomBehavior: ZoomBehavior<SVGGElement, unknown> = zoom()
+  private _backgroundRect = this.g.append('rect').attr('class', s.background)
+  private _featuresGroup = this.g.append('g').attr('class', s.features)
+  private _linksGroup = this.g.append('g').attr('class', s.links)
+  private _pointsGroup = this.g.append('g').attr('class', s.points)
+
+  events = {
+    [TopoJSONMap.selectors.point]: {},
+    [TopoJSONMap.selectors.feature]: {},
+  }
+
+  constructor (config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>, data?: MapData<AreaDatum, PointDatum, LinkDatum>) {
+    super()
+    this._zoomBehavior.on('zoom', this._onZoom.bind(this))
+
+    if (config) this.setConfig(config)
+    if (data) this.setData(data)
+
+    this.g.append('defs')
+      .append('filter')
+      .attr('id', 'heatmapFilter')
+      .html(`
+        <feGaussianBlur in="SourceGraphic" stdDeviation="${this.config.heatmapModeBlurStdDeviation}" color-interpolation-filters="sRGB" result="blur"></feGaussianBlur>
+        <feColorMatrix class="blurValues" in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -4"></feColorMatrix>
+      `)
+  }
+
+  setData (data: MapData<AreaDatum, PointDatum, LinkDatum>): void {
+    const { config } = this
+
+    this.datamodel.pointId = config.pointId
+    this.datamodel.linkSource = config.linkSource
+    this.datamodel.linkTarget = config.linkTarget
+    this.datamodel.data = data
+  }
+
+  setConfig (config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>): void {
+    super.setConfig(config)
+
+    const newProjection = this.config.projection
+    if (this._projection) {
+      newProjection.scale(this._projection.scale()).translate(this._projection.translate())
+    }
+    this._projection = newProjection
+  }
+
+  _render (customDuration?: number): void {
+    const { config } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    this._renderBackground()
+    this._renderMap(duration)
+    this._renderGroups(duration)
+    this._renderLinks(duration)
+    this._renderPoints(duration)
+
+    // When animation is running we need to temporary disable zoom behaviour
+    if (duration && !config.disableZoom) {
+      this.g.on('.zoom', null)
+      timeout(() => {
+        this.g.call(this._zoomBehavior)
+      }, duration)
+    }
+
+    // When zoom behaviour is active we assign the `draggable` class to show the grabbing cursor
+    this.g.classed('draggable', !config.disableZoom)
+    this._firstRender = false
+  }
+
+  _renderBackground (): void {
+    this._backgroundRect
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('transform', `translate(${-this.bleed.left}, ${-this.bleed.top})`)
+  }
+
+  _renderGroups (duration: number): void {
+    const transformString = this._transform.toString()
+    smartTransition(this._featuresGroup, duration)
+      .attr('transform', transformString)
+      .attr('stroke-width', 1 / this._currentZoomLevel)
+
+    smartTransition(this._linksGroup, duration)
+      .attr('transform', transformString)
+
+    smartTransition(this._pointsGroup, duration)
+      .attr('transform', transformString)
+  }
+
+  _renderMap (duration: number): void {
+    const { bleed, config, datamodel } = this
+
+    this.g.attr('transform', `translate(${bleed.left}, ${bleed.top})`)
+    const mapData: TopoJSON.Topology = config.topojson
+    const featureName = config.mapFeatureName
+    const featureObject = mapData?.objects?.[featureName]
+    if (!featureObject) return
+
+    this._featureCollection = feature(mapData, featureObject) as GeoJSON.FeatureCollection
+    const featureData = (this._featureCollection?.features ?? []) as MapFeature<AreaDatum>[]
+
+    if (this._firstRender) {
+      // Rendering the map for the first time.
+      this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
+      this._initialScale = this._projection.scale()
+      this._center = this._projection.translate()
+
+      if (config.mapFitToPoints) {
+        this._fitToPoints()
+      }
+
+      const zoomExtent = config.zoomExtent
+      this._zoomBehavior.scaleExtent([zoomExtent[0] * this._initialScale, zoomExtent[1] * this._initialScale])
+      this.setZoom(config.zoomFactor || 1)
+
+      if (!config.disableZoom) {
+        this.g.call(this._zoomBehavior)
+        this._applyZoom()
+      }
+
+      this._prevWidth = this._width
+      this._prevHeight = this._height
+    }
+
+    if (this._prevWidth !== this._width || this._prevHeight !== this._height) {
+      this._onResize()
+    }
+
+    this._path.projection(this._projection)
+
+    // Merge passed area data and map feature data
+    const areaData = datamodel.areas
+    areaData.forEach(a => {
+      const feature = featureData.find(f => f.id.toString() === getString(a, config.areaId).toString())
+      if (feature) feature.data = a
+      else if (this._firstRender) console.warn(`Can't find feature by area code ${getString(a, config.areaId)}`)
+    })
+
+    const features = this._featuresGroup
+      .selectAll<SVGPathElement, unknown>(`.${s.feature}`)
+      .data(featureData)
+
+    const featuresEnter = features.enter().append('path').attr('class', s.feature)
+    smartTransition(featuresEnter.merge(features), duration)
+      .attr('d', this._path)
+      .style('fill', (d, i) => d.data ? getColor(d.data, config.areaColor, i) : null)
+      .style('cursor', d => d.data ? getString(d.data, config.areaCursor) : null)
+    features.exit().remove()
+  }
+
+  _renderLinks (duration: number): void {
+    const { config, datamodel } = this
+    const links = datamodel.links
+
+    const edges = this._linksGroup
+      .selectAll<SVGPathElement, MapLink<PointDatum, LinkDatum>>(`.${s.link}`)
+      .data(links, (d, i) => getString(d, config.linkId, i))
+
+    const edgesEnter = edges.enter().append('path').attr('class', s.link)
+      .style('stroke-width', 0)
+
+    smartTransition(edgesEnter.merge(edges), duration)
+      .attr('d', link => {
+        const source = this._projection(getLonLat(link.source, config.longitude, config.latitude))
+        const target = this._projection(getLonLat(link.target, config.longitude, config.latitude))
+        return arc(source, target)
+      })
+      .style('stroke-width', link => getNumber(link, config.linkWidth) / this._currentZoomLevel)
+      .style('cursor', link => getString(link, config.linkCursor))
+      .style('stroke', (link, i) => getColor(link, config.linkColor, i))
+    edges.exit().remove()
+  }
+
+  _renderPoints (duration: number): void {
+    const { config, datamodel } = this
+    const pointData = datamodel.points
+
+    const points = this._pointsGroup
+      .selectAll<SVGGElement, PointDatum>(`.${s.point}`)
+      .data(pointData, (d, i) => getString(d, config.pointId, i))
+
+    // Enter
+    const pointsEnter = points.enter().append('g').attr('class', s.point)
+      .attr('transform', d => {
+        const pos = this._projection(getLonLat(d, config.longitude, config.latitude))
+        return `translate(${pos[0]},${pos[1]})`
+      })
+
+    pointsEnter.append('circle').attr('class', s.pointCircle)
+      .attr('r', 0)
+      .style('fill', (d, i) => getColor(d, config.pointColor, i))
+      .style('stroke-width', d => getNumber(d, config.pointStrokeWidth))
+
+    pointsEnter.append('text').attr('class', s.pointLabel)
+      .style('opacity', 0)
+
+    // Update
+    const pointsMerged = pointsEnter.merge(points)
+    smartTransition(pointsMerged, duration)
+      .attr('transform', d => {
+        const pos = this._projection(getLonLat(d, config.longitude, config.latitude))
+        return `translate(${pos[0]},${pos[1]})`
+      })
+      .style('cursor', d => getString(d, config.pointCursor))
+
+    smartTransition(pointsMerged.select(`.${s.pointCircle}`), duration)
+      .attr('r', d => getNumber(d, config.pointRadius) / this._currentZoomLevel)
+      .style('fill', (d, i) => getColor(d, config.pointColor, i))
+      .style('stroke', (d, i) => getColor(d, config.pointColor, i))
+      .style('stroke-width', d => getNumber(d, config.pointStrokeWidth) / this._currentZoomLevel)
+
+    const pointLabelsMerged = pointsMerged.select(`.${s.pointLabel}`)
+    pointLabelsMerged
+      .text(config.pointLabel ?? '')
+      .style('font-size', d => {
+        if (config.pointLabelPosition === MapPointLabelPosition.Bottom) {
+          return `calc(var(--vis-map-point-label-font-size) / ${this._currentZoomLevel}`
+        }
+        const pointDiameter = 2 * getNumber(d, config.pointRadius)
+        const pointLabelText = getString(d, config.pointLabel) || ''
+        const textLength = pointLabelText.length
+        const fontSize = 0.5 * pointDiameter / Math.pow(textLength, 0.4)
+        return clamp(fontSize, fontSize, 16)
+      })
+      .attr('y', d => {
+        if (config.pointLabelPosition === MapPointLabelPosition.Center) return null
+
+        const pointRadius = getNumber(d, config.pointRadius) / this._currentZoomLevel
+        return pointRadius
+      })
+      .attr('dy', config.pointLabelPosition === MapPointLabelPosition.Center ? '0.32em' : '1em')
+
+    smartTransition(pointLabelsMerged, duration)
+      .style('fill', (d, i) => {
+        if (config.pointLabelPosition === MapPointLabelPosition.Bottom) return null
+
+        const pointColor = getColor(d, config.pointColor, i)
+        const hex = color(isStringCSSVariable(pointColor) ? getCSSVariableValue(pointColor, this.element) : pointColor)?.hex()
+        if (!hex) return null
+
+        const brightness = hexToBrightness(hex)
+        return brightness > config.pointLabelTextBrightnessRatio ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)'
+      })
+      .style('opacity', 1)
+
+    // Exit
+    points.exit().remove()
+
+    // Heatmap
+    this._pointsGroup.style('filter', (config.heatmapMode && this._currentZoomLevel < config.heatmapModeZoomLevelThreshold) ? 'url(#heatmapFilter)' : null)
+    this._pointsGroup.selectAll(`.${s.pointLabel}`).style('display', (config.heatmapMode && (this._currentZoomLevel < config.heatmapModeZoomLevelThreshold)) ? 'none' : null)
+  }
+
+  _fitToPoints (points?: PointDatum[], pad = 0.1): void {
+    const { config, datamodel } = this
+    const pointData = points || datamodel.points
+    if (pointData.length === 0) return
+
+    const featureCollection = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'MultiPoint',
+          coordinates: pointData.map(p => {
+            return [
+              getNumber(p, d => getNumber(d, config.longitude)),
+              getNumber(p, d => getNumber(d, config.latitude)),
+            ]
+          }),
+        },
+      }],
+      geometries: [],
+    }
+
+    this._projection.fitExtent([
+      [this._width * pad, this._height * pad],
+      [this._width * (1 - pad), this._height * (1 - pad)],
+    ], featureCollection)
+
+    const maxScale = config.zoomExtent[1] * this._initialScale
+    if (this._projection.scale() > maxScale) this._projection.scale(maxScale)
+
+    this._applyZoom()
+  }
+
+  _applyZoom (): void {
+    const translate = this._center ?? this._projection.translate()
+    const scale = this._initialScale * this._currentZoomLevel
+    this.g.call(this._zoomBehavior.transform, zoomIdentity.translate(translate[0], translate[1]).scale(scale))
+  }
+
+  _onResize (): void {
+    this._isResizing = true
+    const prevTranslate = this._projection.translate()
+
+    this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
+    this._initialScale = this._projection.scale()
+    this._center = [
+      this._projection.translate()[0] * this._center[0] / prevTranslate[0],
+      this._projection.translate()[1] * this._center[1] / prevTranslate[1],
+    ]
+    this._applyZoom()
+
+    this._isResizing = false
+    this._prevWidth = this._width
+    this._prevHeight = this._height
+  }
+
+  _onZoom (event: D3ZoomEvent<any, any>): void {
+    if (this._firstRender) return // To prevent double render because of binding zoom behaviour
+    const isMouseEvent = event.sourceEvent !== undefined
+    const isExternalEvent = !event?.sourceEvent && !this._isResizing
+
+    window.cancelAnimationFrame(this._animFrameId)
+    this._animFrameId = window.requestAnimationFrame(this._onZoomHandler.bind(this, event.transform, isMouseEvent, isExternalEvent))
+
+    if (isMouseEvent) {
+      // Update the center coordinate so that the next call to _applyZoom()
+      // will zoom with respect to the current view
+      this._center = [event.transform.x, event.transform.y]
+    }
+    this._currentZoomLevel = (event?.transform.k / this._initialScale) || 1
+  }
+
+  _onZoomHandler (transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean): void {
+    const scale = transform.k / this._initialScale || 1
+    const center = this._projection.translate()
+
+    this._transform = zoomIdentity
+      .translate(transform.x - center[0] * scale, transform.y - center[1] * scale)
+      .scale(scale)
+
+    const customDuration = isExternalEvent
+      ? this.config.zoomDuration
+      : (isMouseEvent ? 0 : null)
+
+    // Call render functions that depend on this._transform
+    this._renderGroups(customDuration)
+    this._renderLinks(customDuration)
+    this._renderPoints(customDuration)
+  }
+
+  public zoomIn (increment = 0.5): void {
+    this.setZoom(this._currentZoomLevel + increment)
+  }
+
+  public zoomOut (increment = 0.5): void {
+    this.setZoom(this._currentZoomLevel - increment)
+  }
+
+  public setZoom (zoomLevel: number): void {
+    const { config } = this
+    this._currentZoomLevel = clamp(zoomLevel, config.zoomExtent[0], config.zoomExtent[1])
+    this._transform = zoomIdentity
+      .translate(this._center[0] * (1 - this._currentZoomLevel), this._center[1] * (1 - this._currentZoomLevel))
+      .scale(this._currentZoomLevel)
+    // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
+    // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
+    // that the zoom state has changed
+    this._applyZoom()
+  }
+
+  public fitView (): void {
+    this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
+    this._currentZoomLevel = (this._projection?.scale() / this._initialScale) || 1
+    this._center = this._projection.translate()
+    // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
+    // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
+    // that the zoom state has changed
+    this._applyZoom()
+  }
+
+  destroy (): void {
+    window.cancelAnimationFrame(this._animFrameId)
+  }
+}

package/{components/topojson-map/style.js → src/components/topojson-map/style.ts}

@@ -1,6 +1,6 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+export const root = css`
   label: topojson-map-component;
 
   &.draggable {
@@ -10,8 +10,9 @@ const root = css `
       cursor: -webkit-grabbing;
     }
   }
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-map-feature-color: #dce3eb;
     --vis-map-boundary-color: #ffffff;
@@ -37,29 +38,35 @@ const variables = injectGlobal `
     --vis-map-point-label-text-color-dark: var(--vis-dark-map-point-label-text-color-dark);
     --vis-map-point-label-text-color-light: var(--vis-dark-map-point-label-text-color-light);
   }
-`;
-const features = css `
+`
+
+export const features = css`
   label: features;
-`;
-const feature = css `
+`
+
+export const feature = css`
   label: feature;
   fill: var(--vis-map-feature-color);
   stroke: var(--vis-map-boundary-color);
   stroke-opacity: 0.5;
-`;
-const background = css `
+`
+
+export const background = css`
   label: background;
 
   fill-opacity: 0;
   pointer-events: all;
-`;
-const points = css `
+`
+
+export const points = css`
   label: points;
-`;
-const point = css `
+`
+
+export const point = css`
   label: point;
-`;
-const pointCircle = css `
+`
+
+export const pointCircle = css`
   label: point;
 
   stroke-opacity: 0.4;
@@ -68,8 +75,9 @@ const pointCircle = css `
   &:active {
     cursor: default;
   }
-`;
-const pointLabel = css `
+`
+
+export const pointLabel = css`
   label: label;
 
   text-anchor: middle;
@@ -80,11 +88,13 @@ const pointLabel = css `
   font-family: var(--vis-map-point-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-map-point-label-font-weight);
   fill: var(--vis-map-point-label-text-color-dark);
-`;
-const links = css `
+`
+
+export const links = css`
   label: links;
-`;
-const link = css `
+`
+
+export const link = css`
   label: link;
 
   fill: none;
@@ -94,7 +104,4 @@ const link = css `
   &:hover {
     stroke-opacity: .90;
   }
-`;
-
-export { background, feature, features, link, links, point, pointCircle, pointLabel, points, root, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/topojson-map/types.ts

@@ -0,0 +1,123 @@
+import { Feature, Geometry } from 'geojson'
+import {
+  GeoProjection,
+  geoMercator,
+  geoEquirectangular,
+  geoAzimuthalEqualArea,
+  geoAzimuthalEquidistant,
+  geoGnomonic,
+  geoOrthographic,
+  geoStereographic,
+  geoEqualEarth,
+  geoAlbersUsa,
+  geoAlbers,
+  geoConicConformal,
+  geoConicEqualArea,
+  geoConicEquidistant,
+  geoTransverseMercator,
+  geoNaturalEarth1,
+} from 'd3-geo'
+
+import {
+  geoBromley,
+  geoNaturalEarth2,
+  geoKavrayskiy7,
+  geoHufnagel,
+  geoFoucautSinusoidal,
+  geoFahey,
+  geoEckert1,
+  geoEckert3,
+  geoBoggs,
+  geoCylindricalStereographic,
+  geoCraster,
+  geoBaker,
+  geoArmadillo,
+  geoAitoff,
+  geoRobinson,
+} from 'd3-geo-projection'
+
+export type MapData<AreaDatum, PointDatum = unknown, LinkDatum = unknown> = {
+  areas?: AreaDatum[];
+  points?: PointDatum[];
+  links?: LinkDatum[] ;
+}
+
+export enum MapPointLabelPosition {
+  Center = 'center',
+  Bottom = 'bottom',
+}
+
+export type MapFeature<D> = Feature<Geometry> & { data: D }
+
+export enum MapProjectionKind {
+  // Projections form `d3-geo`
+  Mercator = 'Mercator',
+  Equirectangular = 'Equirectangular',
+  AzimuthalEqualArea = 'AzimuthalEqualArea',
+  AzimuthalEquidistant = 'AzimuthalEquidistant',
+  Gnomonic = 'Gnomonic',
+  Orthographic = 'Orthographic',
+  Stereographic = 'Stereographic',
+  EqualEarth = 'EqualEarth',
+  AlbersUsa = 'AlbersUsa',
+  Albers = 'Albers',
+  ConicConformal = 'ConicConformal',
+  ConicEqualArea = 'ConicEqualArea',
+  ConicEquidistant = 'ConicEquidistant',
+  TransverseMercator = 'TransverseMercator',
+  NaturalEarth1 = 'NaturalEarth1',
+
+  // Projections form `d3-geo-projection`
+  Bromley = 'Bromley',
+  NaturalEarth2 = 'NaturalEarth2',
+  Kavrayskiy7 = 'Kavrayskiy7',
+  Hufnagel = 'Hufnagel',
+  FoucautSinusoidal = 'FoucautSinusoidal',
+  Eckert1 = 'Eckert1',
+  Eckert3 = 'Eckert3',
+  Boggs = 'Boggs',
+  CylindricalStereographic = 'CylindricalStereographic',
+  Craster = 'Craster',
+  Baker = 'Baker',
+  Armadillo = 'Armadillo',
+  Aitoff = 'Aitoff',
+  Fahey = 'Fahey',
+  Robinson = 'Robinson',
+}
+
+export const MapProjection = {
+  // Projections form `d3-geo`
+  [MapProjectionKind.Mercator]: geoMercator,
+  [MapProjectionKind.Equirectangular]: geoEquirectangular,
+  [MapProjectionKind.AzimuthalEqualArea]: geoAzimuthalEqualArea,
+  [MapProjectionKind.AzimuthalEquidistant]: geoAzimuthalEquidistant,
+  [MapProjectionKind.Gnomonic]: geoGnomonic,
+  [MapProjectionKind.Orthographic]: geoOrthographic,
+  [MapProjectionKind.Stereographic]: geoStereographic,
+  [MapProjectionKind.EqualEarth]: geoEqualEarth,
+  [MapProjectionKind.AlbersUsa]: geoAlbersUsa,
+  [MapProjectionKind.Albers]: geoAlbers,
+  [MapProjectionKind.ConicConformal]: geoConicConformal,
+  [MapProjectionKind.ConicEqualArea]: geoConicEqualArea,
+  [MapProjectionKind.ConicEquidistant]: geoConicEquidistant,
+  [MapProjectionKind.TransverseMercator]: geoTransverseMercator,
+  [MapProjectionKind.NaturalEarth1]: geoNaturalEarth1,
+
+  // Projections form `d3-geo-projection`
+  [MapProjectionKind.Bromley]: geoBromley as () => GeoProjection,
+  [MapProjectionKind.NaturalEarth2]: geoNaturalEarth2 as () => GeoProjection,
+  [MapProjectionKind.Kavrayskiy7]: geoKavrayskiy7 as () => GeoProjection,
+  [MapProjectionKind.Hufnagel]: geoHufnagel as () => GeoProjection,
+  [MapProjectionKind.FoucautSinusoidal]: geoFoucautSinusoidal as () => GeoProjection,
+  [MapProjectionKind.Eckert1]: geoEckert1 as () => GeoProjection,
+  [MapProjectionKind.Eckert3]: geoEckert3 as () => GeoProjection,
+  [MapProjectionKind.Boggs]: geoBoggs as () => GeoProjection,
+  [MapProjectionKind.CylindricalStereographic]: geoCylindricalStereographic as () => GeoProjection,
+  [MapProjectionKind.Craster]: geoCraster as () => GeoProjection,
+  [MapProjectionKind.Baker]: geoBaker as () => GeoProjection,
+  [MapProjectionKind.Armadillo]: geoArmadillo as () => GeoProjection,
+  [MapProjectionKind.Aitoff]: geoAitoff as () => GeoProjection,
+  [MapProjectionKind.Fahey]: geoFahey as () => GeoProjection,
+  [MapProjectionKind.Robinson]: geoRobinson as () => GeoProjection,
+}
+

package/src/components/topojson-map/utils.ts

@@ -0,0 +1,29 @@
+import { getNumber } from 'utils/data'
+
+// Config
+import { NumericAccessor } from 'types/accessor'
+
+export function getLonLat<Datum> (d: Datum, pointLongitude: NumericAccessor<Datum>, pointLatitude: NumericAccessor<Datum>): [number, number] {
+  const lat = getNumber(d, pointLatitude)
+  const lon = getNumber(d, pointLongitude)
+  return [lon, lat]
+}
+
+export function arc (source?: number[], target?: number[], curvature?: number): string {
+  if (!target || !source) return 'M0,0,l0,0z'
+  const d = 3
+  const angleOffset = curvature || 0
+  const s = { x: source[0], y: source[1] }
+  const t = { x: target[0], y: target[1] }
+  const ds = { x: (t.x - s.x) / d, y: (t.y - s.y) / d }
+  const dt = { x: (s.x - t.x) / d, y: (s.y - t.y) / d }
+  let angle = 0.16667 * Math.PI * (1 + angleOffset)
+  if (s.x < t.x) angle = -angle
+  const cs = Math.cos(angle)
+  const ss = Math.sin(angle)
+  const ct = Math.cos(-angle)
+  const st = Math.sin(-angle)
+  const dds = { x: (cs * ds.x) - (ss * ds.y), y: (ss * ds.x) + (cs * ds.y) }
+  const ddt = { x: (ct * dt.x) - (st * dt.y), y: (st * dt.x) + (ct * dt.y) }
+  return `M${s.x},${s.y} C${s.x + dds.x},${s.y + dds.y} ${t.x + ddt.x},${t.y + ddt.y} ${t.x},${t.y}`
+}