Here is my first take on this. I tried to modify a bit my old codes while using the slider example as a template. There are still some things which I didn’t get to work properly, for example when I press the button, I see that the JS side updating of the data works (node id text changes), but in order to to see the effects of the Python side callback (n value) I need to press the button again. So it seems that the JS code (function render) is run first and then the Python side callback is triggered?
Here is the main.py:
import pandas as pd
from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, Column
from custom import Custom
from bokeh.models.widgets import Button
create a button
button = Button(label=“Compute”, button_type=“success”)
create a columndatasource containing the information about selected node
could contain multiple nodes as well
source = ColumnDataSource({‘node’: [‘node 0’], ‘n’: [‘2500’]})
define a callback function which is run when the button is pressed
def modify_n():
# play it safe and modify whole data at once (hence use of d)
d = source.data
d[‘n’][0] = data.loc[source.data[‘node’][0], ‘n’]
source.data = d
callback
button.on_click(modify_n)
static tree, will be parsed to JSON object
in real application this could of course be modified as well
d = ‘{ “children”: [ { “color”: “#adadad”, “n”: 356, “name”: “node 1” },
{ “children”: [ { “color”: “#1f77b4”, “n”: 635, “name”: “node 4” },
{ “color”: “#ff7f0e”, “n”: 1068, “name”: “node 5” } ],
“color”: “#adadad”, “n”: 1703, “name”: “node 2” },
{ “color”: “#adadad”, “n”: 441, “name”: “node 3” } ],
“color”: “#adadad”, “n”: 2500, “name”: “node 0” }’
Information about the nodes, bit redundant but simpler this way…
data = pd.DataFrame(
data=[‘2500’, ‘356’, ‘441’, ‘1703’, ‘635’, ‘1068’],
index=[‘node 0’, ‘node 1’, ‘node 2’, ‘node 3’, ‘node 4’, ‘node 5’],
columns=[‘n’])
create figure as a custom model
figure = Custom(button=button, treeData=d, source=source)
add button and figure to the page
curdoc().add_root(Column(button, figure))
curdoc().title = “D3.js with Bokeh”
And the Python side definition of Custom (custom.py):
from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, ColumnDataSource
from bokeh.models.widgets import Button
class Custom(LayoutDOM):
# load D3.js
javascript = “https://d3js.org/d3.v5.min.js”
implementation = “custom.ts”
button = Instance(Button)
treeData = String
source = Instance(ColumnDataSource)
And here is the TS/JS implementation (custom.ts):
import {div, empty} from “core/dom”
import * as p from “core/properties”
import {LayoutDOM, LayoutDOMView} from “models/layouts/layout_dom”
export class CustomView extends LayoutDOMView {
initialize(options) {
super.initialize(options)
// Set BokehJS listener, so that when button is the tree is drawn again
// we don't actually need to re-render the whole tree as we are not updating it...
this.connect(this.model.button.change, () => this.render())
}
// function for drawing the D3 tree
drawTree(treeData, source) {
// set size of the figure
// fixed, could modify the size in responsive way given other bokeh models?
var margin = {top: 40, right: 90, bottom: 50, left: 90},
width = 660 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// declare a tree layout
var treemap = d3.tree()
.size([width, height]);
// create the hierarchy
var nodes = d3.hierarchy(treeData);
// create the tree layout
nodes = treemap(nodes);
// append the svg object and group g into svg
var svg = d3.select(this.el).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g = svg.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// adds the links between the nodes
var link = g.selectAll(".link")
.data( nodes.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.x + "," + d.y
+ "C" + d.x + "," + (d.y + d.parent.y) / 2
+ " " + d.parent.x + "," + (d.y + d.parent.y) / 2
+ " " + d.parent.x + "," + d.parent.y;
});
// adds each node as a group
var node = g.selectAll(".node")
.data(nodes.descendants())
.enter().append("g")
.attr("class", function(d) {
return "node" +
(d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
function toggleColor(){
if(d3.select(this).style("stroke") == "white") {
d3.select(this).style("stroke", "black");
} else {
d3.select(this).style("stroke", "white");
}
}
// adds the circle to the node
var max_n = treeData.n;
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
node.append("circle")
.attr("r", function(d) {return 20 * Math.max(0.25,Math.sqrt(d.data.n / max_n))})
.style("stroke", "white")
.style("fill", function(d) {return d3.rgb(d.data.color)})
.on('click', function(d){
toggleColor.call(this);
// update the node name in the data source
var data = source.data;
data['node'][0] = d.data.name;
source.data = data;
source.change.emit();
})
.on("mouseover", function(d){
tooltip.style("visibility", "visible");
})
.on("mousemove", function(d){
tooltip.html("node size: " + d.data.n);
tooltip.style("background", "#ffffff")
tooltip.style("top",
(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(d){
tooltip.style("visibility", "hidden");
});
// adds the text to the node
node.append("text")
.attr("dy", ".35em")
.attr("y", function(d) {
return d.children ? -30 : 30;
})
.style("text-anchor", "middle")
.text(function(d) { return d.data.name; });
}
render() {
// BokehjS Views create
elements by default, accessible as
//
this.el. Many Bokeh views ignore this default
, and instead
// do things like draw to the HTML canvas. In this case though, we change
// append the tree to the div.
empty(this.el)
// draw tree
this.drawTree(
JSON.parse(this.model.treeData),
this.model.source)
this.el.appendChild(div({
style: {
'padding': '2px',
'color': 'red',
'background-color': 'white',
},
}, `Selected node: ${this.model.source.data.node}, n: ${this.model.source.data.n}`))
}
}
export class Custom extends LayoutDOM {
// If there is an associated view, this is typically boilerplate.
default_view = CustomView
// The type class attribute should generally match exactly the name
// of the corresponding Python class.
type = “Custom”
}
// The @define block adds corresponding “properties” to the JS model. These
// should normally line up 1-1 with the Python model class. Most property
// types have counterparts, e.g. bokeh.core.properties.String will be
// p.String in the JS implementation. Any time the JS type system is not
// yet as complete, you can use p.Any as a “wildcard” property type.
Custom.define({
button: [ p.Instance ],
treeData: [ p.String ],
source: [ p.Instance ]
})
And finally the index.html, where I just added some css in order to render the tree correctly (Adding this to custom.py didn’t seem to work):
{#
Renders Bokeh models into a basic .html file.
:param title: value for <title> tags
:type title: str
:param plot_resources: typically the output of RESOURCES
:type plot_resources: str
:param plot_script: typically the output of PLOT_SCRIPT
:type plot_script: str
:param plot_div: typically the output of PLOT_DIV
:type plot_div: str
Users can customize the file output by providing their own Jinja2 template
that accepts these same parameters.
#}
{{ title if title else "Bokeh Plot" }}
{{ bokeh_css }}
{{ bokeh_js }}
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
html {
width: 100%;
height: 100%;
}
body {
width: 90%;
height: 100%;
margin: auto;
}
</style>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
Best,
Jouni
torstai 19. huhtikuuta 2018 22.46.44 UTC+2 Angelo Fausti Neto kirjoitti:
···
Thanks Bryan and Jouni this is very encouraging, I am interested in using some D3 charts in bokeh, in particular bullet charts and spark lines for a dashboard work I am doing. Will share my experiences with the group when I have something.
best,
Angelo
Angelo Fausti
On Thu, Apr 19, 2018 at 6:58 AM, [email protected] wrote:
Yeah I noticed different styles depending on what example I am looking at. I now started with the simple slider example and I try to build up from there. Already got a single responsive D3 circle, so maybe this will work eventually. 
torstai 19. huhtikuuta 2018 14.24.31 UTC+2 Bryan Van de ven kirjoitti:
Backbone was ripped out some time ago and bokehjs was also recently ported to type script. Coffeescript and pure JS are options but not required.
On Apr 19, 2018, at 00:28, [email protected] wrote:
Thanks,
I’ll look into the example and see if I can modify it accordingly. Unfortunately I have no experience on BackBone or Coffeescript (and my JS skills are limited as well), so let’s see…
Jouni
keskiviikko 18. huhtikuuta 2018 18.37.16 UTC+2 Bryan Van de ven kirjoitti:
Hi,
This definitely sounds like a good use case for a Custom Extension:
[https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html](https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html)
In particular there is a compete example of wrapping a simple 3D Plot library as a Bokeh component:
[https://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html](https://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html)
The idea would be the same: Model properties define the interface between JS and Python and the JS implementation actually does all the work do draw whatever you need based on the property values (which Bokeh will automatically keep in sync).
As an aside, an example of an extension using D3 would make a great and valuable contribution to the project.
Thanks,
Bryan
On Apr 18, 2018, at 06:56, [email protected] wrote:
Can you use custom D3 graphs within the bokeh server? Are there any examples of doing something like this?
Some background: I am currently developing a dashboard using Flask + Bokeh + D3, where I have a couple panels for variable selections and different dropdown choices etc (made with wtforms and jquery) which are used to select visualization and data analysis types done in Python backed. Then I have one panel with tree graph similar to this D3.js example: http://bl.ocks.org/d3noob/8375092 (which can grow during the analysis), and one panel which contains different embedded Bokeh plots (where the actual type plot depends on the previous panels, whether it is scatter plot, histogram etc). There are however some issues with responsive scaling the Bokeh plots, rendering large datasets (where I could probably use datashader), and overall difficulty of mixing D3 and Bokeh, custom JS callbacks etc. So I started to wonder if I could just make a bokeh app without all the hassle caused by mixing things together. But then I noticed that it is not that straightforward to make the tree diagram with Bokeh, so I wonder if I could somehow embed the tree made with D3 into this. So, in a sense what I am now doing is embed Bokeh plots within Flask app, while I could maybe do it other way around as well (embed D3 into Bokeh app).
I don’t know if this makes sense, I am pretty new to Bokeh, Flask and D3…
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/31bc2cb9-71a4-4649-ae14-9eb3eb6ea027%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0f46b061-8d7d-4328-9bad-a7a82652cc0d%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/410eebef-1b1d-4404-b246-1766c8c25621%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.