Help with getColor and related

Using Streamlit
1

I’m trying to use a column to change my ScatterplotLayer dots color.

I’ve tried str, int, [int,int,int], (int,int,int) and a few combinations of them so far. Unsuccessfully.

I can set colors using a stack of layers filtering my df[filters] using ‘getColor’: [255,0,0] but now I’d like to use a gradient of colors.

Let’s say red from (0,0,0) to (255,0,0). Using a transformed column of type int in the range [0-255].

Please, have someone got this to work?

In the API docs this wasn’t clear for me.

Thx

1 Like
2

The admittedly totally undocumented answer to this is to add columns named ‘colorR’, ‘colorG’ and ‘colorB’ as shown in this gist and reproduced here:

import streamlit as st
import pandas as pd
import numpy as np
 
n_points = 1000
sf_lat, sf_lon = 37.76, -122.4
map_data = pd.DataFrame({
    'lat': np.random.randn(n_points) / 50 + sf_lat,
    'lon': np.random.randn(n_points) / 50 + sf_lon,
    'colorR': np.random.uniform(size=n_points, high=255.0),
    'colorG': np.random.uniform(size=n_points, high=255.0),
    'colorB': np.random.uniform(size=n_points, high=255.0),
})
 
st.deck_gl_chart(
    viewport={
        'latitude': map_data['lat'].median(),
        'longitude': map_data['lon'].median(),
        'zoom': 11,
        'pitch': 50,
        'opacity': 0.1
    },
    layers = [{
        'data': map_data,
        'type': 'ScatterplotLayer'
}])

To see this gist in action, please run:

streamlit run https://gist.githubusercontent.com/treuille/b95f5cc9bb521bd30adc27cd578ca935/raw

and you will see something like:

67905954-070ee580-fb6b-11e9-996f-34f521c3d14b.jpg1764×1618 592 KB

Does that work for you?

1 Like
3

Works like a charm!

Thank you sooo much.

I found a possible bug, when any of R,G,B columns have 0.0 value, the colors are ignored. I just added 0.01 to all color channels and everything is working now.

Thx

1 Like
4

So glad that fixed your problem @Lazaro_Pinheiro_Domi. Please know that we will soon be deprecating our own deck_gl implementation and switching to Uber’s own DeckGL python bindings.

2 Likes