Customizing Visual Styles in Plotly

Overview

Customizing Visual Styles in Plotly

Code for a workshop originally developed for an Unconference session during the Outlier Conference hosted by Data Visualization Society.

To jump right in:

Fork this repository, or download the Jupyter Notebook file Styling_Plotly_Themes_Templates.ipynb.

Ever have that feeling that a lot of data viz you see screams the tool it was made in? Using the Plotly Open Source Python Graphing Library, we will take a look under the hood of:

  • the style themes available,
  • understand the visual elements like figure and chart backgrounds, and
  • build our own default theme script inspired by 1980's computers.

This informal workshop is for a seasoned Pythonista wanting to add to your design toolbox or a newbie curious about custom interfaces beyond the usual BI tools (listen or follow along).

You can also check out all of Plotly's open source graphing libraries, including R, JavaScript, and more here.

Quick Start Prep

(most of this occurs before the workshop to follow along live...)

We're not going to spend too much time here, but if you're just starting out in Python, and want to get your hands dirty, here's a few building blocks useful to get the most from the workshop:

  1. Python ...All you really need is a Python code interpreter installed as a foundation.

    1. Start from the source, Python Software Foundation's helpful steps and downloads (yep, the be all end all source).
      1. Many computers come with a version pre-installed, a bit old, but if you don't want to touch or download anything, it may get you acquainted, at least. (to check in command line or terminal, run python --version)
    2. Or Python comes with an Anaconda installation (bigger topic than this workshop, but if you're in it for the long haul using Python consider e.g. the Individual Edition or a miniconda).

  2. A virtual environment (optional, but do this next if you're doing it.)

    1. Skip this step if the sound of it or # steps has you scared away already! Don't go, stay!
    2. It's recommended, but not necessary, to make and work in an isolated virtual environment for any Python project like this one, to help manage work requiring different versions of things.
      1. Options to manage this:
        1. I find virtualenv a sure bet,
          1. (e.g. On Mac Terminal (Zsh), from my project root folder, I ran virtualenv plotlystyle_env to make it; to activate it, I'll run source plotlystyle_env/bin/activate) _pip install virtualenv_if necessary first.
          2. I'll refer you to the docs for Windows.
        2. the simplified venv built into Python version 3.3+,
        3. Conda which I feel is cleanest with its centralized file structure, but fussy at times like an angry schoolchild, and
        4. those are the big ones.

  3. Jupyter Notebook (strongly recommended, we'll spend the workshop in the .ipynb Notebook file)

    1. Notebooks run directly in your web browser, so you need: Chrome, Safari, or Firefox (up to date Opera and Edge maybe works)

    2. If you installed an Anaconda distribution in step 1, congratulations, Jupyter Notebook is included! Read up on running the Notebook where we'll pick up!

    3. You can alternately install Jupyter Notebook with the pip package manager.

    4. If you're working in a virtual environment (step 2 above), also install the IPython kernel.

      1. Otherwise, this Jupyter Notebooks does have this automatically for your system Python interpreter.
      2. This basically supports more quick, interactive, code which makes Notebooks great for learning in chunks, and exploring without running a whole script.
  4. Kiss your brain!

Who's tired of hyperlinks and docs already?! You promised fun!

General Disclaimer

This work is open source, like Plotly Open Source Graphing Libraries, so try it, use it and spread the love by teaching someone else!
To keep up with what others are working on, join the Plotly Community Forum. Made with 💌 for the Python and data viz ecosystems under the limited liability company Data, Design & Daughters LLC doing business as Data Design Dimension by Kathryn Hurchla.

You might also like...
Regress.me is an easy to use data visualization tool powered by Dash/Plotly.

Regress.me Regress.me is an easy to use data visualization tool powered by Dash/Plotly. Regress.me.-.Google.Chrome.2022-05-10.15-58-59.mp4 Get Started

Lumen provides a framework for visual analytics, which allows users to build data-driven dashboards from a simple yaml specification
Lumen provides a framework for visual analytics, which allows users to build data-driven dashboards from a simple yaml specification

Lumen project provides a framework for visual analytics, which allows users to build data-driven dashboards from a simple yaml specification

Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.
Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

Make visual music sheets for thatskygame (graphical representations of the Sky keyboard)
Make visual music sheets for thatskygame (graphical representations of the Sky keyboard)

sky-python-music-sheet-maker This program lets you make visual music sheets for Sky: Children of the Light. It will ask you a few questions, and does

A small script written in Python3 that generates a visual representation of the Mandelbrot set.
A small script written in Python3 that generates a visual representation of the Mandelbrot set.

Mandelbrot Set Generator A small script written in Python3 that generates a visual representation of the Mandelbrot set. Abstract The colors in the ou

PyFlow is a general purpose visual scripting framework for python
PyFlow is a general purpose visual scripting framework for python

PyFlow is a general purpose visual scripting framework for python. State Base structure of program implemented, such things as packages disco

This is a small program that prints a user friendly, visual representation, of your current bsp tree
This is a small program that prints a user friendly, visual representation, of your current bsp tree

bspcq, q for query A bspc analyzer (utility for bspwm) This is a small program that prints a user friendly, visual representation, of your current bsp

The visual framework is designed on the idea of module and implemented by mixin method

Visual Framework The visual framework is designed on the idea of module and implemented by mixin method. Its biggest feature is the mixins module whic

A Neural Language Style Transfer framework to transfer natural language text smoothly between fine-grained language styles like formal/casual, active/passive, and many more. Created by Prithiviraj Damodaran. Open to pull requests and other forms of collaboration. Flexitext is a Python library that makes it easier to draw text with multiple styles in Matplotlib
Flexitext is a Python library that makes it easier to draw text with multiple styles in Matplotlib

Flexitext is a Python library that makes it easier to draw text with multiple styles in Matplotlib

This is a python table of data implementation with styles, colors
This is a python table of data implementation with styles, colors

Table This is a python table of data implementation with styles, colors Example Table adapts to the lack of data Lambda color features Full power of l

ShuttleNet: Position-aware Fusion of Rally Progress and Player Styles for Stroke Forecasting in Badminton (AAAI 2022)

ShuttleNet: Position-aware Rally Progress and Player Styles Fusion for Stroke Forecasting in Badminton (AAAI 2022) Official code of the paper ShuttleN

A curated list of awesome Dash (plotly) resources

Awesome Dash A curated list of awesome Dash (plotly) resources Dash is a productive Python framework for building web applications. Written on top of

The interactive graphing library for Python (includes Plotly Express) :sparkles:
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Productivity Tools for Plotly + Pandas
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

The interactive graphing library for Python (includes Plotly Express) :sparkles:
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Productivity Tools for Plotly + Pandas
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

Automated GitHub profile content using the USGS API, Plotly and GitHub Actions.
Automated GitHub profile content using the USGS API, Plotly and GitHub Actions.

Top 20 Largest Earthquakes in the Past 24 Hours Location Mag Date and Time (UTC) 92 km SW of Sechura, Peru 5.2 11-05-2021 23:19:50 113 km NNE of Lobuj

Custom Plotly Dash components based on Mantine React Components library

Dash Mantine Components Dash Mantine Components is a Dash component library based on Mantine React Components Library. It makes it easier to create go

Comments
  • Add a Binder Notebook

    Add a Binder Notebook

    Is your feature request related to a problem? Please describe. So that people can directly run the notebook code, and don’t need to install anything.

    Describe the solution you'd like You could create a Binder notebook with your Jupyter notebook on Github.

    • Turns a Git repo into a collection of interactive notebooks.
    • mybinder.org contains information on how to do this.
    • If anyone wants to do this. Let me know and I can add collaborators to this repository.

    Describe alternatives you've considered Adding a requirements.txt file as a quick way to install the same Plotly package dependencies at least.

    Additional context Friendly anonymous suggestion from Outlier 2022 participant, via the session notes here: https://docs.google.com/document/d/1YM2Wfw3ve73R6lDOcZ79zKYbYEz7_tDpsA1v9sfiR5E/edit

    enhancement good first issue 
    opened by khurchla 0
Owner
Data Design Dimension
Impact. Visualize. Grow. Full lifecycle data studio to optimize, build flows, and gain traction while you go.
Data Design Dimension
A curated list of awesome Dash (plotly) resources

Awesome Dash A curated list of awesome Dash (plotly) resources Dash is a productive Python framework for building web applications. Written on top of

Luke Singham 1.7k Dec 26, 2022
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Plotly 12.7k Jan 5, 2023
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

Jorge Santos 2.7k Dec 30, 2022
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Plotly 8.9k Feb 18, 2021
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

Jorge Santos 2.1k Feb 18, 2021
Custom Plotly Dash components based on Mantine React Components library

Dash Mantine Components Dash Mantine Components is a Dash component library based on Mantine React Components Library. It makes it easier to create go

Snehil Vijay 239 Jan 8, 2023
A Simple Flask-Plotly Example for NTU 110-1 DSSI Class

A Simple Flask-Plotly Example for NTU 110-1 DSSI Class Live Demo Prerequisites We will use Flask and Ploty to build a Flask application. If you haven'

Ting Ni Wu 1 Dec 11, 2021
A dashboard built using Plotly-Dash for interactive visualization of Dex-connected individuals across the country.

Dashboard For The DexConnect Platform of Dexterity Global Working prototype submission for internship at Dexterity Global Group. Dashboard for real ti

Yashasvi Misra 2 Jun 15, 2021
Peloton Stats to Google Sheets with Data Visualization through Seaborn and Plotly

Peloton Stats to Google Sheets with Data Visualization through Seaborn and Plotly Problem: 2 peloton users were looking for a way to track their metri

null 9 Jul 22, 2022
A shimmer pre-load component for Plotly Dash

dash-loading-shimmer A shimmer pre-load component for Plotly Dash Installation Get it with pip: pip install dash-loading-extras Or maybe you prefer Pi

Lucas Durand 4 Oct 12, 2022