# d3-maps

> Simple SVG maps powered by D3

## Table of Contents

### Guide

- [Introduction](https://d3-maps.netlify.app/guide.md): Guide to building D3 SVG maps in React and Vue with GeoJSON or TopoJSON data, projections, and interactive layers
- [Core concepts](https://d3-maps.netlify.app/guide/core-concepts.md): Core concepts for D3 SVG maps in React and Vue, including projections, features, mesh, markers, zoom, and responsive rendering
- [Troubleshooting](https://d3-maps.netlify.app/guide/troubleshooting.md): Troubleshooting guide for D3 SVG maps in React and Vue, including blank maps, misplaced markers, broken projections, and layer issues
- [Migrate from react-simple-maps](https://d3-maps.netlify.app/guide/migration-from-react-simple-maps.md): Migration guide from react-simple-maps to @d3-maps/react, covering component, prop, styling, and zoom API equivalents

### Components

- [Components](https://d3-maps.netlify.app/components.md): D3 SVG map components in React and Vue: MapBase, MapFeatures, MapMarker, MapZoom, and MapGraticule
- [MapBase](https://d3-maps.netlify.app/components/map-base.md): Component for the root D3 SVG map container and shared map context in React and Vue
- [MapFeatures](https://d3-maps.netlify.app/components/map-features.md): Component for GeoJSON feature rendering on D3 SVG maps in React and Vue
- [MapFeature](https://d3-maps.netlify.app/components/map-feature.md): Component for a single interactive GeoJSON feature path on D3 SVG maps in React and Vue
- [MapAnnotation](https://d3-maps.netlify.app/components/map-annotation.md): Component for D3 SVG map coordinate-based annotations in React and Vue
- [MapLine](https://d3-maps.netlify.app/components/map-line.md): Component for D3 SVG map lines, arcs, and curved paths in React and Vue
- [MapMarker](https://d3-maps.netlify.app/components/map-marker.md): Component for D3 SVG map markers in React and Vue
- [MapMesh](https://d3-maps.netlify.app/components/map-mesh.md): Component for D3 SVG map TopoJSON borders and boundary lines in React and Vue
- [MapGraticule](https://d3-maps.netlify.app/components/map-graticule.md): Component for D3 SVG map graticules and outlines in React and Vue
- [MapZoom](https://d3-maps.netlify.app/components/map-zoom.md): Component for D3 SVG map pan and zoom in React and Vue

### Helpers

- [Helpers](https://d3-maps.netlify.app/helpers.md): Helpers for custom SVG map layers, renderers, zoom logic, and shared map state in React and Vue
- [useCreateMapContext](https://d3-maps.netlify.app/helpers/use-create-map-context.md): Helpers for creating and reusing shared D3 SVG map context outside the root map component with React and Vue
- [useMapContext](https://d3-maps.netlify.app/helpers/use-map-context.md): Helper for reading map size, features, and path state inside custom D3 SVG map layers with React and Vue
- [useMapZoom](https://d3-maps.netlify.app/helpers/use-map-zoom.md): Helper for reading zoom state and zooming to map objects on D3 SVG maps with React and Vue
- [useMapObject](https://d3-maps.netlify.app/helpers/use-map-object.md): Helper for interaction state and resolved styles on custom D3 SVG map objects with React and Vue
- [getFeatureKey](https://d3-maps.netlify.app/helpers/get-feature-key.md): Helper for stable GeoJSON feature IDs in D3 SVG maps
- [getObjectZoomView](https://d3-maps.netlify.app/helpers/get-object-zoom-view.md): Helper for fitting D3 SVG map features and objects to a centered zoom view with React and Vue

### Examples

- [Examples](https://d3-maps.netlify.app/examples.md): Example gallery for D3 SVG maps in React and Vue, including choropleth maps, markers, annotations, and pan and zoom

### API

- [@d3-maps/core](https://d3-maps.netlify.app/api/core.md)


### Other

- [API](https://d3-maps.netlify.app/api.md): API docs entry point for generated d3-maps core docs and local TypeDoc pages
- [d3-maps](https://d3-maps.netlify.app/index.md): D3 SVG map library for React and Vue with components for choropleth maps, markers, pan and zoom, and responsive rendering