Marisol  Kuhic

Marisol Kuhic


Bokeh: Interactive Data Visualization In The Browser, From Python

Bokeh logotypeBokeh is an interactive visualization library for modern web browsers. It provides elegant, concise construction of versatile graphics, and affords high-performance interactivity over large or streaming datasets. Bokeh can help anyone who would like to quickly and easily make interactive plots, dashboards, and data applications.

Latest Release

pypi version

npm version


Conda downloads per month 

PyPI downloads per month 

LicenseBokeh license (BSD 3-clause) PeopleGitHub contributors
SponsorshipPowered by NumFOCUS Live TutorialLive Bokeh tutorial notebooks on MyBinder 
Build Status

Current github actions build status 

Current github actions build status 

Static Analysis

Language grade: Python 

Language grade: JavaScript 

SupportCommunity Support on TwitterFollow Bokeh on Twitter 

If you like Bokeh and would like to support our mission, please consider making a donation.

colormapped image plot thumbnail anscombe plot thumbnail stocks plot thumbnail lorenz attractor plot thumbnail candlestick plot thumbnail scatter plot thumbnail SPLOM plot thumbnail 
iris dataset plot thumbnail histogram plot thumbnail periodic table plot thumbnail choropleth plot thumbnail burtin antibiotic data plot thumbnail streamline plot thumbnail RGBA image plot thumbnail 
stacked bars plot thumbnail quiver plot thumbnail elements data plot thumbnail boxplot thumbnail categorical plot thumbnail unemployment data plot thumbnail Les Mis co-occurrence plot thumbnail 


The easiest way to install Bokeh is using the Anaconda Python distribution and its included Conda package management system. To install Bokeh and its required dependencies, enter the following command at a Bash or Windows command prompt:

conda install bokeh

To install using pip, enter the following command at a Bash or Windows command prompt:

pip install bokeh

For more information, refer to the installation documentation.


Once Bokeh is installed, check out the first steps guides.

Visit the full documentation site to view the User's Guide or launch the Bokeh tutorial to learn about Bokeh in live Jupyter Notebooks.

Community support is available on the Project Discourse.

If you would like to contribute to Bokeh, please review the Contributor Guide and request an invitation to the Bokeh Dev Slack workspace.

Note: Everyone interacting in the Bokeh project's codebases, issue trackers and discussion forums is expected to follow the Code of Conduct.

Follow us

Follow us on Twitter @bokeh


Fiscal Support

The Bokeh project is grateful for individual contributions sponsorship as well as support by the organizations and companies below:

NumFocus Logo CZI Logo Quansight Logo 
Blackstone Logo TideLift Logo 
Anaconda Logo NVidia Logo Rapids Logo 

If your company uses Bokeh and is able to sponsor the project, please contact

Bokeh is a Sponsored Project of NumFOCUS, a 501(c)(3) nonprofit charity in the United States. NumFOCUS provides Bokeh with fiscal, legal, and administrative support to help ensure the health and sustainability of the project. Visit for more information.

Donations to Bokeh are managed by NumFOCUS. For donors in the United States, your gift is tax-deductible to the extent provided by law. As with any donation, you should consult with your tax adviser about your particular tax situation.

In-kind Support

The Bokeh project is grateful for the donation of services supporting our collaboration, infrastructure, security, and vulnerability management from the following companies:

Author: bokeh
Source Code:
License: BSD-3-Clause License

#python #datavisualizations #jupyter 

Bokeh: Interactive Data Visualization In The Browser, From Python
Muhammad  Price

Muhammad Price


Data analytics: How to Use Complex Data Visualization

This video is part four in a five-part video series, where we take you from being a complete data novice to having a grasp of the fundamental terms, techniques, and day-to-day tasks that a data analyst would undertake in the real world.

In this video, you’ll be led through the fundamentals of data visualization, and how to craft a compelling narrative using complex data by CareerFoundry mentor Dr. Humera Noor Minhas, a professional data analyst with more than 20 years of experience in the field!

Interested in learning more about data analytics? We have a whole section dedicated to the profession, as well as career change opportunities for data analytics over on our blog:

Video Structure / Chapters:
(00:00) - Introduction 
(00:35) - What is data visualization
(01:00) - Key example of the importance of data visualization
(03:00) - A practical introduction to data visualization
(12:03) - Round up and outro

#datavisualizations #data 

Data analytics: How to Use Complex Data Visualization

Graphic: A Declarative, interactive Grammar Of Data Visualization


Graphic is a declarative, interactive grammar of data visualization. It provides a Flutter charting library.

  • A Grammar of Graphics: Graphic derives from Leland Wilkinson's book The Grammar of Graphics, and tries to balance between theoretical beauty and practicability. It inherits most concepts, like the graphic algebra.
  • Declarative and Reactive: As is encouraged in Flutter, the chart widget of Graphic is declarative and reactive. The grammar of data visualization is implemented by a declarative specification and the chart will reevaluate automatically on widget update.
  • Interactive: With the signal and selection mechanism, the chart is highly interactive. It is easy to pop a tooltip or scale the coordinate.
  • Customizable: With the shape and figure classes, it's easy to custom your own element, tooltip, annotation, etc.
  • Dataflow Graph and Operators: Graphic has a internal structure of a dataflow graph and operators. That is how the reactive reevaluation and interaction is implemented.


See in the documentation.


Example of charts can be seen in the Example App. Please clone this repository and run the example project in example directory.



The Versatility of the Grammar of Graphics


Besides The Grammar of Graphics, the API terminology also referes to AntV and Vega. The dataflow structure is inspired by Vega.

Keep Informed




Author: Entronad
Source Code: 
License: View license

#flutter #dart #datavisualizations 

Graphic: A Declarative, interactive Grammar Of Data Visualization

Heatmap.js: JavaScript Library for HTML5 Canvas Based Heatmaps


Dynamic Heatmaps for the Web.

How to get started

The fastest way to get started is to install heatmap.js with bower. Just run the following command:

bower install heatmap.js-amd

This will download the latest working version of heatmap.js and put it in your bower_components folder.

Alternatively you could just download the latest release from github and unzip it.

The file you're ultimately looking for is heatmap.js or heatmap.min.js

heatmap.js is also hosted on npm:

npm install heatmap.js

How to run the local examples

Start a webserver (e.g. python SimpleHTTPServer from the project directory root):

python -m SimpleHTTPServer 1337 &

Then browse to


Get involved

Please have a look at the contribution guidelines before submitting contributions.

Disclaimer: PRs can take time to receive feedback or be merged ( I'm only one person with very little time ) but I'm trying to get back to everyone eventually


In order to keep technical questions in a central place where other people can learn from it, the best thing you can do is post your question to stackoverflow with the tag heatmap.js.

If you do have a very specific question (or need commercial support) don't hesitate to contact me directly via email.

Mailing list

Want to receive the latest updates and news about heatmap.js?

There is a mailing list. No spam, just news and important updates.

Author: Pa7
Source Code: 
License: MIT License

#datavisualizations #javascript #angularjs 

Heatmap.js: JavaScript Library for HTML5 Canvas Based Heatmaps

Envisionjs: Dynamic HTML5 Visualization


Fast interactive HTML5 charts.


  • Modern Browsers, IE 6+
  • Mobile / Touch Support
  • Pre-built Templates
  • Adaptable to Existing Libraries


Envision.js ships with all it's dependencies. It uses:


To use Envision.js, include envision.min.js and envision.min.css in your page. To display a visualization, either use a Template or create a custom visualization with the Envision.js API.


Templates are pre-built visualizations for common use-cases.


    container = document.getElementById('container'),
    x = [],
    y1 = [],
    y2 = [],
    data, options, i;

  // Data Format:
  data = [
    [x, y1], // First Series
    [x, y2]  // Second Series

  // Sample the sine function for data
  for (i = 0; i < 4 * Math.PI; i += 0.05) {
    y2.push(Math.sin(i + Math.PI));

  // TimeSeries Template Options
  options = {
    // Container to render inside of
    container : container,
    // Data for detail (top chart) and summary (bottom chart)
    data : {
      detail : data,
      summary : data

  // Create the TimeSeries
  new envision.templates.TimeSeries(options);


Developers can use the envision APIs to build custom visualizations. The existing templates are a good reference for this.


    container = document.getElementById('container'),
    x = [],
    y1 = [],
    y2 = [],
    data, i,
    detail, detailOptions,
    summary, summaryOptions,
    vis, selection,

  // Data Format:
  data = [
    [x, y1], // First Series
    [x, y2]  // Second Series

  // Sample the sine function for data
  for (i = 0; i < 4 * Math.PI; i += 0.05) {
    y2.push(Math.sin(i + Math.PI));
  x.push(4 * Math.PI)
  y1.push(Math.sin(4 * Math.PI));
  y2.push(Math.sin(4 * Math.PI));

  // Configuration for detail:
  detailOptions = {
    name : 'detail',
    data : data,
    height : 150,
    flotr : {
      yaxis : {
        min : -1.1,
        max : 1.1

  // Configuration for summary:
  summaryOptions = {
    name : 'summary',
    data : data,
    height : 150,
    flotr : {
      yaxis : {
        min : -1.1,
        max : 1.1
      selection : {
        mode : 'x'

  // Building a custom vis:
  vis = new envision.Visualization();
  detail = new envision.Component(detailOptions);
  summary = new envision.Component(summaryOptions);
  interaction = new envision.Interaction();

  // Render Visualization

  // Wireup Interaction


Class envision.Component

Defines a visualization component.

Components are the building blocks of a visualization, representing one typically graphical piece of the vis. This class manages the options, DOM and API construction for an adapter which handles the actual drawing of the visualization piece.

Adapters can take the form of an actual object, a constructor function or a function returning an object. Only one of these will be used. If none is submitted, the default adapter Flotr2 is used.


An object is submitted to the constructor for configuration.

  • name A name for the component.
  • element A container element for the component.
  • height An explicit component height.
  • width An explicit component width.
  • data An array of data. Data may be formatted for envision or for the adapter itself, in which case skipPreprocess will also need to be submitted.
  • skipPreprocess Skip data preprocessing. This is useful when using the native data format for an adapter.
  • adapter An adapter object.
  • adapterConstructor An adapter constructor to be instantiated by the component.
  • adapterCallback An callback invoked by the component returning an adapter.
  • config Configuration for the adapter.


render ([element])

Render the component.

If no element is submitted, the component will render in the element configured in the constructor.

draw ([data], [options])

Draw the component.

trigger ()

Trigger an event on the component's API.

Arguments are passed through to the API.

attach ()

Attach to an event on the component's API.

Arguments are passed through to the API.

detach ()

Detach a listener from an event on the component's API.

Arguments are passed through to the API.

destroy ()

Destroy the component.

Empties the container and calls the destroy method on the component's API.

Class envision.Visualization

Defines a visualization of componenents.

This class manages the rendering of a visualization. It provides convenience methods for adding, removing, and reordered components dynamically as well as convenience methods for working with a logical group of components.


An object is submitted to the constructor for configuration.

  • name A name for the visualization.
  • element A container element for the visualization.


render ([element])

Render the visualization.

If no element is submitted, the visualization will render in the element configured in the constructor.

This method is chainable.

add (component)

Add a component to the visualization.

If the visualization has already been rendered, it will render the new component.

This method is chainable.

remove ()

Remove a component from the visualization.

This removes the components from the list of components in the visualization and removes its container from the DOM. It does not destroy the component.

This method is chainable.

setPosition (component, newIndex)

Reorders a component.

This method is chainable.

indexOf (component)

Gets the position of a component.

getComponent (component)

Gets the component at a position.

isFirst (component)

Gets whether or not the component is the first component in the visualization.

isLast (component)

Gets whether or not the component is the last component in the visualization.

destroy ()

Destroys the visualization.

This empties the container and destroys all the components which are part of the visualization.

Class envision.Preprocessor

Data preprocessor.

Data can be preprocessed before it is rendered by an adapter.

This has several important performance considerations. If data will be rendered repeatedly or on slower browsers, it will be faster after being optimized.

First, data outside the boundaries does not need to be rendered. Second, the resolution of the data only needs to be at most the number of pixels in the width of the visualization.

Performing these optimizations will limit memory overhead, important for garbage collection and performance on old browsers, as well as drawing overhead, important for mobile devices, old browsers and large data sets.


An object is submitted to the constructor for configuration.

  • data The data for processing.


getData ()

Returns data.

setData ()

Set the data object.

length ()

Returns the length of the data set.

bound (min, max)

Bounds the data set at within a range.

subsampleMinMax (resolution)

Subsample data using MinMax.

MinMax will display the extrema of the subsample intervals. This is slower than regular interval subsampling but necessary for data that is very non-homogenous.

subsample (resolution)

Subsample data at a regular interval for resolution.

This is the fastest subsampling and good for monotonic data and fairly homogenous data (not a lot of up and down).

Class envision.Interaction

Defines an interaction between components.

This class defines interactions in which actions are triggered by leader components and reacted to by follower components. These actions are defined as configurable mappings of trigger events and event consumers. It is up to the adapter to implement the triggers and consumers.

A component may be both a leader and a follower. A leader which is a follower will react to actions triggered by other leaders, but will safely not react to its own. This allows for groups of components to perform a common action.

Optionally, actions may be supplied with a callback executed before the action is consumed. This allows for quick custom functionality to be added and is how advanced data management (ie. live Ajax data) may be implemented.

This class follow an observer mediator pattern.


An object is submitted to the constructor for configuration.

  • leader Component(s) to lead the interaction


leader (component)

Add a component as an interaction leader.

follower (component)

Add a component as an interaction leader.

group (components)

Adds an array of components as both followers and leaders.

add (action, [options])

Adds an action to the interaction.

The action may be optionally configured with the options argument. Currently the accepts a callback member, invoked after an action is triggered and before it is consumed by followers.


This project uses smoosh to build and jasmine with js-imagediff to test. Tests may be executed by jasmine-headless-webkit with cd spec; jasmine-headless-webkit -j jasmine.yml -c or by a browser by navigating to spec/SpecRunner.html.

Author: HumbleSoftware
Source Code: 
License: MIT License

#html #javascript #datavisualizations 

Envisionjs: Dynamic HTML5 Visualization

Multi-Dimensional Charting Built to Work Natively with D3.js


Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attributes through the position, size, and color of its elements, and also presents a dimension which can be filtered. When the filter or brush changes, all other charts are updated dynamically, using animated transitions.

Check out the example page and its annotated source for a quick five minute how-to guide. The detailed API reference is here (markdown version). For more examples and hints please visit the Wiki.


Please direct questions and support requests to Stack Overflow or the user group. When posting to Stack Overflow, use the [dc.js] and/or [crossfilter] tags - other tags are likely to draw unwanted attention.

Get help faster with a working example! Fork these to get started:
blank jsFiddle - example jsFiddle - blank bl.ock - example bl.ock


Version 4.* is compatible with d3 versions 4 and 5. It is not compatible with IE. Use dc.js 3.* if you need IE support, or use dc.js 2.* if you need compatibility with d3 version 3.

CDN location

or copy the latest links from CDNJS

Install with npm

npm install dc

Install without npm


How to build dc.js locally

Prerequisite modules

Make sure the following packages are installed on your machine

  • node.js
  • npm

Install dependencies

$ npm install

Build and Test

$ grunt test

Developing dc.js

Start the development server

$ grunt server

Author: dc-js
Source Code: 
License: View license

#datavisualizations #javascript 

Multi-Dimensional Charting Built to Work Natively with D3.js
Gordon  Taylor

Gordon Taylor


D3-cloud: How to Create A Word Clouds in JavaScript

Word Cloud Layout

This is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds.

See here for an interactive demonstration along with implementation details.

Example cloud of Twitter search results for “amazing”


See the samples in examples/.

API Reference

Constructs a new cloud layout instance.

on(type, listener)

Registers the specified listener to receive events of the specified type from the layout. Currently, only "word" and "end" events are supported.

A "word" event is dispatched every time a word is successfully placed. Registered listeners are called with a single argument: the word object that has been placed.

An "end" event is dispatched when the layout has finished attempting to place all words. Registered listeners are called with two arguments: an array of the word objects that were successfully placed, and a bounds object of the form [{x0, y0}, {x1, y1}] representing the extent of the placed objects.


Starts the layout algorithm. This initialises various attributes on the word objects, and attempts to place each word, starting with the largest word. Starting with the centre of the rectangular area, each word is tested for collisions with all previously-placed words. If a collision is found, it tries to place the word in a new position along the spiral.

Note: if a word cannot be placed in any of the positions attempted along the spiral, it is not included in the final word layout. This may be addressed in a future release.


Stops the layout algorithm.


Internally, the layout uses setInterval to avoid locking up the browser’s event loop. If specified, time is the maximum amount of time that can be spent during the current timestep. If not specified, returns the current maximum time interval, which defaults to Infinity.


If specified, sets the words array. If not specified, returns the current words array, which defaults to [].


If specified, sets the rectangular [width, height] of the layout. If not specified, returns the current size, which defaults to [1, 1].


If specified, sets the font accessor function, which indicates the font face for each word. If not specified, returns the current font accessor function, which defaults to "serif". A constant may be specified instead of a function.


If specified, sets the fontStyle accessor function, which indicates the font style for each word. If not specified, returns the current fontStyle accessor function, which defaults to "normal". A constant may be specified instead of a function.


If specified, sets the fontWeight accessor function, which indicates the font weight for each word. If not specified, returns the current fontWeight accessor function, which defaults to "normal". A constant may be specified instead of a function.


If specified, sets the fontSize accessor function, which indicates the numerical font size for each word. If not specified, returns the current fontSize accessor function, which defaults to:

function(d) { return Math.sqrt(d.value); }

A constant may be specified instead of a function.


If specified, sets the rotate accessor function, which indicates the rotation angle (in degrees) for each word. If not specified, returns the current rotate accessor function, which defaults to:

function() { return (~~(Math.random() * 6) - 3) * 30; }

A constant may be specified instead of a function.


If specified, sets the text accessor function, which indicates the text for each word. If not specified, returns the current text accessor function, which defaults to:

function(d) { return d.text; }

A constant may be specified instead of a function.


If specified, sets the current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used, of the following form:

// size is the [width, height] array specified in cloud.size
function(size) {
  // t indicates the current step along the spiral; it may monotonically
  // increase or decrease indicating clockwise or counterclockwise motion.
  return function(t) { return [x, y]; };

If not specified, returns the current spiral generator, which defaults to the built-in "archimedean" spiral.


If specified, sets the padding accessor function, which indicates the numerical padding for each word. If not specified, returns the current padding, which defaults to 1.


If specified, sets the internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range [0, 1).

If not specified, returns the current random number generator, which defaults to Math.random.


If specified, sets the canvas generator function, which is used internally to draw text. If not specified, returns the current generator function, which defaults to:

function() { return document.createElement("canvas"); }

When using Node.js, you will almost definitely override this default, e.g. using the canvas module.

Author: Jasondavies
Source Code: 
License: View license

#javascript #datavisualizations #html 

D3-cloud: How to Create A Word Clouds in JavaScript
Gordon  Taylor

Gordon Taylor


Trianglify: Low Poly Style Background Generator with D3.js


Trianglify is a library that I wrote to generate nice SVG background images like this one:


📦 Getting Trianglify
🏎 Quickstart
⚖️ Licensing
🎨 Configuration

📦 Getting Trianglify

You can grab Trianglify with npm/yarn (recommended):

npm install --save trianglify

Include it in your application via the unpkg CDN:

<script src='^4/dist/trianglify.bundle.js'></script>

Or download a .zip from the releases page.

🏎 Quickstart


<script src='^4/dist/trianglify.bundle.js'></script>
  const pattern = trianglify({
    width: window.innerWidth,
    height: window.innerHeight


const trianglify = require('trianglify')
const fs = require('fs')

const canvas = trianglify({
  width: 1920,
  height: 1080

const file = fs.createWriteStream('trianglify.png')

You can see the examples/ folder for more usage examples.

The GUI is a good place to play around with the various configuration parameters and see their effect on the generated output, live.

⚖️ Licensing

The source code of Trianglify is licensed under version 3 of the GNU General Public License (GPLv3). This means that any websites, apps, or other projects that include the Trianglify javascript library need to be released under a compatible open-source license. If you are interested in using Trianglify in a closed-source project, please email to purchase a commercial license.

However, it's worth noting that you own the copyright to the output image files which you create using Trianglify, just like you own the copyright to an image created using something like GIMP. If you just want to use an image file that was generated using Trianglify in your project, and do not plan to distribute the Trianglify source code or compiled versions of it, you do not need to worry about the license restrictions described above.


Trianglify is primarily used by calling the trianglify function, which returns a trianglify.Pattern object.

// load the library, either via a window global (browsers) or require call (node)
// in es-module environments, you can `import trianglify from 'trianglify'` as well
const trianglify = window.trianglify || require('trianglify')

const options = { height: 400, width: 600 }
const pattern = trianglify(options)
console.log(pattern instanceof trianglify.Pattern) // true


This object holds the generated geometry and colors, and exposes a number of methods for rendering this geometry to the DOM or a Canvas.


Object containing the options used to generate the pattern.


The pseudo-random point grid used for the pattern geometry, in the following format:

  [x, y],
  [x, y],
  [x, y],
  // and so on...


The array of colored polygons that make up the pattern, in the following format:

// {x, y} center of the first polygon in the pattern

// [i, i, i] three indexes into the pattern.points array, 
// defining the shape corners

// Chroma.js color object defining the color of the polygon

pattern.toSVG(destSVG?, svgOpts?)

Rendering function for SVG. In browser or browser-like (e.g. JSDOM) environments, this will return a SVGElement DOM node. In node environments, this will return a lightweight node tree structure that can be serialized to a valid SVG string using the toString() function.

If an existing svg element is passed as the destSVG, this function will render the pattern to the pre-existing element instead of creating a new one.

The svgOpts option allows for some svg-specific customizations to the output:

const svgOpts = {
  // Include or exclude the xmlns='' attribute on
  // the root <svg> tag. See
  // for additional details on why this is sometimes important
  includeNamespace: true,
  // Controls how many decimals to round coordinate values to.
  // You can set this to -1 to disable rounding. Default is 1.
  coordinateDecimals: 1


Alternate rendering function for SVG. Returns a lightweight node tree structure that can be seralized to a valid SVG string using the toString() function. In node environments, this is an alias for pattern.toSVG().

pattern.toCanvas(destCanvas?, canvasOpts?)

Rendering function for canvas. In browser and browser-like environments, returns a Canvas HTMLElement node. In node environments, this will return a node-canvas object which follows a superset of the Web Canvas API.

If an existing canvas element is passed as the destCanvas, this function will render the pattern to the pre-existing element instead of creating a new one.

To use this in a node.js environment, the optional dependency node-canvas needs to be installed as a dependency of your project npm install -save canvas.

The canvasOpts option allows for some canvas-specific customizations to the output:

const canvasOpts = {
  // determines how the canvas is rendered on high-DPI (aka "retina") devices.
  // - 'auto' will automatically render the canvas at the appropriate scale ratio
  //   for pixel-perfect display.
  // - a numeric value will render the canvas at that specific scale factor
  //   for example, 2.0 will render it at 2x resolution, wheras 0.5 will render
  //   at half resolution
  // - 'false' will disable scaling, and the canvas will be rendered at the 
  //   exact resolution specified by `width, height`
  scaling: 'auto',
  // if the canvas is rendered at a different resolution than the {width, height}
  // trianglify will apply some inline style attributes to scale it back to
  // the requested {width, height} options. Set applyCssScaling to false to 
  // disable this behavior.
  applyCssScaling: true

🎨 Configuration

Trianglify is configured by an options object passed in as the only argument. The following option keys are supported, see below for a complete description of what each option does.

const defaultOptions = {
  width: 600,
  height: 400,
  cellSize: 75,
  variance: 0.75,
  seed: null,
  xColors: 'random',
  yColors: 'match',
  fill: true,
  palette: trianglify.colorbrewer,
  colorSpace: 'lab',
  colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
  strokeWidth: 0,
  points: null


Integer, defaults to 600. Specify the width in pixels of the pattern to generate.


Integer, defaults to 400. Specify the height in pixels of the pattern to generate.


Integer, defaults to 75. Specify the size in pixels of the mesh used to generate triangles. Larger values will result in coarser patterns, smaller values will result in finer patterns. Note that very small values may dramatically increase the runtime of Trianglify.


Decimal value between 0 and 1 (inclusive), defaults to 0.75. Specify the amount of randomness used when generating triangles. You may set this higher than 1, but doing so may result in patterns that include "gaps" at the edges.


String, defaults to null. Seeds the random number generator to create repeatable patterns. When set to null, the RNG will be seeded with random values from the environment. An example usage would be passing in blog post titles as the seed to generate unique but consistient trianglify patterns for every post on a blog site.


False, string, or array of CSS-formatted colors, default is 'random'. Specify the color gradient used on the x axis.

Valid string values are 'random', or the name of a colorbrewer palette (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library.

Valid array values should specify the color stops in any CSS format (i.e. ['#000000', '#4CAFE8', '#FFFFFF']).


False, string or array of CSS-formatted colors, default is 'match'. When set to 'match' the x-axis color gradient will be used on both axes. Otherwise, accepts the same options as xColors.


The array of color combinations to pick from when using random for the xColors or yColors. See src/utils/colorbrewer.js for the format of this data.


String, defaults to 'lab'. Set the color space used for generating gradients. Supported values are rgb, hsv, hsl, hsi, lab and hcl. See this blog post for some background on why this matters.


Specify a custom function for coloring triangles, defaults to null. Accepts a function to override the standard gradient coloring, which is passed a variety of data about the pattern and each polygon and must return a Chroma.js color object.

See examples/color-function-example.html and utils/colorFunctions.js for more information about the built-in color functions, and how to write custom color functions.


Boolean, defaults to true. Specifies whether the polygons generated by Trianglify should be filled in.


Number, defaults to 0. Specify the width of the strokes used to outline the polygons. This can be used in conjunction with fill: false to generate weblike patterns.


Array of points ([x, y]) to triangulate, defaults to null. When not specified an array randomised points is generated filling the space. Points must be within the coordinate space defined by width and height. See examples/custom-points-example.html for a demonstration of how this option can be used to generate circular trianglify patterns.

Author: Qrohlf
Source Code: 
License: GPL-3.0 License

#javascript #datavisualizations 

Trianglify: Low Poly Style Background Generator with D3.js

WebGL2 Powered Visualization Framework

WebGL2-powered, highly performant large-scale data visualization

docs is designed to simplify high-performance, WebGL-based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage's extensible architecture to address custom needs. maps data (usually an array of JSON objects) into a stack of visual layers - e.g. icons, polygons, texts; and look at them with views: e.g. map, first-person, orthographic. handles a number of challenges out of the box:

  • Performant rendering and updating of large data sets
  • Interactive event handling such as picking, highlighting and filtering
  • Cartographic projections and integration with major basemap providers
  • A catalog of proven, well-tested layers is designed to be highly customizable. All layers come with flexible APIs to allow programmatic control of each aspect of the rendering. All core classes such are easily extendable by the users to address custom use cases.


Script Tag

<script src=""></script>

NPM Module

npm install

Pure JS



pip install pydeck

Third-Party Bindings

Learning Resources

Contributing is part of, a Urban Computing Foundation project. Read the contribution guidelines if you are intrested in contributing.


Data sources

Data sources are listed in each example.

The project is supported by

Author: Visgl
Source Code: 
License: MIT License

#python #javascript #datavisualizations 

WebGL2 Powered Visualization Framework
Elian  Harber

Elian Harber


How to Use Mapbox GL JS To Visualize Data in A Python Jupyter Notebook

Location Data Visualization library for Jupyter Notebooks

Create Mapbox GL JS data visualizations natively in Jupyter Notebooks with Python and Pandas. mapboxgl is a high-performance, interactive, WebGL-based data visualization tool that drops directly into Jupyter. mapboxgl is similar to Folium built on top of the raster Leaflet map library, but with much higher performance for large data sets using WebGL and Mapbox Vector Tiles.

Try out the interactive map example notebooks from the /examples directory in this repository

  1. Categorical points
  2. All visualization types
  3. Choropleth Visualization types
  4. Image Visualization types
  5. Raster Tile Visualization types


$ pip install mapboxgl


Documentation is on Read The Docs at


The examples directory contains sample Jupyter notebooks demonstrating usage.

import os

import pandas as pd

from mapboxgl.utils import create_color_stops, df_to_geojson
from mapboxgl.viz import CircleViz

# Load data from sample csv
data_url = ''
df = pd.read_csv(data_url)

# Must be a public token, starting with `pk`
token = os.getenv('MAPBOX_ACCESS_TOKEN')

# Create a geojson file export from a Pandas dataframe
df_to_geojson(df, filename='points.geojson',
              properties=['Avg Medicare Payments', 'Avg Covered Charges', 'date'],
              lat='lat', lon='lon', precision=3)

# Generate data breaks and color stops from colorBrewer
color_breaks = [0,10,100,1000,10000]
color_stops = create_color_stops(color_breaks, colors='YlGnBu')

# Create the viz from the dataframe
viz = CircleViz('points.geojson',
                color_property = "Avg Medicare Payments",
                color_stops = color_stops,
                center = (-95, 40),
                zoom = 3,
                below_layer = 'waterway-label'


Install the python library locally with pip:

$ pip install -e .

To run tests use pytest:

$ pip install mock pytest
$ python -m pytest

To run the Jupyter examples,

$ cd examples
$ pip install jupyter
$ jupyter notebook

We follow the PEP8 style guide for Python for all Python code.

Release process

  • Update the version number in mapboxgl/ and push directly to master.

Upload the release files

  • twine upload dist/mapboxgl-*

Create the release files

  • rm dist/* # clean out old releases if they exist
  • python sdist bdist_wheel

Setup for pypi (one time only)

  • You'll need to pip install twine and set up your credentials in a ~/.pypirc file.

Tag the release

  • git tag <version>
  • git push --tags

After merging all relevant PRs for the upcoming release, pull the master branch

  • git checkout master
  • git pull

Author: Mapbox
Source Code: 
License: MIT License
#python #jupyternotebook #html #datavisualizations 

How to Use Mapbox GL JS To Visualize Data in A Python Jupyter Notebook
Elian  Harber

Elian Harber


Ipyleaflet: A Jupyter - Leaflet.js bridge


A Jupyter / Leaflet bridge enabling interactive maps in the Jupyter notebook.


Selecting a basemap for a leaflet map:

Basemap Screencast

Loading a geojson map:

GeoJSON Screencast

Making use of leafletjs primitives:

Primitives Screencast

Using the splitmap control:

Splitmap Screencast

Displaying velocity data on the top of a map:

Velocity Screencast

Choropleth layer:

Choropleth Screencast

Widget control

Widget Control


Using conda:

conda install -c conda-forge ipyleaflet

Using pip:

pip install ipyleaflet

If you are using the classic Jupyter Notebook < 5.3 you need to run this extra command:

jupyter nbextension enable --py --sys-prefix ipyleaflet

If you are using JupyterLab <=2, you will need to install the JupyterLab extension:

jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-leaflet

Installation from sources

For a development installation (requires yarn, you can install it with conda install -c conda-forge yarn):

git clone
cd ipyleaflet
pip install -e .

If you are using the classic Jupyter Notebook you need to install the nbextension:

jupyter nbextension install --py --symlink --sys-prefix ipyleaflet
jupyter nbextension enable --py --sys-prefix ipyleaflet

Note for developers:

  • the -e pip option allows one to modify the Python code in-place. Restart the kernel in order to see the changes.
  • the --symlink argument on Linux or OS X allows one to modify the JavaScript code in-place. This feature is not available with Windows.

For developing with JupyterLab:

jupyter labextension develop --overwrite ipyleaflet


To get started with using ipyleaflet, check out the full documentation

Related projects

The ipyleaflet repository includes the jupyter-leaflet npm package, which is a front-end component, and the ipyleaflet python package which is the backend for the Python Jupyter kernel.

Similarly, the xleaflet project provides a backend to jupyter-leaflet for the "xeus-cling" C++ Jupyter kernel.

Xleaflet Screencast

Author: Jupyter-widgets/
Source Code: 
License: MIT License

#python #jupyternotebook #datavisualizations 

Ipyleaflet: A Jupyter - Leaflet.js bridge
Monty  Boehm

Monty Boehm


data⎰describe: Pythonic EDA Accelerator for Data Science

data ⎰ describe

data-describe is a Python toolkit for Exploratory Data Analysis (EDA). It aims to accelerate data exploration and analysis by providing automated and polished analysis widgets.

For more examples of data-describe in action, see the Quick Start Tutorial.

Main Features

data-describe implements the following basic features:

Data SummaryCurated data summary
Data HeatmapData variation and missingness heatmap
Correlation MatrixCorrelation heatmaps with categorical support
Distribution PlotsGenerate histograms, violin plots, bar charts
ScatterplotsGenerate scatterplots and evaluate with scatterplot diagnostics
Cluster AnalysisAutomated clustering and plotting
Feature RankingEvaluate feature importance using tree models

Extended Features

data-describe is always looking to elevate the standard for Exploratory Data Analysis. Here are just a few that are implemented:

  • Dimensionality Reduction Methods
  • Sensitive Data (PII) Redaction
  • Text Pre-processing / Topic Modeling
  • Big Data Support


data-describe can be installed using pip:

pip install data-describe

Getting Started

import data_describe as dd help(dd)

See the User Guide for more information.

Project Status

data-describe is currently in beta status.


data-describe welcomes contributions from the community.

Author: Data-describe
Source Code: 
License: View license

#python #datavisualizations 

data⎰describe: Pythonic EDA Accelerator for Data Science
Monty  Boehm

Monty Boehm


Interactive plotting for Pandas using Vega-Lite

pdvega: Vega-Lite plotting for Pandas Dataframes

 pdvega is a library that allows you to quickly create interactive Vega-Lite plots from Pandas dataframes, using an API that is nearly identical to Pandas' built-in visualization tools, and designed for easy use within the Jupyter notebook.

Pandas currently has some basic plotting capabilities based on matplotlib. So, for example, you can create a scatter plot this way:

import numpy as np
import pandas as pd

df = pd.DataFrame({'x': np.random.randn(100), 'y': np.random.randn(100)})
df.plot.scatter(x='x', y='y')

matplotlib scatter output

The goal of pdvega is that any time you use dataframe.plot, you'll be able to replace it with dataframe.vgplot and instead get a similar (but prettier and more interactive) visualization output in Vega-Lite that you can easily export to share or customize:

import pdvega  # import adds vgplot attribute to pandas

df.vgplot.scatter(x='x', y='y')

vega-lite scatter output

The above image is a static screenshot of the interactive output; please see the Documentation for a full set of live usage examples.


You can get started with pdvega using pip:

$ pip install jupyter pdvega
$ jupyter nbextension install --sys-prefix --py vega3

The first line installs pdvega and its dependencies; the second installs the Jupyter extensions that allows plots to be displayed in the Jupyter notebook. For more information on installation and dependencies, see the Installation docs.

Why Vega-Lite?

When working with data, one of the biggest challenges is ensuring reproducibility of results. When you create a figure and export it to PNG or PDF, the data become baked-in to the rendering in a way that is difficult or impossible for others to extract. Vega and Vega-Lite change this: instead of packaging a figure by encoding its pixel values, they package a figure by describing, in a declarative manner, the relationship between data values and visual encodings through a JSON specification.

This means that the Vega-Lite figures produced by pdvega are portable: you can send someone the resulting JSON specification and they can choose whether to render it interactively online, convert it to a PNG or EPS for static publication, or even enhance and extend the figure to learn more about the data.

pdvega is a step in bringing this vision of figure portability and reproducibility to the Python world.

Relationship to Altair

Altair is a project that seeks to design an intuitive declarative API for generating Vega-Lite and Vega visualizations, using Pandas dataframes as data sources.

By contrast, pdvega seeks not to design new visualization APIs, but to use the existing DataFrame.plot visualization api and output visualizations with Vega/Vega-Lite rather than with matplotlib.

In this respect, pdvega is quite similar in spirit to the now-defunct mpld3 project, though the scope is smaller and (hopefully) much more manageable.

Author: Altair-viz
Source Code: 
License: MIT License

#python #datavisualizations 

Interactive plotting for Pandas using Vega-Lite
Monty  Boehm

Monty Boehm


Draw interactive NetworkX Graphs with Altair


Draw NetworkX graphs with Altair

nx_altair offers a similar draw API to NetworkX but returns Altair Charts instead.

If you'd like to contribute, join the Gitter chatroom and share your ideas! Also, checkout the to-do list below.


If you'd like to start playing with nx_altair, download this notebook!

Simple graph

import networkx as nx
import nx_altair as nxa

# Generate a random graph
G = nx.fast_gnp_random_graph(n=20, p=0.25)

# Compute positions for viz.
pos = nx.spring_layout(G)

# Draw the graph using Altair
viz = nxa.draw_networkx(G, pos=pos)

# Show it as an interactive plot!

Leverage Altair

Customize the visualization

nx_altair also supports many of the same arguments from NetworkX for styling your network--with an Altair twist! Map visualization attributes in a declarative manner.

import numpy as np

# Add weights to nodes and edges
for n in G.nodes():
    G.nodes[n]['weight'] = np.random.randn()

for e in G.edges():
    G.edges[e]['weight'] = np.random.uniform(1, 10)

# Draw the graph using Altair
viz = nxa.draw_networkx(
    G, pos=pos,

# Show it as an interactive plot!


To install from PyPI:

pip install nx_altair

To install for development, clone this repos and install using pip

pip install -e .


We welcome pull requests! If you find a bug, we'd love for you to submit a PR. If you're not sure how to do that, check out this simple guide.

If you have a feature request, please open an issue or submit a PR!

Todo list

A list of things to-do (good ideas for PRs).

  •  Add draw method that mirrors networkx (easy)
  •  Node color scale vmix, vmax (easy)
  •  Edge color scale vmix, vmax (easy)
  •  Node labels (medium)
  •  Edge labels (medium)
  •  Mouse-hover interactivity (medium)
  •  Arrows for edges (hard)
  •  Support for large (>1000 edge) networks (hard)
  •  Force-directed interactivity (very hard---beyond altair's current support).

Author: Zsailer
Source Code: 
License: MIT License

#python #datavisualizations 

Draw interactive NetworkX Graphs with Altair
Monty  Boehm

Monty Boehm


A Python Package for animating Plots Build on Matplotlib


A python package for making interactive as well as animated plots with matplotlib.

image image



pip install animatplot

or using conda

conda install animatplot -c conda-forge


Documentation can be found here

Dev Install

git clone
pip install -e .

This project uses pycodestyle for linting. For testing, pytest is used.

Author: T-makaro
Source Code: 
License: MIT License

#python #datavisualizations

A Python Package for animating Plots Build on Matplotlib