Does the viewer support live editing?

Absolutely. The interactive viewer features a Monaco-based code editor with syntax highlighting and a live preview that updates as you type, with built-in error tracking for debugging.

Is knowledge of D3.js required?

While Observable Plot is built on top of D3, its declarative API is much more concise. Claude handles the complex syntax, allowing you to focus on the data insights you want to reveal.

Can I use my own local datasets with this skill?

Yes, Claude can read local CSV or JSON files from your project and write the necessary JavaScript code to transform and visualize that data using Plot's marks and scales.

How do I see the charts Claude creates?

The skill includes a 'plot-viewer' command that launches a local web interface on port 8765. Claude writes plot files to a specific directory, and the viewer automatically renders them.

What is the Observable Plot skill for Claude?

It is a specialized capability that allows Claude to generate, edit, and preview sophisticated data visualizations using the Observable Plot library directly within your coding environment.

Observable Plot Visualization

Name: Observable Plot Visualization
Author: mberg

bymberg

0•

数据科学与机器学习

Create expressive, declarative data visualizations and charts using the Observable Plot grammar of graphics directly within your development workflow.

This skill integrates Observable Plot's declarative grammar of graphics into Claude's workflow, enabling the creation of complex data visualizations through simple composition of marks, scales, and transforms. It includes a built-in interactive viewer that provides real-time previews, history tracking, and a live code editor, allowing developers to rapidly prototype and iterate on charts from local datasets or remote sources using Tidy Data principles. By leveraging the included plot-viewer, users can watch their data come to life in a dedicated browser interface as Claude writes and refines the visualization code.

主要功能

01Automated data fetching and parsing with D3 integration and autoType support

020 GitHub stars

03Interactive plot viewer with live preview, history management, and Monaco editor

04Built-in statistical transforms including binning, grouping, and moving averages

05Declarative grammar of graphics for composing complex charts from simple marks

06Debugging API to track plot evaluation errors and viewer status in real-time

使用场景

01Exploratory data analysis of local CSV or JSON datasets during the development process

02Visualizing time-series trends and statistical distributions for performance monitoring

03Prototyping interactive dashboards and business intelligence reports for web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mberg/claude-skills observable-plot

For use in Claude.ai and ChatGPT

Download Skill