python create html presentation

How to make HTML slides from ipynb, md, and rmd

Host your HTML slides on GitHub pages

The goal of this tutorial is to demonstrate how to make HTML slidedecks that can be put on the web.

Instructions for how to turn Markdown ( .md ), R Markdown ( .Rmd ), and Jupyter Notebook ( .ipynb ) files into slides are detailed below.

One major advantage of HTML slidedecks is that you can host them on GitHub for free and share a url, instead of resorting to email or transferring files using USB drives.

Instead of using Powerpoint, Keynote, or Google Slides, I recommend you try to generate slides programmatically using the steps below.

Speaking of Powerpoint, I suggest that you avoid the horrors of Microsoft Office entirely.

• Pandoc or Pypandoc (recommended for users of the Python programming language and those comfortable using the command line )
• RStudio or the rmarkdown R package (recommended for users of the R programming language )
• JupyterLab (or the classic Jupyter Notebook )
• Instead of using Microsoft Excel and the xls(x) format, save tabular data as comma-separated value (csv) files. PyCharm , RStudio and JupyterLab all have csv viewers. These csv viewers are better options for looking at data than Excel, because they do not have the ability to edit or auto-format your raw data. Tables that are meant to be displayed in documents can also be written in Markdown format instead of in Excel.

Create HTML slides from markdown (md) using Pandoc or Pypandoc

The easiest way to create a slideshow is to write a simple markdown file, like habits.md , and use Pandoc to convert it to one of the possible HTML formats.

There are many ways to install Pandoc , but I recommend to use Anaconda or Miniconda . The Anaconda installer is hundreds of MB in size because the Anaconda Python distribution includes hundreds of Python packages plus the Anaconda Navigator program. The Miniconda installer is more than ten times smaller and includes only Python and conda.

Once you have Anaconda or Miniconda installed, you can install Pandoc using this command-line command conda install -yc conda-forge pandoc and then run the one of the options below:

Instead of using Pandoc in the terminal as described above, you can also install Pypandoc and convert Markdown to almost any format in your Python environment (e.g. in PyCharm )!

• Pro-tip 1: You can write Markdown in PyCharm ! Press Ctrl/Cmd+N, then Enter, type out the name of the Markdown file (must end in .md ) you want to create, and press Enter again. You get Markdown syntax highlighting and a live preview of your rendered Markdown !
• Pro-tip 2: If you create a new Python scratch file in PyCharm (Press Ctrl/Cmd+Shift+N, then Enter) and change the extension from .py to .md , PyCharm will continue to treat the file like a Python script giving you the ability to run code in your Markdown document! As soon as you take the file out of the Scratches folder, PyCharm will treat it like a Markdown file again! In short, PyCharm will auto-detect the file type based on its extension, but this does not apply to scratch files!
• Pro-tip 3: To get automatic python syntax highlighting in your Markdown documents on GitHub and in slideshows created from Markdown files, put three backticks (`) followed by the word “python” above your code and then a new line below your code put another three backticks (`). This is called a code block in Markdown .

Examples of HTML slides created using Pandoc or Pypandoc :

Knit slides from md or rmd to html in rstudio or from the command-line.

First, you will need to install R. Again, I recommend installing Anaconda or Miniconda and then running conda install -yc r r-essentials .

Then, write you can run one of the commands below to make the html slideshow.

You can also install RStudio by running conda install -yc r rstudio , open up a markdown file in RStudio, add a YAML header that specifies the output_format as in habits.Rmd , save the file and then click Preview/Knit or Press Ctrl/Cmd + Shift + K.

For revealjs and xaringan slides, you must first run install.packages('revealjs') and install.packages('xaringan') in RStudio before you can Knit (Ctrl/Cmd + Shift + K).

You only need to install the packages once!

You can also run install the packages and render slides from the command-line as below:

Examples of HTML slides created using RStudio or the rmarkdown R package :

Create html slides from ipynb using nbconvert from the command-line.

You can also create slides from a Jupyter Notebook using jupyter nbconvert .

If you have Anaconda installed, you should already be able to run jupyter nbconvert , but if you are using Miniconda you will need to install nbconvert by running conda install -yc conda-forge jupyter nbconvert .

Another way to create slides is to open the Jupyter Notebook in JupyterLab and follow the instructions in this example slide deck:

An example with instructions for creating slides using JupyterLab:

Both of the methods above should give the same result: a revealjs html slideshow file.

There are other ways to make slides from a Jupyter Notebook that do not involve making an html file.

• The easiest way is to use nbviewer , so that you can switch between notebook and slide view .
• by RISE creator Damian Avila
• by Matthias Geier .

These two options are not the same as creating an html slideshow from a jupyter notebook and hosting it on your website , but they get the job done.

How to Embed Interactive Python Visualizations on Your Website with Python and Matplotlib

In an earlier freeCodeCamp tutorial, I explained how to create auto-updating data visualizations in Python .

Some readers reached out to ask if there was any way to make the visualizations interactive. Fortunately, an easy solution is already available!

In this tutorial, I will teach you how you can create interactive data visualization in Python. These visualizations are excellent candidates for embedding on your blog or website.

The Specific Data Visualization We Will Be Working With

Instead of building an entire data visualization from scratch in this article, we will be working with the visualization that we created in my last tutorial.

The visualization uses pandas , matplotlib , and Python to present various data points from the 5 largest publicly-traded banks in the United States.

Here is a static image of the visualization we created:

The actual code for the visualization is included below. We covered this in the last tutorial, but please note that you will need to generate your own IEX Cloud API key and include it in the IEX_API_Key variable in order for the script to work.

Now that we have an understanding of the specific visualization we'll be working with, let's talk about what it means for a visualization to be interactive.

What Does It Mean for a Visualization to be Interactive?

There are two types of data visualizations that are useful to embed on your website.

The first type is a static visualization. This is basically an image - think .png or .jpg files.

The second type is a dynamic visualization. These visualizations change in response to user behavior, usually by panning or zooming. Dynamic visualizations are not stored in .png or .jpg files but usually in svg or iframe tags.

This tutorial is about creating dynamic data visualizations. Specifically, the visualization we want to create will have the following characteristics:

• You will click a button in the bottom left to enable dynamic mode.
• Once dynamic mode is enabled, you can zoom and pan the visualization with your mouse.
• You can also crop and zoom to a specific section of the visualization.

In the next section of this tutorial, you will learn how to install and import the mpld3 library, which is the Python dependency that we'll use to create our interactive charts.

How to Import the mpld3 Library

To use the mpld3 library in our Python application, there are two steps that we need to complete first:

• Install the mpld3 library on the machine we're working on.
• Import the mpld3 library into our Python script.

First, let's install mpld3 on our local machine.

The easiest way to do this is using the pip package manager for Python3. If you already have pip installed on your machine, you can do this by running the following statement from your command line:

Now that mpld3 is installed on our machine, we can import it into our Python script with the following statement:

For readability's sake, it is considered a best practice to include this import along with the rest of your imports at the top of your script. This means that your import section will now look like this:

How To Transform a Static matplotlib Visualizations into an Interactive Data Visualization

The mpld3 library's main functionality is to take an existing matplotlib visualization and transform it into some HTML code that you can embed on your website.

The tool we use for this is mpld3 's fig_to_html file, which accepts a matplotlib figure object as its sole argument and returns HTML.

To use the fig_to_html method for our purpose, simply add the following code to the end of our Python script:

This code generates the HTML and saves it under the filename index.html in your current working directory. Here's what this looks like when rendered to a webpage:

When you hover over this visualization, three icons will appear in the bottom left. The left icon returns the visualization to its default appearance. The middle icon enables dynamic mode. The right icon allows you to crop and zoom to a specific spot in the visualization.

A Common Error With Working With pandas and mpld3

When creating the interactive visualization in this tutorial, you may come across the following error generated by mpld3 :

Fortunately, there is a well-documented solution to this error on GitHub .

You need to edit the _display.py file found in Lib\site-packages\mpld3 and replace the NumpyEncoder class by this one:

Once this replacement is made, then your code should function properly and your index.html file should generate successfully.

Final Thoughts

In this tutorial, you learned how to create interactive data visualizations in Python using the matplotlib and mpld3 libraries. Here is a specific summary of what we covered:

• The definition of a dynamic data visualization
• How to install and import the mpld3 library for Python
• How to use the mpld3 library to transform a matplotlib visualization into a dynamic visualization that you can embed on your website
• How to fix a common error that users of the mpld3 library experience

This tutorial was written by Nick McCullum , who teaches Python and JavaScript development on his website.

I write about software, machine learning, and entrepreneurship at https://nickmccullum.com. I also sell premium courses on Python programming and machine learning.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Create interactive slides with Python in 8 Jupyter Notebook cells

Creating presentations in Jupyter Notebook is a great alternative to manually updating slides in other presentation creation software. If your data changes, you just re-execute the cell and slide chart is updated.

Jupyter Notebook is using Reveal.js (opens in a new tab) for creating slides from cells. The standard approach is to write slides code and Markdown in the Jupyter Notebook. When notebook is ready, it can be exported to standalone HTML file with presentation.

What if, you would like to update slides during the slide show? What is more, it would be fantastic to have interactive widgets in the presentation. You can do this in Mercury framework.

In this tutorial, we will create an interactive presentation in Jupyter Notebook and serve it with Mercury.

Create presentation in notebook

Please enable Slideshow toolbar in Jupyter Notebook. It can be done by clicking View -> Cell Toolbar -> Slideshow . It is presented in the screenshot below:

We will need following packages to create presentation in Python notebook:

Please make sure that they are installed in your environment.

1. Import packages and App setup

The first step is to import packages and setup Mercury App :

We setup title and description for App object.

Please note that we set Slide Type to Skip . This cell will not appear in the presentation.

2. Add title

The second cell is a Markdown with title:

The Slide Type is set to Slide . It is our first slide!

3. Add slide with Markdown

Add new Markdown cell with the following cell.

Please set Slide Type to Slide . It will be a second slide. I'm using ## as slide title ( # will produce too large title in my opinion).

4. Add Mercury Widget

Please add code cell with Text widget. We will use it, to ask users about their name.

We set Slide Type as Skip , so this cell will not appear in the presentation.

5. Display name

Let's use the name.value in the slide. Please add a code cell. We will display a Markdown text with Python variables by using Markdown function from Mercury package.

Please set the Slide Type to Slide .

You can display Markdown with Python variables by calling mr.Markdown() or mr.Md() functions. Both do the same.

The first five cells of the notebook:

You can enter your name in the widget during the notebook development. There will be no change in other cells. If you want to update the cell with new widget value, please execute it manually.

6. More widgets

We can add more widgets to the presentation. They will be used to control chart in the next slide.

We have used Slider and Select widgets. They are displayed in the notebook. This cell will not be displayed in the presentation, so set Slide Type to Skip .

7. Scatter plot

We will add a new code cell. It will have Slide Type set to Slide .

We used widgets values by accessing them with samples.value and color.value .

Screenshot of the notebook with scatter plot:

8. Final slide

Please add a last Markdown cell. Its Slide Type will be set to Slide :

Please notice that link is added with HTML syntax. There is a target="_blank" used to open link in a new tab.

Run presentation in Mercury

Please run Mercury local server in the same directory as notebook:

The above command will open a web browser at http://127.0.0.1:8000 . Please click on a card with presentation.

You can navigate between slides with arrows in the bottom right corner. You can enter the full screen mode by pressing F on the keyboard. Please use Esc to exit full screen mode.

You can change widgets values in the sidebar and presentation slides will be automatically recomputed:

You can export your slides as PDF or HTML by clicking Download button in the sidebar.

pyhtmlgui 3.22

pip install pyhtmlgui Copy PIP instructions

Released: Jul 25, 2024

A Python library for building user interfaces

Verified details

Maintainers.

Unverified details

Project links.

• License: MIT License (MIT)
• Author: Dirk Makerhafen
• Requires: Python >=3.7

Classifiers

• OSI Approved :: MIT License
• OS Independent
• Python :: 3

Project description

PyHtmlGui is a Python library for creating fast, easy to build, HTML/CSS/JS user interfaces with seamless interaction between Python and Javascript/HTML. It can be used to create web applications, but also fully functional desktop applications, similar to Electron.

PyHtmlGui creates reactive user interfaces by following the observer pattern to automatically update the HTML frontend if the underlying python model changes.

PyHtmlGui is designed to take the hassle out of writing GUI applications. It allows python developers to write HTML user interfaces without any boilerplate code. It enables function calls from Javascript to Python and the reverse, including asynchronous return values from one language to the other.

PyHtmlGui is inspired by Python eel and Javascript React .

If you are familiar with Python and HTML, probably just jump to Minimal App below, or dive right into this example code that shows most functions of PyHtmlGui in one simple app.

Example app screenshot:

Minimal App

Directory structure, simple tray with default browser, native app with simple tray, native app with html tray, pyhtmlgui options, pyhtmlgui methods, calling python from javascript, calling javascript from python, view nesting, pyhtmlview methods.

• PyHtmlView render customisation

Renderer details

• Using from inside Electron

Install from pypi with pip :

A PyHtmlGui app is split into your normal python application, and PyHtmlGui view classes.

First create your app logic, make your classes inherit from pyhtmlgui.Observable and call notify_observers() when your data changes.

Create a simple view with some inline html template. Note the pyview reference used in the template. pyview represents the PyHtmlView object instance that belongs to the tempate, pyview.subject is the app instance observed by that view.

Starting the app

This will start a webserver on the default settings ( http://localhost:8000 ) and open a browser to http://localhost:8000/ .

A larger PyHtmlGui application will be split into templates consisting of various web-technology files (.html, .js, .css), and various Python scripts split into actual app logic and views.

JS/CSS files are included by the apps base template. By default this is pyHtmlGuiBase.html from pyhtmlgui/templates . To extend this file and load your custom css/js, create a html file in your template dir and set matching options when initializing PyHtmlGui.

templates/base.html

templates/appView.html

views/appView.py

Creating a native App

PyHtmlGui creates a web(socket) server that will serve html created from your views.

In some cases, you might simply use a browser to access your gui.

However, at some point you might want to create a native app, maybe a tray icon and all the normal app stuff.

To save you from writing ~450 lines of annoying Qt code to set this all up, pyHmlGui provides some convience classes. They should fit many needs, but if you need more, you can simply extend or copy/paste them as a great starting point.

PyHtmlGui native app capabilitys depend on PyQt and PyQtWebEngine . On macOS optionally on PyObjC , if you need to hide the dock icon. They are not installed by default with to keep your environment small in case you don't need the native app part. Install these dependencys with

All examples below and some more can be found in examples/launchers/ .

Initializing

Additional options can be passed to the PyHtmlGui constructor as keyword arguments.

• app_instance : Your main App logic object
• view_class : A class that Inherits from PyHtmlView
• static_dir : Static files like js/css and fonts go here Default: ''
• template_dir : Templates used in views go here Default: ''
• base_template : A file in template_dir extending pyHtmlGui/templates/pyHtmlGuiBase.html, Default: None
• on_view_connected : This Callback function is called when a frontend connects via websocket. Arguments passed: "nr of view instances", "nr of websocket connections" Default: None
• on_view_disconnected : This Callback function is called when a frontend disconnects via websocket. Arguments passed: "nr of view instances", "nr of websocket connections" Default: None
• size : A tuple of ints specifying the (width, height) of the main window in pixels Default: None
• position : A tuple of ints specifying the (X, Y) position of the main windows in pixels. Default: None
• listen_host : A string specifying what hostname to use for the server. Default: 'localhost' )
• listen_port : An int specifying what port to use for the server. Default: 0 , automatic .
• shared_secret : Add a security token to prevent unauthorized access to the webserver, use "" to automatically generate internally, None to disable token Default: None .
• auto_reload : For development, monitor templates and reload while app is running. Default: False .
• single_instance : Create only one view instance and share it between all connected websockets. Try examples/full app and notice the animation and tab view in sync between multiple browser windows. Default: True .

PyHtmlGui. __init__ (**kwargs): Create a new PyHtmlGui instance. See list above for detailed description of kwargs

PyHtmlGui. add_endpoint (app_instance, view_class, name, base_template, on_view_connected, on_view_disconnected, single_instance, size, position): Create a new endpoint with name . This can be used if you need multiple view windows, like a main window and a tray view.

PyHtmlGui. get_url (endpoint=""): Receive frontend url.

PyHtmlGui. start (show_frontend = False , block = True ): Launch PyHtmlGui websocket server. If show_frontend is true , open gui in default browser. If block is true this call will block until the server exits.

PyHtmlGui. stop() : Stop PyHtmlGui server, this will release a blocking start call.

PyHtmlGui. show() : Open gui in default browser.

PyHtmlGui. join() : Wait for service to stop.

Html/JS rendered by a View can use the pyview reference to access the python side view object. Note that the pyview object is not available from javascript at runtime, pyview. is replaced by a dynamic function reference when the view is rendered. See Renderer details for more.

Note to beginners: If you find yourself manually updating frontend elements as a result of a python function call, aka in the .then part of the code below, your are most likely doing something wrong. If you want to update the frontend, either call self.notify_observers() in your backend app logic if something has changed there, or self.update() in the pyHtmlView view object, if your change only happens in the view part of your app.

You can call javasript functions from inside the python view object and receive the return values. If multiple frontends are connected to a shared view, you will get one result for each active frontend. Use args to pass a list of arguments to the called JS function if needed. Note to beginners: If you find yourself manually updating frontend elements this way, you are either optimizing something special, or you are doing it wrong. If you want to update the frontend, either call self.notify_observers() in your backend app logic if something has changed there, or self.update() in the pyHtmlView view object, if your change only happens in the view part of your app.

You can also eval javascript code dynamically. Keyword arguments passed to eval_javascript are available as args array inside the evaled Javascript.

All your views must inherit from PyHtmlView. PyHtmlView takes a subject and parent as parameters. The parent parameter is needed to track view visibility. If a view has not been rendered after a parent of that view was rendered, it is considered invisible and all events for that view and all its children will be detached. If the view gets rendered again later, pyhtmlgui will automatically reattach all event so the view reacts to subject changes again.

PyHtmlView. __init__(subject, parent) Create a new view instance, attaches default event that observes the subject and calls _on_subject_updated() when the subject notifies its observers. To prevent attaching of the default event, overwrite _on_subject_updated to None. Use parent in nested views to access the parent view that contains this element. parent also keeps track of visible/invisible elements and attaches/detached events appropriatley.

PyHtmlView. render() Returns the rendered template string as markup element. It can be use in other templates via {{pyview.subview.render()}} to create nested views.

PyHtmlView. update() Update the DOM element in place. View must have been rendered before and be visible in the DOM. By default, this function is called from _on_subject_updated when the observed subject changes and the view is visible.

PyHtmlView. call_javascript(fname, args, skip_results) Call frontend javascript function fname . Supply a list of args if needed. If skip_results is true no results will be received, and None will be returned. Otherwise a JavascriptCallResult object will be returned. Results can be received either asynchronous via javascriptCallResult(callback=lambda results:print(results)) or synchronous via result = javascriptCallResult()

PyHtmlView. eval_javascript(script, skip_results, **kwargs) Dynamically eval javascript in frontend. Behaves largely like call_javascript, but kwargs are passed as args variable to the javascript call. eval_javascript(script='return 42 + args.value', value=23)

PyHtmlView. set_visible(visible) This method is called right before the view is rendered and added to the DOM, or after a parent element was rendered and this view is no longer visible. It attaches/detaches events based on visibility. Overwrite this function if you need your view to react to weather its visible or not.

PyHtmlView. add_observable(subject, target_function) Add a new event to this view that is active as long as the view is visible. By default, __init__ will assign target_function _on_subject_updated to subject . If you not set target_function the default target function _on_subject_updated will be used. Use this function if you want your view to react to multiple model objects.

PyHtmlView. remove_observable(subject, target_function) Remove event from view.

PyHtmlView. _on_subject_updated(source, **kwargs) This is the default event handler for self.subject , it will call update to redraw the DOM element

PyHtmlView. _on_subject_died(self, wr) This is called when the self.subject object is derefered. The default handler removes the view from DOM, detaches all events and destroys the view object including all its children.

PyHtmlView render customization

Your view classes that inherit from PyHtmlView have several options to customize how their container is rendered.

will render

You can change how the element is rendered by setting some attributes of your view class. To remove the class attribute, set DOM_ELEMENT_CLASS to None .

rendered html:

You can make DOM_ELEMENT, DOM_ELEMENT_CLASS and DOM_ELEMENT_EXTRAS dynamic, so they are applied every time the dom element is updated. This does not work for TEMPLATE_STR because the template is prepared once and cached.

Templates are jinja2 templates. pyview is the python view object passed to the jinja renderer. Default jinja rendering rules apply. "{{pyview.variable}}" will render a variable, "{{pyview.myfunction()}}" will run myfunction at render time and show its results. "{{pyview.subject}}" gives access to the app logic object attached to this view.

If you use pyview. outside of jinjas tags, some pyHtmlGui magic will be applied:

At the first rendering step, the convinience function notion will be replaced with something the jinja template renderer can use:

After the final render this is the actual content that is send to the browser. The inner pyview.addOne function has been resolved at render time, and some magic function reference has been created in the background to access the outer pyview.addOne function later.

After this, clicking the button will show "3"

Project details

Release history release notifications | rss feed.

Jul 25, 2024

Feb 27, 2023

Feb 25, 2023

Feb 23, 2023

Feb 13, 2023

Feb 12, 2023

Feb 8, 2023

Feb 2, 2023

Feb 1, 2023

Jan 24, 2023

Jan 16, 2023

Dec 25, 2022

Dec 22, 2022

Dec 21, 2022

Dec 12, 2022

Dec 11, 2022

Dec 10, 2022

Nov 22, 2022

May 7, 2022

Feb 17, 2022

Feb 15, 2022

Feb 14, 2022

Feb 13, 2022

Feb 10, 2022

Feb 8, 2022

Feb 5, 2022

Feb 3, 2022

Oct 19, 2021

Mar 1, 2021

Feb 11, 2021

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages .

Source Distribution

Uploaded Jul 25, 2024 Source

Built Distribution

Uploaded Jul 25, 2024 Python 3

Hashes for pyhtmlgui-3.22.tar.gz

Hashes for pyhtmlgui-3.22-py3-none-any.whl

• português (Brasil)

Supported by

• Python Course
• Python Basics
• Interview Questions
• Python Quiz
• Popular Packages
• Python Projects
• Practice Python
• AI With Python
• Learn Python3
• Python Automation
• Python Web Dev
• DSA with Python
• Python OOPs
• Dictionaries

Creating and updating PowerPoint Presentations in Python using python – pptx

python-pptx is library used to create/edit a PowerPoint (.pptx) files. This won’t work on MS office 2003 and previous versions.  We can add shapes, paragraphs, texts and slides and much more thing using this library.

Installation: Open the command prompt on your system and write given below command:

Let’s see some of its usage:

Example 1: Creating new PowerPoint file with title and subtitle slide.

Example 2: Adding Text-Box in PowerPoint.

Example 3: PowerPoint (.pptx) file to Text (.txt) file conversion.

Example 4: Inserting image into the PowerPoint file.

Example 5: Adding Charts to the PowerPoint file.

Example 6: Adding tables to the PowerPoint file.

Please Login to comment...

Similar reads.

• python-modules
• python-utility
• How to Get a Free SSL Certificate
• Best SSL Certificates Provider in India
• Elon Musk's xAI releases Grok-2 AI assistant
• What is OpenAI SearchGPT? How it works and How to Get it?
• Full Stack Developer Roadmap [2024 Updated]

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Develop Data Visualization Interfaces in Python With Dash

Table of Contents

What Is Dash?

How to set up your local environment, how to build a dash application, how to apply a custom style to your components, how to improve the looks of your dashboard, how to create interactive components, how to define callbacks, how to create a free pythonanywhere account, how to deploy your avocado analytics app.

Watch Now This tutorial has a related video course created by the Real Python team. Watch it together with the written tutorial to deepen your understanding: Data Visualization Interfaces in Python With Dash

In the past, creating analytical web applications was a task for seasoned developers that required knowledge of multiple programming languages and frameworks. That’s no longer the case. Nowadays, you can make data visualization interfaces using pure Python. One popular tool for this is Dash .

Dash gives data scientists the ability to showcase their results in interactive web applications. You don’t need to be an expert in web development . In an afternoon, you can build and deploy a Dash app to share with others.

In this tutorial, you’ll learn how to:

• Create a Dash application
• Use Dash core components and HTML components
• Customize the style of your Dash application
• Use callbacks to build interactive applications
• Deploy your application on PythonAnywhere

You can download the source code, data, and resources for the sample application that you’ll make in this tutorial by clicking the link below:

Get the Source Code: Click here to get the source code you’ll use to learn about creating data visualization interfaces in Python with Dash in this tutorial.

Dash is an open-source framework for building data visualization interfaces. Released in 2017 as a Python library, it’s grown to include implementations for R, Julia, and F#. Dash helps data scientists build analytical web applications without requiring advanced web development knowledge.

Three technologies constitute the core of Dash:

• Flask supplies the web server functionality.
• React.js renders the user interface of the web page.
• Plotly.js generates the charts used in your application.

But you don’t have to worry about making all these technologies work together. Dash will do that for you. You just need to write Python, R, Julia, or F# and sprinkle in a bit of CSS.

Plotly , a Canada-based company, built Dash and supports its development. You may know the company from the popular graphing libraries that share its name. The company released Dash as open source under an MIT license , so you can use Dash at no cost.

Plotly also offers a commercial companion to Dash called Dash Enterprise . This paid service provides companies with support services such as hosting, deploying, and handling authentication on Dash applications. But these features live outside of Dash’s open-source ecosystem.

Dash will help you build dashboards quickly. If you’re used to analyzing data or building data visualizations using Python, then Dash will be a useful addition to your toolbox. Here are a few examples of what you can make with Dash:

• A dashboard showing object detection for self-driving cars
• A visualization of millions of Uber rides
• An interactive tool for analyzing soccer match data

This is just a tiny sample. If you’d like to see other interesting use cases, then go check out the Dash App Gallery .

Note: You don’t need advanced knowledge of web development to follow this tutorial, but some familiarity with HTML and CSS won’t hurt.

You should know the basics of the following topics, though:

• Python graphing libraries such as Plotly, Bokeh , and Matplotlib
• HTML and the structure of an HTML file
• CSS and style sheets

If you feel comfortable with the requirements and want to learn how to use Dash in your next project, then continue to the following section!

Get Started With Dash in Python

In this tutorial, you’ll go through the end-to-end process of building a dashboard using Dash. If you follow along with the examples, then you’ll go from a bare-bones dashboard on your local machine to a styled dashboard deployed on PythonAnywhere .

To build the dashboard, you’ll use a dataset of sales and prices of avocados in the United States between 2015 and 2018. Justin Kiggins compiled this dataset using data from the Hass Avocado Board .

To develop your app, you’ll need a new directory to store your code and data. You’ll also need a clean Python virtual environment . To create those, execute the commands below, choosing the version that matches your operating system:

• Linux + macOS

The first two commands create a directory for your project and move your current location there. The next command creates a virtual environment in that location. The last command activates the virtual environment.

Next, you need to install the required libraries. You can do that using pip inside your virtual environment. Install the libraries as follows:

This command will install Dash and pandas in your virtual environment. You’ll use specific versions of these packages to make sure that you have the same environment as the one used throughout this tutorial. Alongside Dash, pandas will help you handle reading and wrangling the data that you’ll use in your app.

Note: Version 2 of Dash was released in the fall of 2021. The new version is mostly backward compatible , but some idioms and recommendations have changed.

Finally, you need some data to feed into your dashboard. You can download the data as well as the code you see throughout this tutorial by clicking the link below:

Save the data as avocado.csv in the root directory of the project. By now, you should have a virtual environment with the required libraries and the data in the root folder of your project. Your project’s structure should look like this:

You’re good to go! Next, you’ll build your first Dash application.

For development purposes, it’s useful to think of the process of building a Dash application in three steps:

• Define the content of your application using the app’s layout.
• Style the looks of your app with CSS or styled components.
• Use callbacks to determine which parts of your app are interactive and what they react to.

In this section, you’ll learn about the layout. Next, you’ll learn about style , and in a later section, you’ll learn how to make your dashboard interactive . You’ll start by setting up everything you need to initialize your application, and then you’ll define the layout of your app.

Initializing Your Dash Application

Create an empty file named app.py in the root directory of your project, then review the code of app.py in this section. To make it easier for you to copy the full code, you’ll find the entire contents of app.py at the end of this section.

Here are the first few lines of app.py :

On lines 3 and 4, you import the required libraries: pandas and dash . You’ll use pandas to read and organize the data. You’re importing the following elements from dash :

• Dash helps you initialize your application.
• html , also called Dash HTML Components , lets you access HTML tags.
• dcc , short for Dash Core Components , allows you to create interactive components like graphs, dropdowns, or date ranges.

On lines 6 to 11, you read the data and preprocess it for use in the dashboard. You filter some of the data because your dashboard isn’t interactive yet, and the plotted values wouldn’t make sense otherwise.

On line 13, you create an instance of the Dash class. If you’ve used Flask before, then initializing a Dash class may look familiar. In Flask, you usually initialize a WSGI application using Flask(__name__) . Similarly, for a Dash app, you use Dash(__name__) .

Defining the Layout of Your Dash Application

Next, you’ll define the layout property of your application. This property dictates the content of your app. In this case, you’ll use a heading with a description immediately below it, followed by two graphs. Here’s how you define it:

With this code, you define the .layout property of the app object. This property determines the content of your application using a tree structure made of Dash components.

Dash components come prepackaged in Python libraries. Some of them come with Dash when you install it. You have to install the rest separately. You’ll see two sets of components in almost every app:

• The Dash HTML Components module provides you with Python wrappers for HTML elements. For example, you could use Dash HTML Components to create elements such as paragraphs, headings, or lists.
• The Dash Core Components module provides you with Python abstractions for creating interactive user interfaces. You can use these components to create interactive elements such as graphs, sliders, or dropdowns.

On lines 5 to 13, you can see the Dash HTML components in practice. You start by defining the parent component, html.Div . Then you add two more elements, a heading ( html.H1 ) and a paragraph ( html.P ), as its children.

These components are equivalent to the <div> , <h1> , and <p> HTML tags. You can use the components’ arguments to modify attributes or the content of the tags. For example, to specify what goes inside the <div> tag, you use the children argument in html.Div .

There are also other arguments in the components, such as style , className , and id , that refer to attributes of the HTML tags. You’ll see how to use some of these properties to style your dashboard in the next section.

The part of the layout shown on lines 5 to 13 will get transformed into the following HTML code:

This HTML code is rendered when you open your application in the browser. It follows the same structure as your Python code, with a <div> tag containing an <h1> and a <p> element.

On lines 14 and 26 in the layout code snippet, you can see the graph component from Dash Core Components in practice. There are two dcc.Graph components in app.layout . The first one plots the average prices of avocados during the period of study, and the second plots the number of avocados sold in the United States during the same period.

Under the hood, Dash uses Plotly.js to generate graphs. The dcc.Graph components expect a figure object or a Python dictionary containing the plot’s data and layout. In this case, you provide the latter.

Finally, these two lines of code help you run your application:

These lines make it possible to run your Dash application locally using Flask’s built-in server. The debug=True parameter enables the hot-reloading option in your application. This means that when you make a change to your app, it reloads automatically, without you having to restart the server.

You can expand the following box to see the complete source code in one listing:

app.py Show/Hide

This is the code for your bare-bones dashboard. It includes all the snippets of code that you reviewed earlier in this section.

Now it’s time to run your application. Open a terminal inside your project’s root directory with the project’s virtual environment activated. Run python app.py , then go to http://localhost:8050 using your preferred browser.

It’s ALIVE! Your dashboard should look like this:

The good news is that you now have a working version of your dashboard. The bad news is that there’s still some work to do before you can show this to others. The dashboard is far from visually pleasing, and you still need to add some interactivity to it.

But don’t worry—you’ll learn how to fix these issues in the next sections.

Style Your Dash Application

Dash provides you with a lot of flexibility to customize the look of your application. You can use your own CSS or JavaScript files, set a favicon —the small icon shown on tabs in the web browser—and embed images, among other advanced options.

Note: In this tutorial, you’ll see how to show off your own style with CSS. There are several packages on PyPI that provide styled Dash components. For example, dash-bootstrap-components are Bootstrap themed.

In this section, you’ll learn how to apply custom styles to components, and then you’ll style the dashboard that you built in the previous section.

You can style components in two ways:

• Using the style argument of individual components
• Providing an external CSS file

Using the style argument to customize your dashboard is straightforward. This argument takes a Python dictionary with key-value pairs consisting of the names of CSS properties and the values that you want to set.

Note: When specifying CSS properties in the style argument, you should use mixedCase syntax instead of hyphen-separated words. For example, to change the background color of an element, you should use backgroundColor and not background-color .

If you wanted to change the size and color of the H1 element in app.py , then you could set the element’s style argument as follows:

Here, you provide to style a dictionary with the properties and the corresponding values that you want to set. In this case, the specified style is to have a red heading with a font size of 48 pixels.

The downside of using the style argument is that it doesn’t scale well as your codebase grows. If your dashboard has multiple components that you want to look the same, then you’ll end up repeating a lot of your code. Instead, you can use a custom CSS file.

If you want to include your own local CSS or JavaScript files, then you need to create a folder called assets/ in the root directory of your project and save the files that you want to add there. By default, Dash automatically serves any file included in assets/ . This will also work for adding a favicon or embedding images, as you’ll see in a bit.

Then you can use the className or id arguments of the components to adjust their styles using CSS. These arguments correspond with the class and id attributes when they’re transformed into HTML tags.

If you wanted to adjust the font size and text color of the H1 element in app.py , then you could use the className argument as follows:

Setting the className argument will define the class attribute for the <h1> element. You could then use a CSS file in the assets folder to specify how you want it to look:

You use a class selector to format the heading in your CSS file. This selector will adjust the heading format. You could also use it with another element that needs to share the format by setting className="header-title" .

Next, you’ll style your dashboard.

You just covered the basics of styling in Dash. Now, you’ll learn how to customize your dashboard’s looks. You’ll make these improvements:

• Add a favicon and title to the page.
• Change the font family of your dashboard.
• Use an external CSS file to style Dash components.

You’ll start by learning how to use external assets in your application. That’ll allow you to add a favicon, a custom font family, and a CSS style sheet. Then you’ll learn how to use the className argument to apply custom styles to your Dash components.

Adding External Assets to Your Application

Create a folder called assets/ in your project’s root directory. Download a favicon from the Twemoji open-source project and save it as favicon.ico in assets/ . Finally, create a CSS file in assets/ called style.css and add the code in the collapsible section below:

style.css Show/Hide

The assets/style.css file contains the styles that you’ll apply to components in your application’s layout. By now, your project structure should look like this:

Once you start the server, Dash will automatically serve the files located in assets/ . You include two files, favicon.ico and style.css , in assets/ . To set a default favicon, you don’t have to take any additional steps. To use the styles that you defined in style.css , you’ll need to use the className argument in Dash components.

You need to make a few changes in app.py . You’ll include an external style sheet, add a title to your dashboard, and style the components using the style.css file. Review the changes below. Then, in the last part of this section, you’ll find the full code for your updated version of app.py .

Here’s how you include an external style sheet and add a title to your dashboard:

In these code lines, you specify an external CSS file containing a font family, which you want to load in your application. You add external files to the head tag of your application, so they load before the body of your application loads. You use the external_stylesheets argument for adding external CSS files or external_scripts for external JavaScript files like Google Analytics.

You also set the title of your application. This is the text that appears in the title bar of your web browser, in Google’s search results, and in social media cards when you share your site.

Customizing the Styles of Components

To use the styles in style.css , you’ll need to use the className argument in Dash components. The code below adds a className with a corresponding class selector to each of the components in the header of your dashboard:

In the highlighted lines, you can see that you’ve made three changes to the initial version of the dashboard:

• There’s a new <div> element that wraps all the header components.
• There’s a new paragraph element with an avocado emoji, 🥑, that’ll serve as a logo on the page.
• There’s a className argument in each component. These class names match a class selector in style.css , which defines the looks of each component.

For example, the header-description class assigned to the paragraph component starting with "Analyze the behavior of avocado prices" has a corresponding selector in style.css . In that file, you’ll see the following:

These lines define the format for the header-description class selector. They’ll change the color, margin, alignment, and maximum width of any component with className="header-description" . All the components have corresponding class selectors in the CSS file.

The other significant change is in the graphs. Here’s the new code for the price chart:

In this code, you define a className and a few customizations for the config and figure parameters of your chart. Here are the changes:

• Line 14 : You remove the floating toolbar that Plotly shows by default.
• Lines 21 to 23: You set the hover template so that when users hover over a data point, it shows the price in dollars. Instead of 2.5 , it’ll show as $2.5 .
• Lines 26 to 38: You adjust the axes, the color of the figure, and the title format in the layout section of the graph.
• Lines 11 and 41: You wrap the graph in a <div> element with a "card" class. This will give the graph a white background and add a small shadow below it.
• Lines 9 and 47: You add a <div> element that wraps the graph components with a wrapper class.

There are similar adjustments to the sales and volume charts. You can see those in the full code for the updated app.py in the collapsible section below:

This is the updated version of app.py . It has the required changes in the code to add a favicon and a page title, update the font family, and use an external CSS file. After these changes, your dashboard should look like this:

In the next section, you’ll learn how to add interactive components to your dashboard.

Add Interactivity to Your Dash Apps Using Callbacks

In this section, you’ll learn how to add interactive elements to your dashboard.

Dash’s interactivity is based on a reactive programming paradigm. This means that you can link components with elements of your app that you want to update. If a user interacts with an input component like a dropdown or a range slider, then the output, such as a graph, will react automatically to the changes in the input.

Now you’re going to make your dashboard interactive. This new version of your dashboard will allow the user to interact with the following filters:

• Type of avocado

The collapsible boxes below contain the full source code that you’ll be exploring in this section. Start by replacing your local app.py with the new version in the collapsible section below:

Next, replace style.css with the code in the collapsible section below:

Now you’re ready to explore the interactive components that you’ve added to your application!

First, you’ll learn how to create components that users can interact with. For that, you’ll include a new <div> element above your charts. It’ll include two dropdowns and a date range selector that the user can use to filter the data and update the graphs.

You start by changing how you process your data. You no longer filter the data when you read them. Instead you find the regions and avocado types that are present in your data:

Next, you’ll use regions and avocado_types to populate a few dropdowns. Here’s how that looks in app.py :

On lines 10 to 62, you define a <div> element above your graphs, consisting of two dropdowns and a date range selector. It’ll serve as a menu that the user will use to interact with the data:

The first component in the menu is the Region dropdown. Focus on the code for that component:

Here, you define the dropdown that users will use to filter the data by region. In addition to the title, it has a dcc.Dropdown component. Here’s what each of the parameters means:

• id is the identifier of this element.
• options indicates the options shown when the dropdown is selected. It expects a dictionary with labels and values.
• value is the default value when the page loads.
• clearable allows the user to leave this field empty if set to True .
• className is a CSS class selector used for applying styles.

The Type and Date Range selectors follow the same structure as the Region dropdown. Feel free to review them on your own.

Next, take a look at the dcc.Graphs components:

In this part of the code, you define the dcc.Graph components. You may have noticed that, compared to the previous version of the dashboard, the components are missing the figure argument. That’s because a callback function will now generate the figure argument using the inputs that the user sets using the Region, Type, and Date Range selectors.

You’ve defined how the user will interact with your application. Now you need to make your application react to user interactions. For that, you’ll use callback functions.

Dash’s callback functions are regular Python functions with an app.callback decorator . In Dash, when an input changes, a callback function is triggered. The function performs some predetermined operations, like filtering a dataset, and returns an output to the application. In essence, callbacks link inputs and outputs in your app.

Here’s the callback function that’s used for updating the graphs:

On lines 6 to 11, you define the inputs and outputs inside the app.callback decorator.

First, you define the outputs using Output objects. They take two arguments:

• The identifier of the element that they’ll modify when the function executes
• The property of the element to be modified

For example, Output("price-chart", "figure") will update the figure property of the "price-chart" element.

Then you define the inputs using Input objects. They also take two arguments:

• The identifier of the element that they’ll be watching for changes
• The property of the watched element that they’ll be watching for changes

So, Input("region-filter", "value") will watch the "region-filter" element and its value property for changes. The argument passed on to the callback function will be the new value of region-filter.value .

Note: The Input object that you’re using here is imported directly from dash . Be careful not to confuse it with the Input component coming from dcc . These objects aren’t interchangeable, and they have different purposes.

On line 13, you define the function that’ll be applied when an input changes. It’s worth noticing that the arguments of the function will correspond with the order of the Input objects supplied to the callback. There’s no explicit relationship between the names of the arguments in the function and the values specified in the Input objects.

Finally, on lines 14 to 54, you define the body of the function. In this case, the function takes the inputs (region, type of avocado, and date range), filters the data, and generates the figure objects for the price and volume charts.

That’s all! If you’ve followed along to this point, then your dashboard should look like this:

Way to go! That’s the final version of your dashboard. In addition to making it look beautiful, you also made it interactive. The only missing step is making it public so you can share it with others.

Deploy Your Dash Application to PythonAnywhere

You’re done building your application, and you have a beautiful, fully interactive dashboard. Now you’ll learn how to deploy it.

Dash apps are Flask apps, so both share the same deployment options . In this section, you’ll deploy your app on PythonAnywhere, which offers a free tier for hosting Python web applications in the cloud.

Before you get started, make sure you’ve signed up for a PythonAnywhere beginner account , which is completely free of charge and doesn’t require you to provide any payment details. That said, it comes with a few limitations that you should be aware of. The most important ones will prevent you from doing the following:

• Running more than one web application at a time
• Defining a custom domain name
• Exceeding the available disk quota (512 MB)
• Using the CPU for longer than 100 seconds per day
• Making unrestricted HTTP requests from your app

For this tutorial, though, you won’t need any of that!

If you’re based in Europe, then consider signing up through eu.pythonanywhere.com instead of the www.pythonanywhere.com . It’ll ensure GDPR compliance for your data, which PythonAnywhere will store on servers in Germany. Because of that, you may also experience slightly faster response times. Finally, if you decide to become a paid customer one day, then you’ll be charged in euros instead of US dollars.

Feel free to follow either of the two PythonAnywhere links above if you don’t care about any of these features at the moment. Note, however, that once you register a username on one domain, then you won’t be able to reuse it on the other!

Another reason to think carefully about your username is that it must be unique, as it’ll become a part of your very own domain name, such as in these examples:

Once you register a new account on PythonAnywhere, you must confirm your email address so that you can reset the password if you forget it. Also, it might be a good idea to enable two-factor authentication on the Security tab in your Account settings as an extra security measure.

If you’ve just created a new account, then you’re already good to go. But if you registered a PythonAnywhere account a while ago, then you might need to change your system image to a newer one, which comes with a more recent Python version and newer third-party libraries. At the time of writing, the latest image, called haggis , shipped with Python 3.10.5, pandas 1.3.5, and Dash 2.4.1.

Note: You can always check the available batteries for a given image and Python version.

With that out of the way, it’s time to create your first web app on PythonAnywhere!

Because Dash apps are Flask apps with some extra frills, you can take advantage of PythonAnywhere’s excellent support for this popular Python web framework.

When you’re logged in to your PythonAnywhere account, create a new Bash shell console, either from the Dashboard or the Consoles tab. This will throw you into an interactive prompt of the virtual server, letting you remotely execute commands straight from your web browser.

There are already several useful programs installed for you, including a Git client, which you’ll use to get your project’s source code into PythonAnywhere. You can also upload files in other ways, but using Git seems the most convenient. If you haven’t made your own repository yet, then you might clone Real Python’s materials repository with your sample Dash application in it:

The --depth=1 option tells Git only to clone the latest commit, which saves time and disk space. Note that if you don’t want to configure SSH keys for your PythonAnywhere machine, then you’ll have to clone a public repository using the HTTPS protocol. Since August 2021, cloning private repositories has been possible only after configuring a personal access token in GitHub.

When the repository is cloned, you can move and rename a subfolder with the finished avocado app to your home folder on PythonAnywhere, and then remove the rest of the materials:

Remember that you only have 512 megabytes of disk space on the free tier at your disposal, and the materials take up a significant portion of that!

At this point, your home folder should look like this:

Of course, the username realpython will be different on your account, but the overall folder structure should remain the same.

Now, go the Web tab and click the button labeled Add a new web app . This will open a wizard, asking you a few questions. First, select Flask as the Python web framework of your choice:

Next, you’ll see a specific Flask version running on top of the given Python interpreter. Select the latest version available:

In the next step, you’ll need to update the file path leading up to the main Python module with your Flask app:

While you can change it later, it’s much easier if you do it right now, so make sure to rename the default mysite/ folder with avocado_analytics/ to match your project’s name. At the same time, you want to keep the suggested flask_app.py filename intact. PythonAnywhere will generate this file and populate it with a demo app, so if you renamed it to app.py , then the code that you cloned from GitHub would get overwritten!

Once this is done, you’ll be presented with a number of configuration options for your new web app. First, you need to update the working directory of the app to be the same as the source code:

This will ensure that Python can find your avocado.csv file at runtime and open it for reading.

Next, you’ll need to tweak the default WSGI server configuration, which is slightly different for Dash apps than it is for Flask. PythonAnywhere uses the uWSGI server behind the scenes, which reads the configuration from a special Python module located in the /var/www/ folder.

Click the WSGI configuration file option visible in the screenshot above to open it in an editor in your web browser:

You need to rename the flask_app module generated by the wizard to the actual app module that came with your avocado project. Besides that, you must expose the callable WSGI application through the Dash app’s .server field, as described in the official help page on PythonAnywhere. You might as well double-check if the path in your project_home variable is correct.

Finally, save the file by hitting Ctrl + S , go back to the Web tab, and click the green button to reload your web app:

When you visit the corresponding URL of your web app deployed to PythonAnywhere, you should see the familiar interface:

That’s it! Note that you never installed Dash or pandas because they were already shipped with PythonAnywhere. Also, you didn’t have to configure static resources , which are typically served by the web server rather than Flask, because Dash takes care of them automatically.

Note: If you need more control over the external library versions, then you can use virtualenvwrapper to create a virtual environment for the platform and manually install those dependencies. Unfortunately, doing so will likely consume all of your disk space and drain your CPU bandwidth to the point you’ll end up in the tarpit .

You can now share your Dash apps with the world by deploying them to PythonAnywhere or other web hosting providers.

Congratulations! You just built, customized, and deployed your first dashboard using Dash. You went from a bare-bones dashboard to a fully interactive one deployed on PythonAnywhere.

With this knowledge, you can use Dash to build analytical applications to share with others. As more companies put more weight on the use of data, knowing how to use Dash will increase your impact in the workplace. What used to be a task only experts could perform, you can now do in an afternoon.

In this tutorial, you’ve learned:

• How to create a dashboard using Dash
• How to customize the styling of your Dash application
• How to make your app interactive by using Dash components
• What callbacks are and how you can use them to create interactive applications
• How to deploy your application on PythonAnywhere

Now you’re ready to develop new Dash applications. Find a dataset, think of some exciting visualizations, and build another dashboard!

You can download the source code, data, and resources for the sample applications that you made in this tutorial by clicking the link below:

🐍 Python Tricks 💌

Get a short & sweet Python Trick delivered to your inbox every couple of days. No spam ever. Unsubscribe any time. Curated by the Real Python team.

About Dylan Castillo

Dylan is a Data Scientist and self-taught developer specialized in Natural Language Processing (NLP). He has experience working on large-scale Machine Learning projects and enjoys writing about data-related topics.

Each tutorial at Real Python is created by a team of developers so that it meets our high quality standards. The team members who worked on this tutorial are:

Master Real-World Python Skills With Unlimited Access to Real Python

Join us and get access to thousands of tutorials, hands-on video courses, and a community of expert Pythonistas:

Join us and get access to thousands of tutorials, hands-on video courses, and a community of expert Pythonistas:

What Do You Think?

What’s your #1 takeaway or favorite thing you learned? How are you going to put your newfound skills to use? Leave a comment below and let us know.

Commenting Tips: The most useful comments are those written with the goal of learning from or helping out other students. Get tips for asking good questions and get answers to common questions in our support portal . Looking for a real-time conversation? Visit the Real Python Community Chat or join the next “Office Hours” Live Q&A Session . Happy Pythoning!

Keep Learning

Related Topics: intermediate data-science data-viz

Recommended Video Course: Data Visualization Interfaces in Python With Dash

Keep reading Real Python by creating a free account or signing in:

Already have an account? Sign-In

Almost there! Complete this form and click the button below to gain instant access:

Data Visualization Interfaces With Dash (Source Code)

🔒 No spam. We take your privacy seriously.

• python-pptx 1.0.0 documentation »

python-pptx ¶

Release v1.0.0 ( Installation )

python-pptx is a Python library for creating, reading, and updating PowerPoint (.pptx) files.

A typical use would be generating a PowerPoint presentation from dynamic content such as a database query, analytics output, or a JSON payload, perhaps in response to an HTTP request and downloading the generated PPTX file in response. It runs on any Python capable platform, including macOS and Linux, and does not require the PowerPoint application to be installed or licensed.

It can also be used to analyze PowerPoint files from a corpus, perhaps to extract search indexing text and images.

In can also be used to simply automate the production of a slide or two that would be tedious to get right by hand, which is how this all got started.

More information is available in the python-pptx documentation .

Browse examples with screenshots to get a quick idea what you can do with python-pptx.

Philosophy ¶

python-pptx aims to broadly support the PowerPoint format (PPTX, PowerPoint 2007 and later), but its primary commitment is to be industrial-grade , that is, suitable for use in a commercial setting. Maintaining this robustness requires a high engineering standard which includes a comprehensive two-level (e2e + unit) testing regimen. This discipline comes at a cost in development effort/time, but we consider reliability to be an essential requirement.

Feature Support ¶

python-pptx has the following capabilities:

• Round-trip any Open XML presentation (.pptx file) including all its elements
• Populate text placeholders, for example to create a bullet slide
• Add image to slide at arbitrary position and size
• Add textbox to a slide; manipulate text font size and bold
• Add table to a slide
• Add auto shapes (e.g. polygons, flowchart shapes, etc.) to a slide
• Add and manipulate column, bar, line, and pie charts
• Access and change core document properties such as title and subject
• And many others …

Even with all python-pptx does, the PowerPoint document format is very rich and there are still features python-pptx does not support.

New features/releases ¶

New features are generally added via sponsorship. If there’s a new feature you need for your use case, feel free to reach out at the email address on the github.com/scanny profile page. Many of the most used features such as charts were added this way.

User Guide ¶

Introduction

• Getting Started
• Working with Presentations
• Working with Slides
• Understanding Shapes
• Working with AutoShapes
• Understanding placeholders
• Working with placeholders
• Working with text
• Working with charts
• Working with tables
• Working with Notes Slides

Community Guide ¶

• Frequently Asked Questions
• Software Updates

API Documentation ¶

• Presentation function
• Presentation objects
• CoreProperties objects
• Slides objects
• Slide objects
• SlideLayouts objects
• SlideLayout objects
• SlideMasters objects
• SlideMaster objects
• SlidePlaceholders objects
• NotesSlide objects
• SlideShapes objects
• GroupShapes objects
• Shape objects in general
• Shape objects (AutoShapes)
• Connector objects
• FreeformBuilder objects
• Picture objects
• GraphicFrame objects
• GroupShape objects
• MasterPlaceholder objects
• LayoutPlaceholder objects
• ChartPlaceholder objects
• PicturePlaceholder objects
• TablePlaceholder objects
• PlaceholderGraphicFrame objects
• PlaceholderPicture objects
• _PlaceholderFormat objects
• Table objects
• _Column objects
• _Row objects
• _Cell objects
• ChartData objects
• Chart objects
• Legend objects
• Axis objects
• MajorGridlines objects
• TickLabels objects
• _BasePlot objects
• DataLabels objects
• Series objects
• Point objects
• TextFrame objects
• Font objects
• _Paragraph objects
• _Run objects
• ActionSetting objects
• Hyperlink objects
• ChartFormat objects
• FillFormat objects
• LineFormat objects
• ColorFormat objects
• RGBColor objects
• ShadowFormat objects
• Image objects
• util Module
• MSO_AUTO_SHAPE_TYPE
• MSO_AUTO_SIZE
• MSO_COLOR_TYPE
• MSO_CONNECTOR_TYPE
• MSO_FILL_TYPE
• MSO_LANGUAGE_ID
• MSO_LINE_DASH_STYLE
• MSO_PATTERN_TYPE
• MSO_SHAPE_TYPE
• MSO_TEXT_UNDERLINE_TYPE
• MSO_THEME_COLOR_INDEX
• MSO_VERTICAL_ANCHOR
• PP_ACTION_TYPE
• PP_MEDIA_TYPE
• PP_PARAGRAPH_ALIGNMENT
• PP_PLACEHOLDER_TYPE
• XL_AXIS_CROSSES
• XL_CATEGORY_TYPE
• XL_CHART_TYPE
• XL_DATA_LABEL_POSITION
• XL_LEGEND_POSITION
• XL_MARKER_STYLE
• XL_TICK_LABEL_POSITION
• XL_TICK_MARK
• Excel Number Formats

Contributor Guide ¶

• Running the test suite
• Understanding xmlchemy
• Development Practices

Table of Contents

• Feature Support
• New features/releases
• Community Guide
• API Documentation
• Contributor Guide

Useful Links

• python-pptx @ GitHub
• python-pptx @ PyPI
• Issue Tracker

Quick search

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

embedding or linking html file in Powerpoint using python and pptx

I'm trying to create a link on my power point slide to a local HTML file that i'd like to open up. I have a plotly figure exported as both an HTML file and a PNG, where I want to have the PNG on the power point slide to show the figure, and then either want to click the image, or a seperate icon to the side, to open the HTML figure so there is an interactive view of the data. Here are the things I've tried.

I can insert the PNG's into the slides without any problem, and I tired doing shape.click_action.hyperlink.address = os.path.realpath(htmlPath) to open the figure, but that didn't work, it just opens a file browser to the location where the power point is saved (not even to the html file).

I can manually add a sperate icon that will open the html file (Insert>Object>Create from file> "html file path"), and that works. if I save that power point file as an XML and try to look at the progid of the html file, I only shows progId="Package" . If i try to do the same thing in python using shape = shapes.add_ole_object(htmlPath, 'Package', left=Inches(1), top=Inches(3)) it will insert an object, but then going to click on the object I always get an error saying "Embedded object is corrupted or has an emtpy file name". Below is the full code I used for this, here the testBlank.pptx file is just a power point file with two slides, the first is a title slide, and the second is a blank slide where I'm trying to create a link to the HTML file

I've tried searching, but can't find a different way of embedding or linking the file. Has anyone else had any luck with this?

• python-pptx

• I can manually add a sperate icon that will open the html file (Insert>Object>Create from file> "html file path"), and that works . Here it works with you but manually, right? –  Hamzah Al-Qadasi Commented Oct 19, 2022 at 4:15
• correct, I can do it manually and the HTMl opens fine then, but if I try to do the same thing but using python by trying to add a OLE object, it doesn't work. –  gerrgheiser Commented Oct 19, 2022 at 19:20
• Does a file: URL work? –  Martin Packer Commented Oct 23, 2022 at 7:42
• well... that does indeed work. I tried using that before by doing shape.click_action.hyperlink.address = os.path.realpath(filename) , and that wasn't working, but that's because most of the file paths had a # character in it, and that was what was causing the problem... so now i've got to figure how to handle those special symbols. if you'd like to post that as an answer I'm happy to accept it. I'm glad I tried it that way again and just happened to use a path that didn't have any special characters in it –  gerrgheiser Commented Oct 25, 2022 at 16:04

Know someone who can answer? Share a link to this question via email , Twitter , or Facebook .

Your answer.

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Browse other questions tagged python html plotly python-pptx or ask your own question .

• The Overflow Blog
• LLMs evolve quickly. Their underlying architecture, not so much.
• From PHP to JavaScript to Kubernetes: how one backend engineer evolved over time
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Feedback requested: How do you use tag hover descriptions for curating and do...
• What does a new user need in a homepage experience on Stack Overflow?
• Staging Ground Reviewer Motivation

Hot Network Questions

• Hotspot vs home internet
• Is the error in translation of Genesis 19:5 deliberate?
• Quality difference between Sigma 30mm f1.4 Art and Contemporary
• Submitting a paper as a nonacademic practitioner in a field
• Is this an accurate interpretation of the elasticity magus arcana?
• Flyback Diode Question
• How many kms do aluminum rims last when ridden in city and/or road conditions?
• What's the origin of the colloquial "peachy", "simply peachy", and "just peachy"?
• Are automorphisms of matrix algebras necessarily determinant preservers?
• Solve an equation perturbatively
• How is the grammar of this sentence explained?
• What are the limits of Terms of Service as a legal shield for a company?
• Please help me to identify specific house plant
• Do mini-humans need a "real" Saturn V to reach the moon?
• Crystal Oscillator Waveform
• Need strftime() output in the buffer
• My PC takes so long to boot for no reason
• Short story involving a dystopian future, suspended animation, and a dumbing of society solution
• How to ensure a BSD licensed open source project is not closed in the future?
• If physics can be reduced to mathematics (and thus to logic), does this mean that (physical) causation is ultimately reducible to implication?
• How can I draw water level in a cylinder like this?
• Can I use "historically" to mean "for a long time" in "Historically, the Japanese were almost vegetarian"?
• using a tikz foreach loop inside a newcommand
• Canceling factors in a ratio of factorials

Build a Pacman Game with Python

Introduction :

In this tutorial, we’ll create a classic Pacman game using Python. This project will use the turtle graphics module for drawing and the freegames module for handling game logic. Our Pacman game will include movement, collision detection, and scorekeeping.

This Pacman game is a simplified version of the classic arcade game. In this version, Pacman moves around a grid, eating pellets while avoiding ghosts. The game keeps track of the score and allows for basic movement in four directions. This project is a great exercise in understanding game development concepts using Python

Explanation :

Required Modules To run this project, you’ll need the turtle and freegames modules. Install the freegames module using pip

How to Run the Code 1. Install Dependencies: ○ Ensure you have Python installed. ○ Install the freegames module using pip. 2. Runthe Code: ○ Savetheprovided code in a file named pacman_game.py. Run the script using Python

 Use the Game: ○ Usethearrow keys to move Pacman: ■ RightArrow: Move right ■ LeftArrow: Move left ■ UpArrow:Moveup ■ DownArrow:Movedown ○ Pacmaneats pellets, and the score is updated accordingly.

Code Explanation Let’s walk through the key parts of the code: 1. Importing Modules

 Weimport the turtle module for graphics, the random module for random ghost movement, and vector for handling points in the game. 2. Game Setup

state:Dictionary to keep track of the score. ● pathandwriter: Turtle objects used for drawing and score display. ● aim:Vector representing Pacman’s current direction. ● pacman: Vector for Pacman’s position. ● ghosts: List of ghost positions and movement vectors

Drawing Functions ● square(x, y):Draws a square at the specified position to represent walls and pellets

offset(point): Converts a point’s coordinates to a tile index in the grid.

valid(point): Checks if a point is valid for movement (not a wall).

world(): Draws the game world including walls and pellets

Game Logic ● move(): Moves Pacman and ghosts, updates the game state

 change(x, y):Changes Pacman’s direction if valideo.

5. Initializing the Game

setup(): Initializes the window. ● hideturtle(): Hides the turtle cursor. ● tracer(False): Disables automatic screen updates for better performance. ● writer.write(): Displays the score. ● onkey(): Registers key bindings for movement. ● world()andmove(): Draw the game world and start the game loop

Source Code :

 When you run the code, you will see a window displaying the Pacman game. Pacman will navigate a grid, consuming pellets and increasing the score. Ghosts will move randomly, adding a challenge to the game

Reference For more detailed information on the turtle and freegames modules, you can refer to their respective documentation: ● Turtle Graphics Documentation

More HTML CSS JS Projects

Instagram Home Clone Using HTML, CSS and JavaScript

Google Homepage Clone Using HTML and CSS

YouTube Clone Using HTML, CSS and JavaScript

WhatsApp Web UI Clone using HTML & CSS

Real Time Chat App Using HTML, CSS, JavaScript and ReactJs

Admin Dashboard Using HTML, CSS, JavaScript and ReactJs

Crypto Currency Tracker Using HTML, CSS, JavaScript and ReactJs

Facebook Messenger Using HTML, CSS, JavaScript and ReactJs

Exercise App using HTML, CSS, JavaScript and ReactJs

Spotify Clone Using HTML, CSS, JavaScript and ReactJs

Figma Clone Using HTML, CSS, JavaScript and ReactJs

Youtube Clone Using HTML, CSS, JavaScript and ReactJs

Chat Application Using HTML , CSS And Javascript

Travel Planner Website Using HTML , CSS And Javascript

Dictionary App using HTML, CSS, JavaScript & ReactJs

Weather App using HTML CSS, JavaScript & React Js

Invoice/Bill Generator App using HTML CSS, JavaScript & React Js

News App using HTML, CSS, JavaScript & ReactJs

Rock Paper Scissor Game Using HTML , CSS And Javascript

Color Guessing Game using HTML , CSS And Javascript

Fanta Landing Page Using HTML CSS And JS

Youtube Thumbnail Downloader Using HTML , CSS And Javascript

Amazing Love Puzzle Using HTML , CSS And Javascript

Word Counter Website Using HTML , CSS And Javascript

Responsive Restaurant Website Using HTML , CSS & Javascript

Student Registration Dashboard Using HTML , CSS And Javascript,

Finance Website Using HTML , CSS & Javascript

Snake Game Using HTML , CSS And Javascript

Responsive Music Player Using HTML , CSS & JS

Responsive Sign In & Sign Up Form Using HTML , CSS And JS

Flappy Bird Using HTML, CSS and JS

Facebook Clone Using HTML, CSS and JS

Spotify Clone Using HTML, CSS and JS

Ticket Management System Using HTML, CSS and JS

pong gaming using html css javascript

Facebook Login Using HTML, CSS & JS

Maze Game using HTML CSS and JavaScript

word scramble game using html css javascript

Create Responsive Website Using HTML, CSS & JS

Create Simple Website Using HTML and CSS

Holi Fluid animation using html css javascript with source code | Holi project using html css javascript

Recipe Finder App using HTML CSS, JavaScript & React Js

Quiz App using HTML CSS, JavaScript & React Js

Music Player using HTML, CSS, JavaScript and React

Expense Tracker App using HTML, CSS, JavaScript and ReactJs Framework

E-commerce App using HTML, CSS, JavaScript and React Framework

Personal Portfolio using HTML, CSS and JavaScript

Snake Game using HTML, CSS and JavaScript

NETFLIX Clone using HTML CSS & JavaScript

Tic Tac Toe Game using HTML, CSS and JavaScript

Typing Speed Test Game in HTML CSS & JavaScript

Amazon Clone using HTML and CSS

QR Code Generator using HTML, CSS and JavaScript

Hangman Game using HTML, CSS and JavaScript

AI Image Generator using HTML, CSS and JavaScript

News App using HTML, CSS and JavaScript

Speech to Text Converter using HTML, CSS and JavaScript

Currency Converter using HTML, CSS and JavaScript

Drum kit using HTML, CSS and JavaScript

Notes app using HTML, CSS and JavaScript

Music Player using HTML, CSS and JavaScript

To-Do List using HTML, CSS and JS

BMI Calculator Using HTML , CSS & JavaScript

Real-Time Chat Application Using HTML , CSS & JavaScript

Interactive Login and Registration Form Using HTML , CSS & JavaScript

Quiz app Using HTML, CSS & Javascript

Dynamic Interactive Calculator Using HTML CSS JS

Web Based Guess the Number Using HTML , CSS & JavaScript

Task Manager Using HTML , CSS , JavaScript

Personal Portfolio Website Using HTML , CSS , JavaScript

Weather App Using HTML , CSS & JavaScript

Countdown Timer Using HTML , CSS & JavaScript.

E-commerce website using HTML CSS JS

Library Management System using HTML

Make a Simple calculator using html css and js

To-Do Manager using HTML CSS JS

Learn How to Make digital countdown using web development

Get Huge Discounts

Get Discount on Top EdTech Compnies

• 45% Discount on SkillShare
• 10% Discount on KodeKoloud
• 30% Discount on AlmaBetter
• 10% Discount on Coding Ninjas
• Upto 80% Discount on GeeksforGeeks

Find More Projects

Optical Illusion Game with Python

Optical Illusion Game with Python Introduction :  In this tutorial, we’ll create a simple optical illusion using Python’s turtle graphics module. Theillusion …

Cannon Game Using Python

Cannon Game Using Python Introduction :  In this tutorial, we’ll create a simple cannon game using Python. The game will involve acannonball …

Build Your Own Paint App with Python

Build Your Own Paint App with Python Introduction :  In this tutorial, we’ll create a simple paint application using Python. Ourpaint app …

Build a Pacman Game with Python Introduction : In this tutorial, we’ll create a classic Pacman game using Python. This project will …

Blackjack Game Using Python

Blackjack Game Using Python Introduction : Blackjack, also known as 21, is a popular card game that combines strategy and luck. In …

A Simple Maze Drawing Game in Python

A Simple Maze Drawing Game in Python Introduction : In this game, the maze is generated randomly, and you interact with it …

CodeWithCurious is a Best Place to Learn & grow your Career in IT sector. Best Content on the latest technology in including C, C++, Java, Python, Sql, Web development & Interview Preparation Material free of cost.

• Privacy Policy
• Terms & Conditions
• Affiliate Discloser

Follow us for more!

© 2023 All Rights Reserved CodeWithCurious

All Coding Handwritten Notes

Browse Handwritten Notes