# Make line\_width or any other numerical property of hex\_tile change depending on datapoint

**URL:** <https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031>\
**Category:** Community Support\
**Tags:** bokehjs, bokeh\
**Created:** [November 13, 2023, 12:16pm UTC](https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031 "2023-11-13T12:16:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![robind](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/r/bbce88/32.png) [@robind](https://discourse.bokeh.org/u/robind)\
**Post date:** [November 13, 2023, 12:16pm UTC](https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031/1 "2023-11-13T12:16:04Z")

</div>

Is it possible to change the line\_width of a hex\_tile depending on the value of a field, for example line\_width=3 if field “counts” \> 100, else line\_width=0. For the fill\_color property I can use linear\_cmap. Is there something for numerical properties aswell? Best would be without adding another column to my CDS.

> figure.hex\_tile(q=“q”, r=“r”, line\_width=3, alpha=0.4, fill\_color=linear\_cmap(‘counts’, ‘Viridis256’, 0, 300))

---

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [November 13, 2023, 2:21pm UTC](https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031/2 "2023-11-13T14:21:01Z")

</div>

Something like this, leveraging the amazingness of `CustomJSTransform`:

```auto
from bokeh.plotting import figure, show
from bokeh.transform import transform
from bokeh.models import ColumnDataSource, HexTile, CustomJSTransform

source = ColumnDataSource(dict(
        q=[0, 0, -1, -1, 1, 1, 0],
        r=[0, -1, 0, 1, -1, 0, 1],
        counts=[199,205,301,500,150]
    )
)

plot = figure(width=300, height=300)
#create a customjstransform that goes through the array of counts and populates an array of widths
width_transform = CustomJSTransform(v_func='''
                                    var widths = []
                                    //variable xs corresponds to the array corresponding to the assigned field_name in the transform
                                    //so in this case xs will be the array of counts
                                    for (var i=0;i<xs.length;i++){
                                            if (xs[i] > 300){
                                                    widths.push(8)
                                                    }
                                            else {widths.push(0)}
                                            }
                                    
                                    return widths
                                    ''')
r = plot.hex_tile(q="q", r="r", size=1, fill_color="#fb9a99", line_color="black"
                  ,line_width=transform(field_name='counts',transform=width_transform) #assign the transform to the line_widths property
                  ,source=source)

show(plot)

```

![image](https://discourse-uploads.bokeh.org/original/2X/9/985325d5c6e8388e54662b057be09310b5ccd7ad.png)

---

<div class="post-metadata">

**Author:** ![robind](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/r/bbce88/32.png) [@robind](https://discourse.bokeh.org/u/robind)\
**Post date:** [November 13, 2023, 2:38pm UTC](https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031/3 "2023-11-13T14:38:51Z")

</div>

Thank you very much. This is exactly what I needed. CustomJSTransform does indeed look amazing and powerful.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [February 11, 2024, 2:39pm UTC](https://discourse.bokeh.org/t/make-line-width-or-any-other-numerical-property-of-hex-tile-change-depending-on-datapoint/11031/4 "2024-02-11T14:39:16Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.