### bqplot-gl installation

Source: https://bqplot.github.io/bqplot/migrate

Command to install bqplot-gl.

```bash
pip install bqplot-gl

```

--------------------------------

### Installation of older versions

Source: https://bqplot.github.io/bqplot/installation

Example of installing a specific older version of bqplot and its corresponding labextension.

```bash
$ pip install bqplot==0.11.9
$ jupyter labextension install bqplot@0.4.9
```

--------------------------------

### Development installation

Source: https://bqplot.github.io/bqplot/installation

Steps for installing bqplot from source for development, including JupyterLab extension setup.

```bash
$ git clone https://github.com/bqplot/bqplot.git
$ cd bqplot
$ pip install -e .
$ jupyter nbextension install --py --overwrite --symlink --sys-prefix bqplot
$ jupyter nbextension enable --py --sys-prefix bqplot
```

```bash
$ pip install "ipywidgets>=7.6"
$ jupyter labextension develop . --overwrite
```

```bash
cd js
jlpm run build
```

--------------------------------

### Install using pip

Source: https://bqplot.github.io/bqplot/installation

Standard installation using pip.

```bash
pip install bqplot
```

--------------------------------

### Running tests

Source: https://bqplot.github.io/bqplot/installation

Commands for setting up test dependencies and running Python and JavaScript tests.

```bash
conda env update -f test-environment.yml
```

```bash
pytest
```

```bash
cd js
jlpm run test
```

```bash
jlpm run build
```

--------------------------------

### bqscales imports (0.13)

Source: https://bqplot.github.io/bqplot/migrate

Example of importing LinearScale from bqscales in version 0.13.

```python
from bqscales import LinearScale
from bqplot import Axis, Lines, Figure
import numpy as np

x = np.linspace(-10, 10, 100)
y = np.sin(x)

xs = LinearScale()
ys = LinearScale()

xax = Axis(scale=xs, label="X")
yax = Axis(scale=ys, orientation="vertical", label="Y")

line = Lines(x=x, y=y, scales={"x": xs, "y": ys})

fig = Figure(marks=[line], axes=[xax, yax], title="Line Chart")

fig

```

--------------------------------

### Install using conda

Source: https://bqplot.github.io/bqplot/installation

Installation using conda from the conda-forge channel.

```bash
conda install -c conda-forge bqplot
```

--------------------------------

### bqscales imports (0.12)

Source: https://bqplot.github.io/bqplot/migrate

Example of importing scales from bqplot in version 0.12.

```python
from bqplot import LinearScale, Axis, Lines, Figure
import numpy as np

x = np.linspace(-10, 10, 100)
y = np.sin(x)

xs = LinearScale()
ys = LinearScale()

xax = Axis(scale=xs, label="X")
yax = Axis(scale=ys, orientation="vertical", label="Y")

line = Lines(x=x, y=y, scales={"x": xs, "y": ys})

fig = Figure(marks=[line], axes=[xax, yax], title="Line Chart")

fig

```

--------------------------------

### Plotting Example

Source: https://bqplot.github.io/bqplot/api/pyplot

A complete example showing how to generate random data, plot it using `plt.plot`, and display the plot using `plt.show`.

```python
>>> import numpy as np
>>> import pyplot as plt
>>> n = 100
>>> x = np.arange(n)
>>> y = np.cumsum(np.random.randn(n))
>>> plt.plot(x,y)
>>> plt.show()

```

--------------------------------

### Install for JupyterLab <= 2

Source: https://bqplot.github.io/bqplot/installation

Installation command for older JupyterLab versions.

```bash
jupyter labextension install @jupyter-widgets/jupyterlab-manager bqplot
```

--------------------------------

### Marker Strings Example

Source: https://bqplot.github.io/bqplot/usage/marks/lines

This example shows how to use marker strings to style a line chart, combining color, marker shape, and line style.

```python
fig = plt.figure()
x = np.arange(10)
y = 5 * x + 6
styled_line = plt.plot(x, y, "ms:") 
fig

```

--------------------------------

### bqplot-gl imports (0.13)

Source: https://bqplot.github.io/bqplot/migrate

Example of importing ScatterGL from bqplot_gl in version 0.13.

```python
from bqplot import LinearScale, Axis, Figure
from bqplot_gl import ScatterGL

import numpy as np
import pandas as pd

n_points = 150_000

np.random.seed(0)
y = np.cumsum(np.random.randn(n_points)) + 100.

sc_x = LinearScale()
sc_y = LinearScale()

scatter = ScatterGL(
    x=np.arange(len(y)), y=y,
    default_size=1,
    scales={'x': sc_x, 'y': sc_y}
)
ax_x = Axis(scale=sc_x, label='Index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Points')

fig = Figure(marks=[scatter], axes=[ax_x, ax_y], title='Scatter powered by WebGL')
fig

```

--------------------------------

### bqplot-gl imports (0.12)

Source: https://bqplot.github.io/bqplot/migrate

Example of importing ScatterGL from bqplot in version 0.12 (pre-0.13 structure).

```python
from bqplot import LinearScale, ScatterGL, Axis, Figure

import numpy as np
import pandas as pd

n_points = 150_000

np.random.seed(0)
y = np.cumsum(np.random.randn(n_points)) + 100.

sc_x = LinearScale()
sc_y = LinearScale()

scatter = ScatterGL(
    x=np.arange(len(y)), y=y,
    default_size=1,
    scales={'x': sc_x, 'y': sc_y}
)
ax_x = Axis(scale=sc_x, label='Index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Points')

fig = Figure(marks=[scatter], axes=[ax_x, ax_y], title='Scatter powered by WebGL')
fig

```

--------------------------------

### Simple Bar Chart

Source: https://bqplot.github.io/bqplot/usage/marks/bars

This example demonstrates how to create a simple bar chart using `bqplot.pyplot.bar`.

```python
import bqplot.pyplot as plt
import numpy as np

fig = plt.figure(title="Bar Chart")

x = list("ABCDE")
y = np.random.rand(5)

bar = plt.bar(x, y)

fig

```

--------------------------------

### pyplot Usage

Source: https://bqplot.github.io/bqplot

Example of creating a figure, line mark, and rendering it using the pyplot API.

```python
import bqplot.pyplot as plt
import numpy as np

fig = plt.figure(title="Sine")

# create data vectors
x = np.linspace(-10, 10, 200)
y = np.sin(x)

# create line mark
line = plt.plot(x, y)

# renders the figure in the output cell (with toolbar for panzoom, save etc.)
plt.show()

```

--------------------------------

### Simple Line Chart

Source: https://bqplot.github.io/bqplot/usage/marks/lines

This code example demonstrates how to create a simple line chart using bqplot's pyplot API. It plots a sine wave.

```python
import bqplot.pyplot as plt
import numpy as np

fig = plt.figure()

x = np.arange(-10, 10, .1)
y = np.sin(x)
line = plt.plot(x, y)
fig

```

--------------------------------

### Scales Example

Source: https://bqplot.github.io/bqplot/api/pyplot

Demonstrates creating a new scales context, keeping the 'x' scale from the previous context, and defining a new 'color' scale.

```python
>>> scales(scales={
>>>    'x': Keep,
>>>    'color': ColorScale(min=0, max=1)
>>> })

```

--------------------------------

### Line Chart

Source: https://bqplot.github.io/bqplot/usage/object-model

Example of creating a line chart using bqplot's Object Model. It demonstrates the steps of creating scales, axes, a Lines mark, and finally a Figure.

```python
# first, create two vectors x and y to plot using a Lines mark
import bqplot as bq
import numpy as np

x = np.linspace(-10, 10, 100)
y = np.sin(x)

# 1. Create the scales
xs = bq.LinearScale()
ys = bq.LinearScale()

# 2. Create the axes for x and y
xax = bq.Axis(scale=xs, label="X")
yax = bq.Axis(scale=ys, orientation="vertical", label="Y")

# 3. Create a Lines mark by passing in the scales
line = bq.Lines(x=x, y=y, scales={"x": xs, "y": ys})

# 4. Create a Figure object by assembling marks and axes
fig = bq.Figure(marks=[line], axes=[xax, yax], title="Line Chart")

# 5. Render the figure using display or just as is
fig

```

--------------------------------

### Plot Enhancements

Source: https://bqplot.github.io/bqplot

Example demonstrating how to enhance plots with colors, legends, axes labels, and tick formatting.

```python
fig = plt.figure(title="Sine", legend_location="top-left")
x = np.linspace(-10, 10, 100)
# multi line chart
y = [np.sin(x), np.cos(x)]

# customize axes
axes_options = {
    "x": {"label": "X"},
    "y": {"label": "Y", "tick_format": ".2f"}
}
curves = plt.plot(
    x,
    y,
    colors=["red", "green"],
    display_legend=True,
    axes_options=axes_options,
    labels=["Sine", "Cosine"]
)
fig

```

--------------------------------

### Line Chart

Source: https://bqplot.github.io/bqplot/usage/pyplot

Example of creating a line chart using bqplot's pyplot API. It demonstrates creating a figure, customizing axes options, plotting a line mark, and rendering the figure.

```python
import bqplot.pyplot as plt
import numpy as np

# create data vectors x and y to plot using a Lines mark
x = np.linspace(-10, 10, 100)
y = np.sin(x)

# 1. Create the figure object
fig = plt.figure(title="Line Chart")

# 2. By default axes are created with basic defaults. If you want to customize the axes create
# a dict and pass it to axes_options argument in the marks
axes_opts = {"x": {"label": "X"}, "y": {"label": "Y"}}

# 3. Create a Lines mark by calling plt.plot function
line = plt.plot(
    x=x, y=y, axes_options=axes_opts
)  # note that custom axes options are passed to the mark function

# 4. Render the figure using plt.show() (displays toolbar as well)
plt.show()

```

--------------------------------

### Bar Chart

Source: https://bqplot.github.io/bqplot/usage/pyplot

Example of creating a bar chart using bqplot's pyplot API. It shows how to change the mark type and customize axes options for a bar chart.

```python
# first, create data vectors x and y to plot a bar chart
x = list("ABCDE")
y = np.random.rand(5)

# 1. Create the figure object
fig = plt.figure(title="Bar Chart")

# 2. Customize the axes options
axes_opts = {
    "x": {"label": "X", "grid_lines": "none"},
    "y": {"label": "Y", "tick_format": ".0%"},
}

# 3. Create a Bars mark by calling plt.bar function
bar = plt.bar(x=x, y=y, padding=0.5, axes_options=axes_opts)

# 4. directly display the figure object created in step 1 (note that the toolbar no longer shows up)
fig

```

--------------------------------

### Object Model Usage

Source: https://bqplot.github.io/bqplot

Example of creating scales, mark objects, axes objects, and the figure object using the Object Model API.

```python
import numpy as np
import bqplot as bq

x = np.linspace(-10, 10, 200)
y = np.sin(x)

# create scales
xs = bq.LinearScale()
ys = bq.LinearScale()

# create mark objects
line = bq.Lines(x=x, y=y, scales={"x": xs, "y": ys})

# create axes objects
xax = bq.Axis(scale=xs, grid_lines="solid", label="X")
yax = bq.Axis(scale=ys, orientation="vertical", grid_lines="solid")

# create the figure object (renders in the output cell)
bq.Figure(marks=[line], axes=[xax, yax], title="Sine")

```

--------------------------------

### Simple Grid Heat Map

Source: https://bqplot.github.io/bqplot/usage/marks/gridheatmap

This example demonstrates how to create a basic Grid Heat Map using bqplot's pyplot API. It generates random data and assigns labels to rows and columns.

```python
import bqplot.pyplot as plt
import numpy as np

data = np.random.randn(10, 10)
row = list("ABCDEFGHIJ")
column = np.arange(10)

fig = plt.figure(title="Grid Heat Map", padding_y=0)
grid_map = plt.gridheatmap(color=data, row=row, column=column)
fig

```

--------------------------------

### Lines mark using pyplot

Source: https://bqplot.github.io/bqplot/usage/marks

Example of creating a Lines mark using bqplot's pyplot interface, which automatically handles scale creation.

```python
import bqplot as bq
import numpy as np

# data attributes
x = np.linspace(-10, 10, 100)
y = np.sin(x)

line = plt.plot(x, y)

```

--------------------------------

### Bar Chart

Source: https://bqplot.github.io/bqplot/usage/object-model

Example of creating a bar chart using bqplot's Object Model. It highlights how to change the mark type (from Lines to Bars) and use different scale types (OrdinalScale for categorical data).

```python
# create two vectors x and y to plot a bar chart
x = list("ABCDE")
y = np.random.rand(5)

# 1. Create the scales
xs = bq.OrdinalScale()  # ordinal scale to represent categorical data
ys = bq.LinearScale()

# 2. Create the axes for x and y
xax = bq.Axis(scale=xs, label="X", grid_lines="none")  # no grid lines needed for x
yax = bq.Axis(
    scale=ys, orientation="vertical", label="Y", tick_format=".0%"
)  # note the use of tick_format to format ticks

# 3. Create a Bars mark by passing in the scales
bar = bq.Bars(x=x, y=y, scales={"x": xs, "y": ys}, padding=0.5)

# 4. Create a Figure object by assembling marks and axes
bq.Figure(marks=[bar], axes=[xax, yax], title="Bar Chart")

```

--------------------------------

### Multiple Marks

Source: https://bqplot.github.io/bqplot/usage/object-model

Example demonstrating how to render multiple marks (a line and a scatter plot) within a single figure by passing a list of marks to the Figure object.

```python
x = np.linspace(-10, 10, 25)
y = 3 * x + 5
y_noise = y + 10 * np.random.randn(25)  # add some random noise to y

# 1. Create the scales
xs = bq.LinearScale()
ys = bq.LinearScale()

# 2. Create the axes for x and y
xax = bq.Axis(scale=xs, label="X")
yax = bq.Axis(scale=ys, orientation="vertical", label="Y")

# 3. Create a Lines and Scatter marks by passing in the scales
# additional attributes (stroke_width, colors etc.) can be passed as attributes
# to the mark objects as needed
line = bq.Lines(x=x, y=y, scales={"x": xs, "y": ys}, colors=["green"], stroke_width=3)
scatter = bq.Scatter(
    x=x, y=y_noise, scales={"x": xs, "y": ys}, colors=["red"], stroke="black"
)

# 4. Create a Figure object by assembling marks and axes
# pass both the marks (line and scatter) as a list to the marks attribute
bq.Figure(marks=[line, scatter], axes=[xax, yax], title="Scatter and Line")

```

--------------------------------

### Multiple Marks

Source: https://bqplot.github.io/bqplot/usage/pyplot

Example demonstrating how to render multiple marks (a line and a scatter plot) in the same figure using bqplot's pyplot API. It also shows how to set axis labels after creating the marks.

```python
# first, let's create two vectors x and y
x = np.linspace(-10, 10, 25)
y = 3 * x + 5
y_noise = y + 10 * np.random.randn(25)  # add some random noise to y

# 1. Create the figure object
fig = plt.figure(title="Scatter and Line")

# 3. Create line and scatter marks
# additional attributes (stroke_width, colors etc.) can be passed as attributes 
# to the mark objects as needed
line = plt.plot(x=x, y=y, colors=["green"], stroke_width=3)
scatter = plt.scatter(x=x, y=y_noise, colors=["red"], stroke="black")

# setting x and y axis labels using pyplot functions. Note that these functions
# should be called only after creating the marks
plt.xlabel("X")
plt.ylabel("Y")

# 4. render the figure
fig

```

--------------------------------

### Legends Example

Source: https://bqplot.github.io/bqplot/usage/marks/lines

To display legends, set the `labels` and `display_legend` attributes of the `plt.plot` function.

```python
fig = plt.figure(title="Random Walks")
x = np.arange(100)

```

--------------------------------

### Creating a Figure

Source: https://bqplot.github.io/bqplot/usage/figure

Demonstrates how to create a basic figure object using the bqplot.pyplot API.

```python
import bqplot.pyplot as plt

fig = plt.figure()
```

--------------------------------

### Discrete Point Selection

Source: https://bqplot.github.io/bqplot/usage/marks/scatter

Demonstrates how to select discrete points using mouse clicks and register callbacks for selection events.

```python
fig = plt.figure()
x, y = np.random.rand(2, 20)
scatter = plt.scatter(x, y, colors=["green"], stroke="black",
                      interactions={"click": "select"},
                      unselected_style={"opacity": "0.3"})

# callback to invoke when points are selected
def on_select(*args):
    selected_indices = scatter.selected
    if selected_indices is not None:
        selected_x = scatter.x[selected_indices]
        selected_y = scatter.y[selected_indices]

        # do something with selected data

# register callback on selected attribute
scatter.observe(on_select, names=["selected"])

fig

```

--------------------------------

### Labels

Source: https://bqplot.github.io/bqplot/usage/marks/scatter

Scatter plot with labels for each dot, using the 'names' attribute. Setting 'apply_clip' to False prevents labels from getting clipped off the figure.

```python
fig = plt.figure()

x, y = np.random.rand(2, 10)
names = [f"dot{i+1}" for i in range(10)]
line = plt.scatter(x, y, colors=["red"], names=names, apply_clip=False)
plt.show()

```

--------------------------------

### Run Prettier

Source: https://bqplot.github.io/bqplot/contributing

Command to run Prettier to enforce code style in the `js` folder.

```shell
jlpm prettier --write .
```

--------------------------------

### Lines mark using Object Model

Source: https://bqplot.github.io/bqplot/usage/marks

Example of creating a Lines mark using the bqplot Object Model, explicitly defining scales for x and y data attributes.

```python
import bqplot as bq
import numpy as np

# data attributes
x = np.linspace(-10, 10, 100)
y = np.sin(x)

# scales for each data attribute
xs = bq.LinearScale()
ys = bq.LinearScale()

line = bq.Lines(x, y, scales={"x": xs, "y": ys})

```

--------------------------------

### Setting Figure Width and Height (Layout Attribute)

Source: https://bqplot.github.io/bqplot/usage/figure

Shows how to set the height and width of the figure by passing a layout attribute dictionary during figure creation.

```python
fig = plt.figure(layout=dict(height="500px", width="1000px"))
```

--------------------------------

### Simple Label

Source: https://bqplot.github.io/bqplot/usage/marks/label

This code snippet demonstrates how to create a simple label with text, x, and y coordinates using bqplot's pyplot API.

```python
import numpy as np
import bqplot.pyplot as plt

fig = plt.figure(title="Basic Label Example")
x   = np.linspace(0, 2 * np.pi)
y   = np.sin(x)

line   = plt.plot(x, y)
label  = plt.label(
    text=["Max", "Min"],
    x=[.5 * np.pi, 1.5 * np.pi],
    y=[1, -1]
)
fig

```

--------------------------------

### Initial Plot Creation

Source: https://bqplot.github.io/bqplot/usage/updating-plots

Creates an initial figure and a curve plot using bqplot.pyplot.

```python
import numpy as np
import bqplot.pyplot as plt

x = np.linspace(-10, 10, 100)
y = np.sin(x)

fig = plt.figure()
curve = plt.plot(x, y)
fig
```

--------------------------------

### Region Selection with BrushSelector

Source: https://bqplot.github.io/bqplot/usage/marks/scatter

Illustrates selecting points within a rectangular region using BrushSelector and registering callbacks.

```python
import bqplot as bq

fig = plt.figure()
x, y = np.random.rand(2, 20)
scatter = plt.scatter(x, y, colors=["green"], stroke="black",
                    unselected_style={"opacity": "0.3"})
xs, ys = scatter.scales["x"], scatter.scales["y"]

selector = bq.interacts.BrushSelector(x_scale=xs, y_scale=ys, marks=[scatter])
fig.interaction = selector

# callback to invoke when points are selected
def on_select(*args):
    selected_indices = scatter.selected
    if selected_indices is not None:
        selected_x = scatter.x[selected_indices]
        selected_y = scatter.y[selected_indices]

        # do something with selected data

# register callback on selected attribute
scatter.observe(on_select, names=["selected"])

fig

```

--------------------------------

### Setting Figure Width and Height (Direct Assignment)

Source: https://bqplot.github.io/bqplot/usage/figure

Demonstrates an alternative method to set the figure's width and height by directly assigning values to fig.layout properties.

```python
fig = plt.figure()

fig.layout.width = "1000px"
fig.layout.height = "500px"
```

--------------------------------

### Background Styling

Source: https://bqplot.github.io/bqplot/usage/figure

Illustrates how to apply CSS styles to the figure's background using the background_style attribute.

```python
background_style = {"stroke": "blue",
                    "fill": "red",
                    "fill-opacity": .3}
fig = plt.figure(title="Figure", background_style=background_style)
fig
```

--------------------------------

### Tip

Source: https://bqplot.github.io/bqplot/usage/marks/bars

To render bar charts professionally it's better to disable `x` grid lines. Also set the opacity to be slightly less than 1 to make the bars a bit transparent.

```python
axes_options = {"x": {"grid_lines": "none"}}
bar = plt.bar(x, y, axes_options=axes_options, opacities=[.9])

```

--------------------------------

### IndexSelector Modes

Source: https://bqplot.github.io/bqplot/api/interactions

Explains the two modes of the Index Selector interaction: default and frozen, and how to switch between them.

```text
A single click switches between the two modes.
```

--------------------------------

### Interactions - Tooltips

Source: https://bqplot.github.io/bqplot/usage/marks/gridheatmap

Demonstrates how to add tooltips to a Grid Heat Map to display information about cells when hovered over. It specifies the fields and formats for the tooltip.

```python
import bqplot as bq

row = list("ABCDEFGHIJ")
column = np.arange(10)
tooltip = bq.Tooltip(fields=["row", "column", "color"], 
                     formats=["", ".2f", ".2f"])

fig = plt.figure(title="Tooltip", padding_y=0.0)
grid_map = plt.gridheatmap(
    data,
    row=row,
    column=column,
    tooltip=tooltip
)
fig

```

--------------------------------

### Tooltips

Source: https://bqplot.github.io/bqplot/usage/marks/scatter

Scatter plot with interactive tooltips that display the x and y values, formatted to two decimal places.

```python
import bqplot as bq

fig = plt.figure()
x, y = np.random.rand(2, 20)
tooltip = bq.Tooltip(fields=["x", "y"], formats=[".2f", ".2f"])
scatter = plt.scatter(x, y, colors=["green"], stroke="black",
                      tooltip=tooltip)
fig

```

--------------------------------

### Tooltips

Source: https://bqplot.github.io/bqplot/usage/marks/map

Adds tooltips to map elements, displaying 'id' and 'name' fields.

```python
fig = plt.figure(title="Interactions")
tooltip = bq.Tooltip(fields=["id", "name"])
map = plt.geo(
    map_data="WorldMap",
    tooltip=tooltip
)
fig

```