Plot Options¶

genstudio.plot has many helper functions to specify Observable Plot options.

Size and spacing¶

In [1]:

import genstudio.plot as Plot

data = [[1, 1], [2, 2], [3, 3]]

import genstudio.plot as Plot data = [[1, 1], [2, 2], [3, 3]]

In [2]:

(Plot.line(data) + Plot.width(200))  # Set width only

(Plot.line(data) + Plot.width(200)) # Set width only

Out[2]:

In [3]:

(Plot.line(data) + Plot.height(100))  # Set height only

(Plot.line(data) + Plot.height(100)) # Set height only

Out[3]:

In [4]:

(Plot.line(data) + Plot.size(250))  # Set both width and height to same value

(Plot.line(data) + Plot.size(250)) # Set both width and height to same value

Out[4]:

In [5]:

(Plot.line(data) + Plot.size(600, 200))  # Set different width and height

(Plot.line(data) + Plot.size(600, 200)) # Set different width and height

Out[5]:

Control margins (follows CSS margin syntax)

In [6]:

small_plot = Plot.line(data) + {"className": "bg-blue-200"}
(small_plot + Plot.margin(70))  # All sides

small_plot = Plot.line(data) + {"className": "bg-blue-200"} (small_plot + Plot.margin(70)) # All sides

Out[6]:

In [7]:

(small_plot + Plot.margin(30, 100))  # Vertical, horizontal

(small_plot + Plot.margin(30, 100)) # Vertical, horizontal

Out[7]:

In [8]:

(small_plot + Plot.margin(0, 0, 50, 100))  # Top, right, bottom, left

(small_plot + Plot.margin(0, 0, 50, 100)) # Top, right, bottom, left

Out[8]:

Axes and Grid Options¶

Customize the appearance of axes and grid:

In [9]:

# Add or remove grid lines
(Plot.line(data) + Plot.grid())  # Both axes

# Add or remove grid lines (Plot.line(data) + Plot.grid()) # Both axes

Out[9]:

In [10]:

(Plot.line(data) + Plot.grid(y=True))  # Y-axis only

(Plot.line(data) + Plot.grid(y=True)) # Y-axis only

Out[10]:

In [11]:

# Hide axes
(Plot.line(data) + Plot.hideAxis())  # Hide both axes

# Hide axes (Plot.line(data) + Plot.hideAxis()) # Hide both axes

Out[11]:

In [12]:

(Plot.line(data) + Plot.hideAxis(x=True))  # Hide x-axis only

(Plot.line(data) + Plot.hideAxis(x=True)) # Hide x-axis only

Out[12]:

In [13]:

(Plot.line(data) + Plot.hideAxis(y=True))  # Hide y-axis only

(Plot.line(data) + Plot.hideAxis(y=True)) # Hide y-axis only

Out[13]:

In [14]:

# Set axis domains
(Plot.line(data) + Plot.domainX([0, 4]))  # Set x-axis range

# Set axis domains (Plot.line(data) + Plot.domainX([0, 4])) # Set x-axis range

Out[14]:

In [15]:

(Plot.line(data) + Plot.domainY([0, 4]))  # Set y-axis range

(Plot.line(data) + Plot.domainY([0, 4])) # Set y-axis range

Out[15]:

In [16]:

(Plot.line(data) + Plot.domain([0, 4]))  # Set both axes to same range

(Plot.line(data) + Plot.domain([0, 4])) # Set both axes to same range

Out[16]:

In [17]:

(Plot.line(data) + Plot.domain([0, 4], [0, 3]))  # Set different ranges

(Plot.line(data) + Plot.domain([0, 4], [0, 3])) # Set different ranges

Out[17]:

Title and Labels¶

Add descriptive text to your plot:

In [18]:

# Add titles and captions
(
    Plot.line(data)
    + Plot.title("My Plot")
    + Plot.subtitle("A simple line plot")
    + Plot.caption("Source: Example data")
)

# Add titles and captions ( Plot.line(data) + Plot.title("My Plot") + Plot.subtitle("A simple line plot") + Plot.caption("Source: Example data") )

Out[18]:

Aspect Ratio¶

Control the plot's proportions of the x and y scales.

In [19]:

# Set aspect ratio (width/height)
(Plot.line(data) + Plot.aspectRatio(1.5))  # Make plot 1.5 times wider than tall

# Set aspect ratio (width/height) (Plot.line(data) + Plot.aspectRatio(1.5)) # Make plot 1.5 times wider than tall

Out[19]:

The aspect ratio in Observable Plot controls the relationship between the physical size of one unit on the x-axis versus one unit on the y-axis. This is not the same as the width/height ratio of the plot container itself. An aspect ratio of 1 can still result in a plot with a 2:1 width:height ratio, as seen below, where the domain of x is [0, 2] while the domain of y is [0, 1].

(Plot.line([[0, 0], [1, 0.5], [2, 1]])) + Plot.aspectRatio(1)

Clipping¶

Control whether marks extend beyond the plot area:

In [20]:

# Enable clipping
(Plot.line(data) + Plot.clip())

# Enable clipping (Plot.line(data) + Plot.clip())

Out[20]: