一键在 Manus 中运行任何 Skill

开始使用

skill-022

星标6

分支2

更新时间2026年5月23日 17:20

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

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

legendtkl

legendtkl/agentic-skill-router

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

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.