# Creating visualizations with agents

<!-- ## Quick charts with chartboat

The fastest way to get a visualization is to use [chartboat](https://github.com/simonw/chartboat), a command-line tool that generates charts directly from SQLite databases.

Tell your agent:

```
Run `uvx chartboat --help` to learn how chartboat works. Then use it to create charts from the trees.db database.
```

Let the agent figure out how to use it. Try asking for things like:

- A bar chart of the most common tree species
- A chart showing trees planted per year -->

## Python visualizations

Agents are very capable with Python visualization libraries - try this prompt:

```
Use Python and matplotlib to create a visualization showing the most common tree species in trees.db.
```

Beyond matplotlib, agents know how to use many popular Python visualization libraries:

- **seaborn** - statistical visualizations with a cleaner default style
- **plotly** - interactive charts you can zoom, pan, and hover
- **altair** - declarative visualizations based on Vega-Lite
- **bokeh** - interactive plots for web browsers

You can ask for any of these by name in your prompt.

## JavaScript visualizations

For the most flexibility - and for visualizations you could embed in a news story - we can have agents build standalone HTML pages that fetch data from a JSON API.

Datasette serves every table and query result as JSON, so JavaScript running in a browser can fetch data directly from it. We'll use the tree data for this exercise.

Start Datasette, telling it to serve your `viz/` directory as static files:

```bash
datasette trees.db --static viz:./viz
```

This serves any files in the `./viz` directory at `/viz/` on the same Datasette server. Because everything is on the same origin, your JavaScript can fetch data using relative URLs with no CORS issues.

Now let's build up a visualization step by step. Start with this prompt:

```
Build viz/demo.html with vanilla JS that uses fetch() to get and display JSON from /-/databases.json
```

Open `http://localhost:8001/viz/demo.html` in your browser to see the result. Now iterate:

```
Add a field to enter the path to browse and default that to /.json
```

Try entering some paths in the field to explore what JSON Datasette makes available. Try this one:

```
/trees/-/query.json?sql=select+sql+from+sqlite_master
```

That returns the SQL schema for every table in the database as JSON. Now let's do something more ambitious:

```
Update demo.html to run an interesting SQL query and visualize the results using a bar chart, figure out a good query for that
```

<!-- Example result from this exercise: https://gist.github.com/simonw/6bbd8fcc4985fff69b5cccc79663854e -->

Watch the agent explore the database schema, pick a compelling query, and build a chart - all by iterating on a single HTML file.

You can keep going from here. Try asking for visualizations using [Observable Plot](https://observablehq.com/plot/), [D3.js](https://d3js.org/) for full control, or [Leaflet](https://leafletjs.com/) for maps.