• Stars
    star
    362
  • Rank 117,671 (Top 3 %)
  • Language PostScript
  • License
    Other
  • Created over 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Fast static image export for web-based visualization libraries with zero dependencies

Overview

Kaleido is a cross-platform library for generating static images (e.g. png, svg, pdf, etc.) for web-based visualization libraries, with a particular focus on eliminating external dependencies. The project's initial focus is on the export of plotly.js images from Python for use by plotly.py, but it is designed to be relatively straight-forward to extend to other web-based visualization libraries, and other programming languages. The primary focus of Kaleido (at least initially) is to serve as a dependency of web-based visualization libraries like plotly.py. As such, the focus is on providing a programmatic-friendly, rather than user-friendly, API.

Installing Kaleido

The kaleido package can be installed from PyPI using pip...

$ pip install kaleido

or from conda-forge using conda.

$ conda install -c conda-forge python-kaleido

Releases of the core kaleido C++ executable are attached as assets to GitHub releases at https://github.com/plotly/Kaleido/releases.

Use Kaleido to export plotly.py figures as static images

Versions 4.9 and above of the Plotly Python library will automatically use kaleido for static image export when kaleido is installed. For example:

import plotly.express as px
fig = px.scatter(px.data.iris(), x="sepal_length", y="sepal_width", color="species")
fig.write_image("figure.png", engine="kaleido")

Then, open figure.png in the current working directory.

fig

See the plotly static image export documentation for more information: https://plotly.com/python/static-image-export/.

Low-level Kaleido Scope Developer API

The kaleido Python package provides a low-level Python API that is designed to be used by high-level plotting libraries like Plotly. Here is an example of exporting a Plotly figure using the low-level Kaleido API:

Note: This particular example uses an online copy of the plotly JavaScript library from a CDN location, so it will not work without an internet connection. When the plotly Python library uses Kaleido (as in the example above), it provides the path to its own local offline copy of plotly.js and so no internet connection is required.

from kaleido.scopes.plotly import PlotlyScope
import plotly.graph_objects as go
scope = PlotlyScope(
    plotlyjs="https://cdn.plot.ly/plotly-latest.min.js",
    # plotlyjs="/path/to/local/plotly.js",
)

fig = go.Figure(data=[go.Scatter(y=[1, 3, 2])])
with open("figure.png", "wb") as f:
    f.write(scope.transform(fig, format="png"))

Then, open figure.png in the current working directory.

figure

Background

As simple as it sounds, programmatically generating static images (e.g. raster images like PNGs or vector images like SVGs) from web-based visualization libraries (e.g. Plotly.js, Vega-Lite, etc.) is a complex problem. It's a problem that library developers have struggled with for years, and it has delayed the adoption of these libraries among scientific communities that rely on print-based publications for sharing their research. The core difficulty is that web-based visualization libraries don't actually render plots (i.e. color the pixels) on their own, instead they delegate this work to web technologies like SVG, Canvas, WebGL, etc. Similar to how Matplotlib relies on various backends to display figures, web-based visualization libraries rely on a web browser rendering engine to display figures.

When the figure is displayed in a browser window, it's relatively straight-forward for a visualization library to provide an export-image button because it has full access to the browser for rendering. The difficulty arises when trying to export an image programmatically (e.g. from Python) without displaying it in a browser and without user interaction. To accomplish this, the Python portion of the visualization library needs programmatic access to a web browser's rendering engine.

There are three main approaches that are currently in use among Python web-based visualization libraries:

  1. Bokeh, Altair, bqplot, and ipyvolume rely on the Selenium Python library to control a system web browser such as Firefox or Chrome/Chromium to perform image rendering.
  2. plotly.py relies on Orca, which is a custom headless Electron application that uses the Chromium browser engine built into Electron to perform image rendering. Orca runs as a local web server and plotly.py sends requests to it using a local port.
  3. When operating in the Jupyter notebook or JupyterLab, ipyvolume also supports programmatic image export by sending export requests to the browser using the ipywidgets protocol.

While approaches 1 and 2 can both be installed using conda, they still rely on all of the system dependencies of a complete web browser, even the parts that aren't actually necessary for rendering a visualization. For example, on Linux both require the installation of system libraries related to audio (libasound.so), video (libffmpeg.so), GUI toolkit (libgtk-3.so), screensaver (libXss.so), and X11 (libX11-xcb.so) support. Many of these are not typically included in headless Linux installations like you find in JupyterHub, Binder, Colab, Azure notebooks, SageMaker, etc. Also, conda is still not as universally available as the pip package manager and neither approach is installable using pip packages.

Additionally, both 1 and 2 communicate between the Python process and the web browser over a local network port. While not typically a problem, certain firewall and container configurations can interfere with this local network connection.

The advantage of options 3 is that it introduces no additional system dependencies. The disadvantage is that it only works when running in a notebook, so it can't be used in standalone Python scripts.

The end result is that all of these libraries have in-depth documentation pages on how to get image export working, and how to troubleshoot the inevitable failures and edge cases. While this is a great improvement over the state of affairs just a couple of years ago, and a lot of excellent work has gone into making these approaches work as seamlessly as possible, the fundamental limitations detailed above still result in sub-optimal user experiences. This is especially true when comparing web-based plotting libraries to traditional plotting libraries like matplotlib and ggplot2 where there's never a question of whether image export will work in a particular context.

The goal of the Kaleido project is to make static image export of web-based visualization libraries as universally available and reliable as it is in matplotlib and ggplot2.

Approach

To accomplish this goal, Kaleido introduces a new approach. The core of Kaleido is a standalone C++ application that embeds the open-source Chromium browser as a library. This architecture allows Kaleido to communicate with the Chromium browser engine using the C++ API rather than requiring a local network connection. A thin Python wrapper runs the Kaleido C++ application as a subprocess and communicates with it by writing image export requests to standard-in and retrieving results by reading from standard-out. Other language wrappers (e.g. R, Julia, Scala, Rust, etc.) can fairly easily be written in the future because the interface relies only on standard-in / standard-out communication using JSON requests.

By compiling Chromium as a library, we have a degree of control over what is included in the Chromium build. In particular, on Linux we can build Chromium in headless mode which eliminates a large number of runtime dependencies, including the audio, video, GUI toolkit, screensaver, and X11 dependencies mentioned above. The remaining dependencies can then be bundled with the library, making it possible to run Kaleido in minimal Linux environments with no additional dependencies required. In this way, Kaleido can be distributed as a self-contained library that plays a similar role to a matplotlib backend.

Advantages

Compared to Orca, Kaleido brings a wide range of improvements to plotly.py users.

pip installation support

Pre-compiled wheels for 64-bit Linux, MacOS, and Windows are available on PyPI and can be installed using pip. As with Orca, Kaleido can also be installed using conda.

Improved startup time and resource usage

Kaleido starts up about twice as fast as Orca, and uses about half as much system memory.

Docker compatibility

Kaleido can operate inside docker containers based on Ubuntu 14.04+ or Centos 7+ (or most any other Linux distro released after ~2014) without the need to install additional dependencies using apt or yum, and without relying on Xvfb as a headless X11 Server.

Hosted notebook service compatibility

Kaleido can be used in just about any online notebook service that permits the use of pip to install the kaleido package. These include Colab, Sagemaker, Azure Notebooks, Databricks, Kaggle, etc. In addition, Kaleido is compatible with the default Docker image used by Binder.

Security policy / Firewall compatibility

There were occasionally situations where strict security policies and/or firewall services would block Orca’s ability to bind to a local port. Kaleido does not have this limitation since it does not use ports for communication.

Disadvantages

While this approach has many advantages, the main disadvantage is that building Chromium is not for the faint of heart. Even on powerful workstations, downloading and building the Chromium code base takes 50+ GB of disk space and several hours.

Scope (Plugin) architecture

While motivated by the needs of plotly.py, we made the decision early on to design Kaleido to make it fairly straightforward to add support for additional libraries. Plugins in Kaleido are called "scopes". For more information, see https://github.com/plotly/Kaleido/wiki/Scope-(Plugin)-Architecture.

Language wrapper architecture

While Python is the initial target language for Kaleido, it has been designed to make it fairly straightforward to add support for additional languages. For more information, see https://github.com/plotly/Kaleido/wiki/Language-wrapper-architecture.

Building Kaleido

Instructions for building Kaleido differ slightly across operating systems. All of these approaches assume that the Kaleido repository has been cloned and that the working directory is set to the repository root.

$ git clone [email protected]:plotly/Kaleido.git
$ cd Kaleido

Linux

The Linux build relies on the jonmmease/chromium-builder docker image, and the scripts in repos/linux_scripts, to download the chromium source to a local folder and then build it. Download docker image

$ docker pull jonmmease/chromium-builder:0.9

Fetch the Chromium codebase and checkout the specific tag, then sync all dependencies

$ /repos/linux_scripts/fetch_chromium

Then build the kaleido application to repos/build/kaleido, and bundle shared libraries and fonts. The input source for this application is stored under repos/kaleido/cc/. The build step will also create the Python wheel under repos/kaleido/py/dist/

$ /repos/linux_scripts/build_kaleido x64

The above command will build Kaleido for the 64-bit Intel architecture. Kaleido can also be build for 64-bit ARM architecture with

$ /repos/linux_scripts/build_kaleido arm64

MacOS

To build on MacOS, first install XCode version 11.0+, nodejs 12, and Python 3. See https://chromium.googlesource.com/chromium/src/+/master/docs/mac_build_instructions.md for more information on build requirements.

Then fetch the chromium codebase

$ /repos/mac_scripts/fetch_chromium

Then build Kaleido to repos/build/kaleido. The build step will also create the Python wheel under repos/kaleido/py/dist/

$ /repos/mac_scripts/build_kaleido

Windows

To build on Windows, first install Visual Studio 2019 (community edition is fine), nodejs 12, and Python 3. See https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md for more information on build requirements.

Then fetch the chromium codebase from a Power Shell command prompt

$ /repos/win_scripts/fetch_chromium.ps1

Then build Kaleido to repos/build/kaleido. The build step will also create the Python wheel under repos/kaleido/py/dist/

$ /repos/mac_scripts/build_kaleido.ps1 x64

The above commnad will generate a 64-bit build. A 32-bit build can be generated using

$ /repos/mac_scripts/build_kaleido.ps1 x86

Building Docker containers

chromium-builder

The chromium-builder container mostly follows the instructions at https://chromium.googlesource.com/chromium/src/+/master/docs/linux/build_instructions.md to install depot_tools and run install-build-deps.sh to install the required build dependencies the appropriate stable version of Chromium. The image is based on ubuntu 16.04, which is the recommended OS for building Chromium on Linux.

Build container with:

$ docker build -t jonmmease/chromium-builder:0.9 -f repos/linux_scripts/Dockerfile .

Updating chromium version

To update the version of Chromium in the future, the docker images will need to be updated. Follow the instructions for the DEPOT_TOOLS_COMMIT and CHROMIUM_TAG environment variables in linux_scripts/Dockerfile.

Find a stable chromium version tag from https://chromereleases.googleblog.com/search/label/Desktop%20Update. Look up date of associated tag in GitHub at https://github.com/chromium/chromium/ E.g. Stable chrome version tag on 05/19/2020: 83.0.4103.61, set CHROMIUM_TAG="83.0.4103.61"

Search through depot_tools commitlog (https://chromium.googlesource.com/chromium/tools/depot_tools/+log) for commit hash of commit from the same day. E.g. depot_tools commit hash from 05/19/2020: e67e41a, set DEPOT_TOOLS_COMMIT=e67e41a

The environment variable must also be updated in the repos/linux_scripts/checkout_revision, repos/mac_scripts/fetch_chromium, and repos/win_scripts/fetch_chromium.ps1 scripts.

CMakeLists.txt

The CMakeLists.txt file in repos/ is only there to help IDE's like CLion/KDevelop figure out how to index the chromium source tree. It can't be used to actually build chromium. Using this approach, it's possible to get full completion and code navigation from repos/kaleido/cc/kaleido.cc in CLion.

More Repositories

1

dash

Data Apps & Dashboards for Python. No JavaScript Required.
Python
19,422
star
2

plotly.js

Open-source JavaScript charting library behind Plotly and Dash
JavaScript
16,743
star
3

plotly.py

The interactive graphing library for Python ✨ This project now includes Plotly Express!
Python
15,980
star
4

falcon

Free, open-source SQL client for Windows and Mac 🦅
JavaScript
5,130
star
5

dash-sample-apps

Open-source demos hosted on Dash Gallery
Jupyter Notebook
3,133
star
6

plotly.R

An interactive graphing library for R
R
2,549
star
7

plotly.rs

Plotly for Rust
Rust
1,093
star
8

dash-recipes

A collection of scripts and examples created while answering questions from the greater Dash community
Python
989
star
9

react-plotly.js

A plotly.js React component from Plotly 📈
JavaScript
922
star
10

react-pivottable

React-based drag'n'drop pivot table with Plotly.js charts
JavaScript
907
star
11

jupyter-dash

Develop Dash apps in the Jupyter Notebook and JupyterLab
Python
906
star
12

plotly_express

Plotly Express - Simple syntax for complex charts. Now integrated into plotly.py!
Python
685
star
13

Plotly.NET

interactive graphing library for .NET programming languages 📈
F#
654
star
14

datasets

Datasets used in Plotly examples and documentation
HTML
637
star
15

dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
Python
592
star
16

dash-bio

Open-source bioinformatics components for Dash
Python
528
star
17

Dash.jl

Dash for Julia - A Julia interface to the Dash ecosystem for creating analytic web applications in Julia. No JavaScript required.
Julia
486
star
18

react-cytoscapejs

React component for Cytoscape.js network visualisations
JavaScript
472
star
19

react-chart-editor

Customizable React-based editor panel for Plotly charts
JavaScript
460
star
20

spectacle-editor

Drag and drop Spectacle editor.
JavaScript
442
star
21

dash-table

OBSOLETE: now part of https://github.com/plotly/dash
Python
421
star
22

documentation

Issue tracker for Plotly's open-source documentation.
419
star
23

dashR

Create data science and AI web apps in R
JavaScript
382
star
24

plotly_matlab

Plotly Graphing Library for MATLAB®
MATLAB
375
star
25

dash-docs

📖 ISSUE TRACKER ONLY for The Official Dash Userguide & Documentation https://dash.plotly.com/
Python
371
star
26

jupyterlab-dash

An Extension for the Interactive development of Dash apps in JupyterLab
Python
360
star
27

orca

Command line application for generating static images of interactive plotly charts
JavaScript
294
star
28

dash-core-components

OBSOLETE: now part of https://github.com/plotly/dash
Python
270
star
29

dash-component-boilerplate

Get started creating your own Dash components here.
Python
269
star
30

IPython-plotly

A collection of data science IPython notebooks with Plotly graphs
HTML
266
star
31

angular-plotly.js

TypeScript
229
star
32

jupyterlab-chart-editor

JupyterLab extension for Plotly's react-chart-editor
TypeScript
213
star
33

arduino-api

Arduino library for real-time logging and streaming data to online plotly graphs
Python
209
star
34

dash-pivottable

react-pivottable in Dash
Python
192
star
35

dash-oil-and-gas-demo

Dash Demo App - New York Oil and Gas
Python
182
star
36

plotlyjs-flask-example

A simple plotly.js example served with flask
Python
179
star
37

dashboards

Superseded by Dash!
179
star
38

dash-detr

A User Interface for DETR built with Dash. 100% Python.
Python
178
star
39

dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
JavaScript
175
star
40

dash-ag-grid

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.
Python
170
star
41

plotly-nodejs

node.js wrapper for Plotly's Chart Studio Streaming and REST APIs
JavaScript
166
star
42

colorlover

Color scales in Python for humans
Python
158
star
43

dash-html-components

OBSOLETE - now part of https://github.com/plotly/dash
Python
154
star
44

dash-svm

Interactive SVM Explorer, using Dash and scikit-learn
Python
153
star
45

Streaming-Demos

Demos of Plotly's Real-time Streaming API
Jupyter Notebook
149
star
46

dash-labs

Work-in-progress technical previews of potential future Dash features.
Python
139
star
47

dash-daq

Control components for Dash
JavaScript
137
star
48

dash-technical-charting

Powerful technical charting app/interface in pure Python
Python
133
star
49

dash-stock-tickers-demo-app

Dash Demo App - Stock Tickers
CSS
131
star
50

dash-vtk

Bringing vtk.js into Dash and Python
Python
120
star
51

dash-salesforce-crm

118
star
52

python-user-guide

MOVED!
115
star
53

dashboards.ly

Superseded by Dash!
HTML
107
star
54

dash-renderer

OBSOLETE has been merged into dash
JavaScript
97
star
55

Plotly.jl

A Julia interface to the plot.ly plotting library and cloud services
Julia
93
star
56

raspberrypi

Realtime Streaming with the Raspberry Pi and Plot.ly Python Library
Python
91
star
57

dash-deck

Bringing deck.gl and pydeck into Dash
JavaScript
90
star
58

dash-canvas

An interactive image editing component for Dash
Python
84
star
59

dash-image-processing

Dash Demo App - Image Processing App
Python
82
star
60

dash-volatility-surface

Volatility surface explorer in pure Python
Python
79
star
61

dash-player

Dash Component wrapping React-Player
Python
77
star
62

dash-world-cell-towers

A Dash app for exploring the world cell tower dataset provided by OpenCellid
Python
72
star
63

dash-auth

Basic Auth and Plotly Authentication for Dash Apps
Python
72
star
64

Dash.NET

F# interface to Dash- the most downloaded framework for building ML & data science web apps
F#
68
star
65

dash-alternative-viz

Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps.
JavaScript
67
star
66

dash-heroku-template

Fool-proof template for deploying Dash apps on Heroku
Python
64
star
67

simple-example-chart-apps

Some very simple apps to demonstrate the chart types on the Plotly website.
CSS
54
star
68

postMessage-API

Bind custom interactivity to embedded Plotly graphs
HTML
52
star
69

graphing-library-docs

Plotly's graphing libraries documentation.
Jupyter Notebook
52
star
70

rasterly

Rapidly generate raster images from large datasets in R with Plotly.js
R
48
star
71

dash-opioid-epidemic-demo

US county data for poision-induced deaths, years 1999-2015
HTML
48
star
72

dash-redis-celery-periodic-updates

Demo apps now maintained in https://github.com/plotly/dash-enterprise-docs
Python
48
star
73

dash-dangerously-set-inner-html

Dash component to dangerously set inner raw HTML
Python
45
star
74

dash-px

Simple Dash app using Plotly Express
Python
43
star
75

dash-sunburst

Dash / React + D3 tutorial: Sunburst diagrams
Python
43
star
76

dash-network

A tutorial & demo on how to port the D3 force-layout network diagram to Dash
JavaScript
43
star
77

academy

CSS
42
star
78

public-health

âš• Tutorials for public health crossfilter dashboards
42
star
79

ruby-api

A Ruby wrapper to the plot.ly REST API.
Ruby
41
star
80

react-colorscales

A React UI component for picking and modifying colorscales
JavaScript
37
star
81

dash-yield-curve

Remake of the NYTimes yield curve demo
CSS
37
star
82

dash-app-stylesheets

Hosting Dash app stylesheets
CSS
36
star
83

plotly.github.io

Help pages for Chart Studio
CSS
35
star
84

dash-dbx-sql

Simple Dash app demonstrating connection to Databricks via the Python SQL connector
Python
35
star
85

plotly-notebook-js

A package for using plotly in Tonicdev and Jupyter notebooks.
JavaScript
34
star
86

canvas-portal

Gallery of examples for dash-canvas
CSS
34
star
87

dash-brain-surface-viewer

Dash app for viewing brain surfaces saved as MNI files. Data from https://github.com/aces/brainbrowser
Python
33
star
88

dash-components-archetype

Deprecated. A Builder archetype for Dash component suites. See the new version here: https://github.com/plotly/dash-component-boilerplate
JavaScript
32
star
89

R-User-Guide

The Official User-Guide to Plotly's R API and ggplotly
31
star
90

plotly.js-crossfilter.js

A simple example showing Plotly.js and Crossfilter.js working together.
JavaScript
31
star
91

all-in-ai-demo-app

Dash application presented by Nathan Drezner at the All in AI (https://allinevent.ai/) conference in Montreal on September 27, 2023
Python
31
star
92

plotly-webpack

Example repo for bundling plotly.js with webpack and browserify
JavaScript
30
star
93

spotfire

Create D3.js visualizations in spotfire with Plotly
29
star
94

dash-alternative-viz-demo

Components for using Dash with Matplotlib, Seaborn, Bokeh, Holoviews, and Altair.
Python
28
star
95

dashdub

Convert speech to text with Dash & Python
Jupyter Notebook
28
star
96

plotcon-2017-plotlyjs-workshop

Syllabus and materials for plotly.js workshop at PLOTCON 2017
28
star
97

workshop

Plotly API Hardware Use Cases
Arduino
27
star
98

react-ipython-notebook

React component for nbconvert.js
JavaScript
27
star
99

excel-plugin

Plotly Excel Plugin
C#
26
star
100

dash-datashader

A demo app for visualizing hundreds of millions of data points interactively with Dash and Datashader.
Python
25
star