# Plot a gaussian connected to HeatMap using bokeh+holoviews

**URL:** <https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237>\
**Category:** Community Support\
**Created:** [February 17, 2021, 2:32pm UTC](https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237 "2021-02-17T14:32:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![niko\_sarcevic](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/niko_sarcevic/32/3085_2.png) [@niko\_sarcevic](https://discourse.bokeh.org/u/niko_sarcevic)\
**Post date:** [February 17, 2021, 2:32pm UTC](https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237/1 "2021-02-17T14:32:14Z")

</div>

Hi, all

I am completely new to HV (since last night, actually) so be gentle.

I am playing around with HV so I have constructed a heat map where x and y are some values of the mean and standard deviation (sigma). Then for each combo of mean and sigma, I calculate the coefficient of variation (just the ratio of sigma and mean). That I have successfully done.

1. Now what I want to do is to, for each cell in the HeatMap, plot a gaussian that corresponds to a std and mean combo. I have no clue how to do this. Anyone has an idea? (as you can see I have tried but with no success.)
2. Secondly, I have no clue how to change my hover tool to display some custom info like to say mean, std and cv instead of x, y and z
3. Thirdly, how to use this HV code as a HTML (output HTML file?) so I can import it to the website?

Thanks in advance!

```
import pandas as pd
import numpy as np
import holoviews as hv
from holoviews import opts
hv.extension('bokeh')

# here the mean and std vales are given (hardcoded)
mu = [-1, 5, 10]
std = [10, 50, 90]

# make an empty list to append coefficient of variation
cov = []

# calculate the coefficient of variation c_v = std/mu for all combos of std and mu

for i in range(0, len(mu)):
    for j in range(0, len(std)):
        cov.append(std[j] / mu[i])

# to place the values of std and mean on a 2D plot, values have to be
# repeated in a certain way, therefore

std_rep = np.tile(std, 3)
mu_rep = np.repeat(mu, 3)

sigma = std_rep.astype(str)
mean = mu_rep.astype(str)

###heatmap entries per cell have to be strings, like this
sigma2=['10', '50', '90', '10', '50', '90', '10', '50', '90']
mean2 = ['-1', '-1', '-1', '5', '5', '5', '10', '10', '10']
################################################

# make heatmap
heatmap = hv.HeatMap((sigma, mean, cov))

# declare tap stream with heatmap as source and initial values
posxy = hv.streams.Tap(source=heatmap, x='sigma', y='mean')

# Define function to compute histogram based on tap location
def tap_histogram(x, y):
    
    x_vals = np.arange(-100, 100, 0.1)
    y_vals = norm(mean, sigma)

    plt.plot(x_vals, y_vals.pdf(x_vals))
    
    return hv.Curve((x_vals, y_vals.pdf(x_vals)), mean, sigma) 

(heatmap).opts(opts.HeatMap(cmap='RdBu', tools=['hover', 'tap'], colorbar=True, 
                            width=500, height=500, toolbar='above', clim=(-100,15),
                            title ='coefficient of variation',
                            fontsize={'xticks': '10pt', 'yticks': '10pt', 
                                      'xlabel': '10pt', 'ylabel': '10pt',
                                     'title': '15pt'},
                            xlabel='STD', ylabel='MEAN'
                           
                           
                           ))

#cmap examples cmpap = 'RdBu', 'Viridis', etc
# more at http://holoviews.org/user_guide/Colormaps.html
```

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [February 17, 2021, 4:53pm UTC](https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237/2 "2021-02-17T16:53:51Z")

</div>

Hi @niko_sarcevic Holoviews is a separate project maintained by a different team of people. Questions about HV should be directed at the HoloViz Discourse:

[https://discourse.holoviz.org](https://discourse.holoviz.org)

---

<div class="post-metadata">

**Author:** ![niko\_sarcevic](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/niko_sarcevic/32/3085_2.png) [@niko\_sarcevic](https://discourse.bokeh.org/u/niko_sarcevic)\
**Post date:** [February 17, 2021, 5:20pm UTC](https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237/3 "2021-02-17T17:20:33Z")

</div>

Yes, I have asked there as well. Sorry if I am cluttering the board. Here is the answer from HV discourse:

> **[Plot a gaussian connected to the HeatMap by tap option](https://discourse.holoviz.org/t/plot-a-gaussian-connected-to-the-heatmap-by-tap-option/1867/2)**
>
> Hi, 1 - you were pretty close, it can be confusing but you need to instantiate your Tap stream with a default value for x and y, It’s not like the other syntaxe where you put the columns names. posxy = hv.streams.Tap(source=heatmap, x=10, y=10) ...

---

<div class="post-metadata">

**Author:** ![niko\_sarcevic](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/niko_sarcevic/32/3085_2.png) [@niko\_sarcevic](https://discourse.bokeh.org/u/niko_sarcevic)\
**Post date:** [February 17, 2021, 5:53pm UTC](https://discourse.bokeh.org/t/plot-a-gaussian-connected-to-heatmap-using-bokeh-holoviews/7237/4 "2021-02-17T17:53:24Z")

</div>

Hi, Bryan

I actually have a question re: bokeh.

What I have done in holoviews (making a heat map and a correlated plot for each cell) - can that be done in bokeh easy AND exported to a html so it can be embedded in a website? Even though I have a solution with holoviews, I cannot use that html code at all for some reason.

 ![Screenshot 2021-02-17 at 17.52.46](https://discourse-uploads.bokeh.org/original/2X/1/15fd33a1c17cf9a333121b867ab6488233b20c28.png)