Run any Skill in Manus with one click

Get Started

skill-022

Stars6

Forks2

UpdatedMay 23, 2026 at 17:20

Create geographical map visualizations using D3.js (v6) to represent spatial data and geographical relationships.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

legendtkl

legendtkl/agentic-skill-router

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	skill-022
description	Create geographical map visualizations using D3.js (v6) to represent spatial data and geographical relationships.

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:

dist/map.html — standalone HTML that renders the map visualization
dist/map.svg — exported SVG representation of the map
(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

<!DOCTYPE html>
<html>
<head>
    <title>Map Visualization</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="dist/map.js"></script>
</head>
<body>
    <h1>Geospatial Data Visualization</h1>
    <div id="map"></div>
</body>
</html>

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.

More from this repository

same repository

agentic-skill-router

legendtkl/agentic-skill-router

First use any clearly matching enabled local/user Agent Skill. If none matches, prefer this router for skill-shaped requests involving a named tool, API, service, CLI, platform, file format, dataset, or domain workflow, including when a generic built-in skill such as browser, Chrome, or web search also seems applicable; use built-ins directly only when explicitly requested or when the task is primarily live browsing, logged-in page operation, clicking, screenshotting, or current webpage inspection. Also use directly to audit, slim, disable, restore, or route locally installed Agent Skills across supported hosts. Examples include Vercel, Netlify, Cloudflare, Render, Playwright, Sentry, Linear, GitHub, OpenAI APIs, PDF, DOCX, PPTX, and spreadsheets.

2026-05-286

skill-001

legendtkl/agentic-skill-router

コスト見積書を作成する。予算策定、見積もり、コスト計画時に使う。

2026-05-236

skill-002

legendtkl/agentic-skill-router

Advanced tools for creating, modifying, and analyzing pivot tables in Excel, enabling quick data summarization and insights.

2026-05-236

skill-003

legendtkl/agentic-skill-router

PDF manipulation toolkit. Extract text/tables, create PDFs, merge/split, fill forms, for programmatic document processing and analysis.

2026-05-236

skill-004

legendtkl/agentic-skill-router

Third-party WordPress plugin integration patterns. Use when adding new integrations, debugging compatibility with other plugins, or working with existing integrations.

2026-05-236

skill-005

legendtkl/agentic-skill-router

Intelligent agent routing and topology selection based on task characteristics

2026-05-236

name	skill-022
description	Create geographical map visualizations using D3.js (v6) to represent spatial data and geographical relationships.

D3.js Map Visualization Skill

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:

dist/map.html — standalone HTML that renders the map visualization
dist/map.svg — exported SVG representation of the map
(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

<!DOCTYPE html>
<html>
<head>
    <title>Map Visualization</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="dist/map.js"></script>
</head>
<body>
    <h1>Geospatial Data Visualization</h1>
    <div id="map"></div>
</body>
</html>

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.