Data Visualization with Python and JavaScript, 2nd Edition

Chapter 14. Bringing Your Charts to the Web with Matplotlib and Plotly

In this chapter, we’ll see how to bring the fruits of your pandas data cleaning and exploration to the web. Often a good static visualization is a great way to present data, and we’ll start by showing how you can use Matplotlib to do just that. Sometimes user interaction can really enrich a data visualization—we’ll see how Python’s Plotly library can be used to create interactive visualizations in a Jupyter notebook and transfer these, user interactions (UI) and all, to a web page.

We’ll also see how learning Plotly’s Python library gives you competence with a native JavaScript library, which can really extend the possibilities of your web dataviz. We’ll demonstrate this by creating some simple JS UIs to update our native Plotly charts.

Static Charts with Matplotlib

Often the best chart for the job is a static chart where full editorial control lies with the creator. One of Matplotlib’s strengths is its ability to produce print-quality charts in a comprehensive range of formats, from high-definition web PNGs to SVG renderings, with vector primitives that scale perfectly with document size.

For web graphics the ubiquitous, recommended format is the portable network graphics (PNG) format which, as the name suggests, was designed for the job. Let’s select a few charts from our Nobel exploration (see Chapter 11) and deliver them to the web as PNGs, making a little presentation on the way.

In “National Trends” ...