Building Beautiful Data Stories with Pyxie

Data can tell powerful stories. With Pyxie and FastHTML, you can easily enhance your content with beautiful interactive visualizations that blend seamlessly with your markdown content. In this guide, we'll walk through adding charts to your Pyxie pages.

Adding Charts to Your Content

Pyxie makes it incredibly simple to add data visualizations to your content. You don't need to be a JavaScript expert or learn complex charting libraries. Instead, you can use the chart components with Python syntax right within your markdown files.

Here's how it works:

1. You write your normal markdown content

2. When you want to add a chart, you use a <fasthtml> block

3. Inside the block, you import chart components, prepare your data, and display the chart

4. The rendered chart appears inline with your content

Creating a Simple Visualization

Let's start with a basic example: adding a line chart that shows monthly trends. Here's how you'd do it:

That's all it takes! ↑ That chart above is rendered directly from the code inside a <fasthtml> block. Let's look at the markdown that produced it:

<fasthtml>
from components import LineChart
# Prepare the data (category, [values])
data = [
    ("Jan", [30, 40]),
    ("Feb", [40, 45]),
    ("Mar", [35, 50]),
    ("Apr", [50, 55]),
    ("May", [60, 70])
]
# Create and display the chart
show(LineChart(data, "Monthly Trends", "auto"))
</fasthtml>

Notice how the chart is rendered directly within your content flow, making it feel like a natural part of your document.

Combining Multiple Charts

Often, you'll want to display multiple visualizations to tell a more complete data story. Let's create a more complete example with a bar chart and a pie chart side by side:

This example demonstrates how you can:

1. Create a responsive layout (switching from one to two columns on different screen sizes)

2. Add proper headings and descriptions to your visualizations

3. Combine multiple chart types to show different aspects of the same data

4. Style the container to visually separate it from regular text content

Making Charts Interactive

One of the most powerful features of embedded charts is interactivity. Let's create a chart that responds to user input:

This example demonstrates:

1. Creating controls that users can interact with

2. Setting up event handlers to respond to user input

3. Updating visualizations based on user selection

4. Providing feedback through UI changes

Best Practices

When adding data visualizations to your content, keep these guidelines in mind:

1. Choose the Right Chart Type

   • Use line charts for trends over time

   • Use bar charts for comparing categories

   • Use pie charts for showing proportions

   • Consider your audience's data literacy

2. Optimize for Performance

   • Load chart libraries only when needed

   • Use appropriate data formats

   • Consider lazy loading for charts below the fold

3. Make Charts Accessible

   • Add clear titles and labels

   • Include descriptive alt text

   • Provide data tables when appropriate

   • Use sufficient color contrast

4. Keep it Simple

   • Focus on the story you're telling

   • Remove unnecessary decorations

   • Use consistent styling across charts

   • Align with your site's design

For more examples and advanced techniques, check out:

• The Art of Layouts - Learn about layout composition

• Content Features - Explore other interactive features

• Building a Blog - See how charts fit into a complete site