D3

You run a TypeScript Express MCP server that exposes D3 knowledge as resources, recommendations, and code generation through the MCP protocol. It lets you fetch D3 documentation, get chart suggestions based on your data, and generate reproducible D3 examples, all via a structured MCP interface you connect to with an MCP client.

How to use

Connect to the MCP server using an MCP client and an SSE transport. Use the MCP endpoint at http://localhost:3000/mcp-sse to establish a session. Once connected, you can request tools such as chart recommendations and D3 code generation. For example, you can ask for a chart recommendation by describing your data and your goal, then use the results to guide chart type selection. You can also generate D3 code snippets for common chart types based on your data description. Actions are invoked through the MCP client’s tool interface and return structured results you can render directly in your app or docs.

Typical usage patterns include: • Connect to the MCP endpoint to establish a long-lived session. • Invoke the chart recommendation tool with a data description and your visualization purpose. • Invoke the code generation tool to obtain D3 code for a chosen chart type. • Iterate, adjusting data descriptions and purposes to refine recommendations and code snippets. Remember to handle the results in your UI or workflow as you would with any API response.

How to install

# 1) Clone the MCP D3 server repository
git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server

# 2) Install dependencies
npm install

# 3) Build the project
npm run build

# 4) Start the server
npm start

# Development with hot reloading
npm run dev

Available tools

generate-d3-chart

Generate D3 code for different chart types by specifying the chart type, data format, and optional features.

recommend-chart

Provide data description and purpose to receive recommended D3 chart types suited to your goals.