1. Exporting Interactive Charts from Plotly
Congrats to all visualization fans and chart artists for making it to our final lecture on data visualization. Today we’ll wrap up our journey of creating beautiful and informative charts by learning how to properly export and integrate them into documents. If you’ve ever wondered how to impress your boss not only with solid analytics but also with charts that can be embedded not just in PowerPoint but also in an HTML page, well, today is your lucky day!
Main Export Formats in Plotly
Plotly supports several export formats:
- HTML - for creating interactive charts that can be opened in a browser.
- PNG, JPG, PDF, SVG - for creating high-quality static images.
- JSON - for storing charts as JSON structures, handy for transferring data between systems.
Export Methods
Let’s start with the star of the show - Plotly. This library is famous for its interactivity and ability to create dynamic charts. But how do you share them with the world without handing out your laptop pre-installed with Python?
Plotly allows you to export charts to HTML. That means you can just send an HTML file, and your colleagues or clients can interact with the chart right from their browser. Export is done using the plotly.io.write_html method. For example:
import plotly.express as px
import plotly.io as pio
# Creating a simple interactive chart
df = px.data.iris() # Dataset irises
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
# Exporting the chart to HTML
pio.write_html(fig, file='chart.html', auto_open=True)
The auto_open=True parameter opens the file in a browser immediately after saving - super handy if you’re eager to show off your work to colleagues or just want to ensure it saved properly.
Exporting to Other Formats
Plotly also supports exporting to image formats like PNG, JPEG, and SVG. For this, you’ll need an additional library called kaleido, which handles rendering to image formats:
pip install -U kaleidoNow let’s export the chart:
# Exporting the chart to PNG
pio.write_image(fig, file='chart.png')
# Exporting the chart to JPG
pio.write_image(fig, file='chart.jpg', width=800, height=400, scale=2)
2. Including Charts in Reports
Exported charts can become an integral part of your analytical reports. For example, an exported HTML chart can easily be included in a report you’re planning to present in a webinar or upload to a corporate portal.
Embedding Charts into Word and PDF Documents
To embed charts into Microsoft Word or PDF documents, save the chart as a PNG or JPG and then insert it as an image. You can simply drag the file into the document or use the built-in features of Word and PDF editors to insert images.
fig.write_image("sales_chart.pdf")
PDF is great for printing and distributing charts with high quality. When exporting Plotly charts to PDF through kaleido, just specify the file format.
Embedding Interactive Charts in Web Documents
Interactive Plotly charts in HTML format can be embedded in web pages. This is particularly useful for online reports and web documentation. To embed a chart, you can either link to the HTML file or embed the HTML code directly into a web page.
To include interactive charts, you can use an iframe in an HTML page:
<iframe src="chart.html" width="800" height="600"></iframe>
This way, the chart will be embedded into your page and available for interaction.
Exporting a Chart to JSON
The JSON format is great for storing charts as data that can be transferred between systems or stored for later editing. You can then import the JSON file back into Plotly and display it.
# Saving the chart to JSON
fig.write_json("sales_chart.json")
Choosing Formats and Parameters for Different Report Types
- For printing and publishing: Use PNG or PDF format with high resolution (
dpi=300) to ensure images remain sharp and high-quality. - For web documents and presentations: PNG and SVG formats work great for web documents. SVG is handy for scalable graphics and doesn’t lose quality when zoomed in.
- For interactive reports: Save interactive Plotly charts in HTML format and embed them into web pages or online documents.
3. Example
Now, to consolidate your knowledge, let’s create an interactive chart, export it, and integrate it into a simple HTML document.
Creating a Chart:
import plotly.express as px
import plotly.io as pio
df = px.data.tips()
fig = px.bar(df, x='day', y='total_bill', color='sex', barmode='group')
pio.write_html(fig, file='tips_graph.html', auto_open=True)
Creating an HTML Document with the Chart:
Let’s save the following code as index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tips Report</title>
</head>
<body>
<h1>Analysis of Tips by Day of the Week</h1>
<p>Below is an interactive chart showing the total tips based on the day of the week and gender.</p>
<iframe src="tips_graph.html" width="900" height="500" frameBorder="0"></iframe>
</body>
</html>
Viewing the Document:
Open index.html in your browser and enjoy the results! You’ve just created a report that you can share with your colleagues or publish online.
Interactive charts are not only beautiful but also useful for in-depth data analysis and presenting results. They make your reports significantly more impressive and versatile.
In conclusion to our study of Plotly and Matplotlib, it’s worth noting that a proper presentation of information is almost an art. Use the knowledge you’ve gained to make your data look stunning and be as useful as possible. Good luck creating your own visualization masterpieces!
GO TO FULL VERSION