Creating visualizations with agents

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:

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

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, D3.js for full control, or Leaflet for maps.