Create interactive charts and presentation slides from data screenshots

Turn data screenshots into interactive charts, graphs, and presentations slides using Claude Artifacts.

intermediate pro

Tool: Claude Topic: Data & ReportingTopic: Presentation

2024-11-13

In this tutorial, we’re going to go from screenshots of data to interactive data visualizations and presentation slides using Claude Sonnet 3.5 and Artifacts.

Artifacts is the new Feature Preview that launched with Anthropic’s new model, Claude Sonnet 3.5. It offers one of the best coding experiences with an LLM chatbot.

Not only does it output code, but it also lets you view the rendered, interactive version of your code without leaving your chat window. Creating data visualizations and presentations has never been easier.

Steps we’ll follow in this tutorial:

Step 1: Enable the Artifacts feature
Step 2: Upload screenshots of graphs to generate JSON
Step 3: Combine data into one chart
Step 4: Turn data into a presentation
Step 5: View, download, and copy the presentation

Step 1: Enable the Artifacts feature

To get started, you need to enable the new Artifacts Feature Preview. If you’re in a chat window with Claude, you can click the little beaker icon below the chat text box.

The Feature Preview window will open. Toggle the Artifacts feature “On” to enable the feature. When you enable Artifacts, it will be enabled by default for all of your future chats.

💡 Tip: If you’re on the homepage of Claude, you might see a window allowing you to enable Artifacts from the homepage too.

Step 2: Upload screenshots of graphs to generate JSON

With Artifacts enabled, we will upload two graphs of related data and transform the graphs into JSON data. To do this, take screenshots of your graphs, add them as attachments to your Claude message, and ask Claude to transcribe the data into JSON.

Sample prompt:

Here's a [describe chart #1] and [describe chart #2].

Can you transcribe the data into JSON?

Claude will generate the JSON code in an Artifacts window to the right of your chat.

💡 Tip: We’re generating JSON code so that Claude can take the underlying data from the screenshots and transform it into different outputs. If you want to use the graphs from our example, you can find them here.

Step 3: Combine data into one chart

Now that we have the JSON created, we can combine the data into one chart. Claude has access to Javascript libraries and can render them in Artifacts, so we’ll ask it to use plotly.js to generate an interactive chart with the combined data:

Combine the data from the charts into a single interactive plotly.js chart that allows you to hover over each data point to read more about [insert data descriptor].

Do not use react-plotly.js. Make sure it can render in Artifacts.

💡 Tip: We noticed that when we asked to combine the data using plotly.js, Claude would often try to import react-plotly.js, which would cause an error. So make sure to include the part of the prompt that explicitly requests to not import that library as we’ve done in the sample prompt.

You should now be able to hover over the data within your interactive chart in the Artifacts preview window and see the combined data.

Step 4: Turn data into a presentation

Now that we have the combined data, we can turn our new data into a presentation. Not only can we embed the interactive data visualization into a presentation slide, we can have Claude extrapolate on the data to generate an entire presentation for our data:

Create a JS-based presentation on the topic. Please use the chart you just made in a slide.

For web-based presentations, Claude will generate navigation buttons that you can click to flip through your slides.

Step 5: View, download, and copy the presentation

You can work with Claude via prompts to refine and update the slides, both from a content and design perspective. Once you’re satisfied with your slides, you can download or copy the code using the respective buttons in the bottom right corner of the Artifacts window.

💡 Tip: The slides will most likely be downloaded as an HTML file, so to share and present the slides, you will need to upload your presentation code to a code-hosting service or host it locally on your device.

And that’s it! With your HTML file generated, we recommend adding it to a hosting service like GitHub Pages or Replit to host your slides and share it with your colleagues.

‍