# Skill 022 > Create geographical map visualizations using D3.js (v6) to represent spatial data and geographical relationships. - Skill: `legendtkl/skill-022` (Agent Skill) - Install (CLI): `npx skillmds@latest add legendtkl/skill-022` - Raw SKILL.md: https://api.skillmd.com/api/skills/legendtkl/skill-022/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: legendtkl (https://skillmd.com/u/legendtkl) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/legendtkl/skill-022 --- # D3.js Map Visualization Skill This skill enables the creation of geographical visualizations using **D3.js**. It focuses on rendering maps and spatial relationships to effectively display data that has a geographical context, such as demographics, weather patterns, or resource distribution. ## When to use Activate this skill when the user needs assistance with: - "Visualize geographical data on a map" - "Create a choropleth map" - "Show spatial data relationships" - "Map data distributions across regions" If the user requires non-geographical visualizations, **don’t** use this skill—opt for the D3.js Visualization Skill instead. --- ## Inputs you should expect - One or more local data files: `*.json`, `*.csv` with geographical coordinates or region data - Mapping requirements: - Geographical boundaries (geoJSON topology) - Data attributes to bind to regions (e.g., population, sales) - Visualization preferences (color scales, legend) - Output constraints: - Specific mapping styles (e.g., interactive vs. static maps) If details are missing, **make reasonable defaults** and document them in comments near the top of the output file. --- ## Outputs you should produce Prefer producing **all of** the following when feasible: 1. `dist/map.html` — standalone HTML that renders the map visualization 2. `dist/map.svg` — exported SVG representation of the map 3. (Optional) `dist/map.png` — raster image output if specified Always keep outputs in a predictable folder (default: `dist/`), unless the task specifies paths. --- ## Mapping principles (non-negotiable) To create effective map visualizations: ### Geospatial accuracy - Ensure that the geographical data used is accurate and up-to-date for reliable representations. - Handle data projections appropriately to maintain shape integrity on the map. ### User experience - Provide interactive features such as zooming and panning to allow users to explore map details. - Include tooltips for additional contextual information on hover or click. --- ## Example Usage ```html Map Visualization

Geospatial Data Visualization

``` This example sets up an HTML page to render a map visualization using D3.js. The associated `map.js` file would contain logic for rendering the geographical data.