from bokeh.plotting import output_notebook, show, figure
from bokeh.models import ColumnDataSource
from bokeh.resources import CDN
import bokeh.sampledata.unemployment1948 as data
df = data.data
source = ColumnDataSource(df)
output_notebook( resources=CDN )
from coffeetools import coffee
from IPython.display import Javascript
from IPython.display import HTML
Create a table from a pandas DataFrame
table = """
<tr>
<td>
<code class="figure" contenteditable="true">figure:
plot_width: 400
plot_height: 400
</code>
</td>
"""
child_row = ''
child_row += "<tr class='x-axis' data-row='{key}'><th>{key}</th>"
for key in df.keys():
table += "<th class='y-axis'>{key}</th>".format(key=key)
child_row += "<td data-column='{key}'></td>".format(key=key)
table += "</tr>"
child_row += "</tr>"
for key in df.keys():
table += child_row.format( key= key)
pass
Make selected content editable
create_interactive_table = coffee.compile("""require [
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"
], (d3) ->
table = d3.select "div#display table"
table.selectAll 'td'
.style 'border-color', 'green'
rows = table.selectAll 'tr'
rows.each (d,i) ->
row = d3.select @
if i > 0
row.select 'th'
.on 'click', ()->
rows.classed 'selected', false
.attr 'contenteditable','false'
row.classed 'selected', not row.classed 'selected'
row.selectAll 'td'
.append 'code'
.attr 'contenteditable','true'
""",bare=True)
Capture the glyph information as YAML in the cells
get_figure_data = coffee.compile("""
require [
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.3.1/js-yaml.min.js"
], (d3,yaml) ->
figure = yaml.load d3.select('.figure').text()
figure['glyphs'] = []
x_row = d3.selectAll '.selected'
x_column = x_row.attr('data-row')
x_row.selectAll 'td'
.each (d,i)->
cell = d3.select @
if cell.text().trim().length > 0
d3.entries yaml.load cell.text()
.forEach (d) ->
tmp = {}
tmp[d.key] =
x: x_column
y: cell.attr 'data-column'
d3.entries d.value
.forEach (_d)->
tmp[d.key][_d.key] = _d.value
figure['glyphs'].push tmp
IPython.notebook.kernel.execute 'figure_data = ' + JSON.stringify figure
""", bare = True )
Create the interaction table
HTML("""
<style>
div#display tr.selected {
border-top-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
}
</style>
<div id='display'>
<table>
%s
</table>
</div>
""" % (table) )
figure:
plot_width: 400
plot_height: 400
|
Year | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec | Annual |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Year | ||||||||||||||
Jan | ||||||||||||||
Feb | ||||||||||||||
Mar | ||||||||||||||
Apr | ||||||||||||||
May | ||||||||||||||
Jun | ||||||||||||||
Jul | ||||||||||||||
Aug | ||||||||||||||
Sep | ||||||||||||||
Oct | ||||||||||||||
Nov | ||||||||||||||
Dec | ||||||||||||||
Annual |
Initialize contenteditable
Javascript( create_interactive_table )
Transform table UI info to Python
Javascript(get_figure_data)
print(figure_data)
{'glyphs': [{'line': {'x': 'Year', 'y': 'Jan', 'color': 'red'}}, {'line': {'line_dash': [4, 4], 'x': 'Year', 'y': 'Annual', 'line_color': 'gray', 'line_width': 5, 'line_alpha': 0.6}}], 'figure': {'plot_height': 400, 'x_axis_label': 'Year', 'plot_width': 400}}
# Create bokeh representation
p = figure(
**figure_data['figure']
)
glyphs = figure_data['glyphs']
for glyph in glyphs:
tmp = list(glyph.values())[0]
tmp['source'] = source
getattr( p, list(glyph.keys())[0] )(**tmp)
show(p)
import git
repo = git.Repo('.')
index = repo.index
index.add(['ui-playground.ipynb'])
index.commit( message = "Committed from the notebook")
repo.remotes['origin'].push()
[<git.remote.PushInfo at 0x10700f728>]
import requests
from pyquery import PyQuery as pq
with open( 'ui-playground.ipynb', 'r' ) as f:
s = pq(f.read())
HTML("""
<table>
<tr>
<td contenteditable="false">don't edit</td>
<td contenteditable="true">edit</td>
</tr>
</table>
""")
don't edit | edit |
js_code = coffee.compile("""
require [
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"
], (d3) ->
table = d3.select 'table#ui'
console.log table
table.html ''
.selectAll 'tr'
.data keys
.enter()
.append 'tr'
table.selectAll 'tr'
.each (_,i)->
table.selectAll 'tr'
""")
Javascript( js_code )
%%coffeescript
require [
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"
], (d3) ->
table = d3.select "div#display table"
table.selectAll 'td'
.style 'border-color', 'green'
rows = table.selectAll 'tr'
rows.each (d,i) ->
row = d3.select @
if i > 0
row.select 'th'
.on 'click', ()->
rows.classed 'selected', false
.attr 'contenteditable','false'
row.classed 'selected', not row.classed 'selected'
row.selectAll 'td'
.append 'code'
.attr 'contenteditable','true'
%%coffeescript
require [
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.3.1/js-yaml.min.js"
], (d3,yaml) ->
figure = yaml.load d3.select('.figure').text()
figure['glyphs'] = []
x_row = d3.selectAll '.selected'
x_column = x_row.attr('data-row')
x_row.selectAll 'td'
.each (d,i)->
cell = d3.select @
if cell.text().trim().length > 0
d3.entries yaml.load cell.text()
.forEach (d) ->
tmp = {}
tmp[d.key] =
x: x_column
y: cell.attr 'data-column'
d3.entries d.value
.forEach (_d)->
tmp[d.key][_d.key] = _d.value
figure['glyphs'].push tmp
IPython.notebook.kernel.execute 'figure_data = ' + JSON.stringify figure