Scatterplot Layer Example¶

This notebook demonstrates the DeckGL ScatterplotLayer for visualizing point data.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Scatterplot Layer¶

In [ ]:

import random
from anymap_ts import DeckGLMap

# Generate random points around San Francisco
points = [
    {
        "coordinates": [
            -122.4 + random.uniform(-0.2, 0.2),
            37.8 + random.uniform(-0.2, 0.2),
        ],
        "value": random.randint(10, 100),
    }
    for _ in range(500)
]

m = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("CartoDB.DarkMatter")
m.add_scatterplot_layer(
    data=points,
    name="scatterplot-basic",
    get_position="coordinates",
    get_radius=100,
    get_fill_color=[255, 140, 0, 200],
    radius_min_pixels=2,
    radius_max_pixels=20,
)
m

import random from anymap_ts import DeckGLMap # Generate random points around San Francisco points = [ { "coordinates": [ -122.4 + random.uniform(-0.2, 0.2), 37.8 + random.uniform(-0.2, 0.2), ], "value": random.randint(10, 100), } for _ in range(500) ] m = DeckGLMap(center=[-122.4, 37.8], zoom=10) m.add_basemap("CartoDB.DarkMatter") m.add_scatterplot_layer( data=points, name="scatterplot-basic", get_position="coordinates", get_radius=100, get_fill_color=[255, 140, 0, 200], radius_min_pixels=2, radius_max_pixels=20, ) m

Scatterplot with Size Based on Value¶

In [ ]:

m2 = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_scatterplot_layer(
    data=points,
    name="scatterplot-sized",
    get_position="coordinates",
    get_radius="value",
    get_fill_color=[0, 200, 100, 180],
    radius_scale=10,
    radius_min_pixels=3,
    radius_max_pixels=50,
    stroked=True,
    get_line_color=[255, 255, 255, 200],
    line_width_min_pixels=1,
)
m2

m2 = DeckGLMap(center=[-122.4, 37.8], zoom=10) m2.add_basemap("CartoDB.DarkMatter") m2.add_scatterplot_layer( data=points, name="scatterplot-sized", get_position="coordinates", get_radius="value", get_fill_color=[0, 200, 100, 180], radius_scale=10, radius_min_pixels=3, radius_max_pixels=50, stroked=True, get_line_color=[255, 255, 255, 200], line_width_min_pixels=1, ) m2

Multiple Scatterplot Layers with Layer Control¶

In [ ]:

high_value_points = [p for p in points if p["value"] >= 50]
low_value_points = [p for p in points if p["value"] < 50]

m3 = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m3.add_basemap("CartoDB.DarkMatter")

m3.add_scatterplot_layer(
    data=high_value_points,
    name="scatterplot-high-value",
    get_position="coordinates",
    get_radius="value",
    get_fill_color=[255, 50, 50, 200],
    radius_scale=15,
    radius_min_pixels=5,
)

m3.add_scatterplot_layer(
    data=low_value_points,
    name="scatterplot-low-value",
    get_position="coordinates",
    get_radius="value",
    get_fill_color=[50, 100, 255, 200],
    radius_scale=15,
    radius_min_pixels=3,
)

m3.add_layer_control()
m3

high_value_points = [p for p in points if p["value"] >= 50] low_value_points = [p for p in points if p["value"] < 50] m3 = DeckGLMap(center=[-122.4, 37.8], zoom=10) m3.add_basemap("CartoDB.DarkMatter") m3.add_scatterplot_layer( data=high_value_points, name="scatterplot-high-value", get_position="coordinates", get_radius="value", get_fill_color=[255, 50, 50, 200], radius_scale=15, radius_min_pixels=5, ) m3.add_scatterplot_layer( data=low_value_points, name="scatterplot-low-value", get_position="coordinates", get_radius="value", get_fill_color=[50, 100, 255, 200], radius_scale=15, radius_min_pixels=3, ) m3.add_layer_control() m3

Using the Generic add_deckgl_layer Method¶

In [ ]:

m4 = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_deckgl_layer(
    layer_type="ScatterplotLayer",
    data=points,
    name="scatterplot-generic",
    getPosition="coordinates",
    getRadius=100,
    getFillColor=[138, 43, 226, 200],
    radiusMinPixels=3,
    radiusMaxPixels=30,
    opacity=0.8,
)
m4

m4 = DeckGLMap(center=[-122.4, 37.8], zoom=10) m4.add_basemap("CartoDB.DarkMatter") m4.add_deckgl_layer( layer_type="ScatterplotLayer", data=points, name="scatterplot-generic", getPosition="coordinates", getRadius=100, getFillColor=[138, 43, 226, 200], radiusMinPixels=3, radiusMaxPixels=30, opacity=0.8, ) m4

Export to HTML¶

In [ ]:

m.to_html("scatterplot_layer_example.html")

m.to_html("scatterplot_layer_example.html")