원클릭으로 Manus에서 모든 스킬 실행

시작하기

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 저장소 열기 Creator 저장소 보기

다운로드

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.