In my jupyter notebook, I want to have an interactive table, that when the user selects a row, I show relevant values in another table or graph.
What I am currently trying to use is declarativewidgets (although if an easier alternative was presented, I would be just as glad)
I had no problem setting up an example worked fine, and it was trivial to link the event from one item to the next, but I have been unable to change the styling of the elements. In particular, I want to be able to control the background color (and even make it alternate by row) on a table by table basis. I mean, I will have several tables (the first linked to the next, linked to the next, etc.), and I want each table to have a different background color.
What I have so far:
from IPython.display import display, Image
from IPython.core.display import HTML
from ipywidgets import *
import declarativewidgets
import pandas as pd
declarativewidgets.init()
Then I import the urth-viz-table:
%%html
<link rel="import" href="urth_components/urth-viz-table/urth-viz-table.html"
is='urth-core-import'>
Then I have a function
def create_df():
return pd.DataFrame({'one' : pd.Series([1., 2., 3.], index=['a', 'b', 'c']),
'two' : pd.Series([1., 2., 3., 4.], index=['a', 'b', 'c', 'd'])})
And the next cell creates the first table:
%%html
<template is="urth-core-bind">
<urth-core-function ref="create_df"
result="{{create_df}}"
limit="1600"
delay="100"
auto>
</urth-core-function>
<urth-viz-table datarows="{{ create_df.data }}"
rows-visible="19"
selection="{{first_selection}}"
columns="{{ create_df.columns }}"
selection-as-object>
</urth-viz-table>
</template>
This works fine, and I am able to create new tables and graphs and link them to the behaviour of the previous table. What I have not been able to do is change any of the styling of the table, an specific example would be greatly appreciated.
I am using
python 3.6
jupyter 4.2.1
jupyter-dashboards 0.6.1
jupyter-declarativewidgets 0.7.0
Related
I'm creating an interactive notebook by using the library ipywidgets. I'm interested in SelectionRangeSlider widget. In documentation, we have a simple example :
import datetime
dates = [datetime.date(2015, i, 1) for i in range(1, 13)]
options = [(i.strftime('%b'), i) for i in dates]
widgets.SelectionRangeSlider(
options=options,
index=(0, 11),
description='Months (2015)',
disabled=False
)
That creates folowing slider :
I would like to change the position of the current values selected, putting it at the bottom, like that:
I've read documentation but I couldn't find a way to do this. Anyone knows if it's even possible to change this position? Thanks a lot.
Others have done things like this by setting readout=False and then making a separate widget to display the updated values. See these examples:
workaround offered by marcusreaiche for SelectionRangeSlider
TheIdealis' answer to 'Custom formatting for ipywidgets IntSlider'
I have seen streamlit display scrolling text windows. In particular, they get displayed for dataframes.
Is there a way to somehow write incrementally to a, for example scrolling info, warning and error text window with the same color codes as the info, warning and error text lines written to the screen with streamlit.info("foo"), streamlit.warning("bar"), && streamlit.error("foobar")?
Not sure exactly what you mean by a scrolling text window, but using the st.empty(), you can continuously write over the same object, which gives the effect of what I think you're asking for:
import streamlit as st
import time
c = st.empty()
for i in range(1, 30):
time.sleep(0.5) #just here so you can see the change
c.text(i)
This example can be extended to anything where you can consistently append/pop data off a list, indexing, etc.
Edit: note that what I'm referring to as c here ends up being the generic Streamlit class that contains most/all of the widgets. So text could be swapped out for dataframe, metric and any number of other Streamlit widgets.
I would like to view an image interactively in F# jupyter notebook similarly to how I can do this in python:
from PIL import Image
Image.open("image.png")
and that shows an image.
Is there a straightforward way to do this?
EmguCV, OpenCVSharp and ImageSharp all don't work together with the plotting libraries like Plotly.NET or XPlot to provide this functionality so I can't get something like matplotlib's pyplot.imshow.
In a notebook, you can display an image like this:
#!fsharp
// Load iamge
let data = File.ReadAllBytes("E:\\Downloads\\myImage.png");
// Convert so we can display it as HTML
let b64 = Convert.ToBase64String(data);
HTML($"<img src=\"data:image/png;base64,{b64}\"></img>") // last call without ; gets displayed
// Alt, this one has a semicolon:
// display(HTML($"<img src=\"data:image/png;base64,{b64}\"></img>"));
I want to be able to take the normal output for an object and insert it into custom HTML components. Specifically, I want to allow things like putting several charts into an accordion UI element, or having hidden dataframes that are shown when a button is clicked. Is there a way to get the HTML that would normally be output, wrap it in my own HTML components, and then output that?
I have tried:
import IPython.display as dp
dp.display(dp.HTML('<div id="mycontainer">')) # Just a simple div,
# but ideally would be e.g. bootstrap component
dp.display(my_obj) # my_obj here could be a (potentially styled) dataframe
# or a plot from matplotlib/altair/etc.
dp.display(dp.HTML('</div>'))
However, the unclosed <div> just gets automatically closed, so my_obj doesn't get inserted into it. Some objects have _repr_html_(), but not all do (particularly charts). Still, Jupyter obviously has some way of extracting HTML from arbitrary objects.
It seems from trying to read the source that nbconvert is used to change the object to HTML, but I'm not sure if A) I'm understanding that right or B) how to get HTML from an arbitrary object that is not in a notebook node object (or how to construct such an object myself).
this seams to work for me :
from IPython.core.display import display, HTML
myString = 'Hello, world!'
prependHtmlTag = '<h1>'
appendHtmlTag = '</h1>'
display(HTML(prependHtmlTag + myString + appendHtmlTag )
just put any html formated string in the display(HTML([yourString]))
I'm working in Jupyter notebook 5.7.4 bokeh 1.0.4, Firefox 63.0.3 python3.7, I want to get autocompletion using bokeh to get some interactive visualization.
from bokeh.models.widgets import AutocompleteInput
from IPython.display import HTML
input_widget = AutocompleteInput(completions=cList1, title='FTTH Keys', value='value')
l = layout([[input_widget],], sizing_mode='fixed')
curdoc().add_root(l)
curdoc().title = 'UI Test'
show(l)
when I write characters all is fine, but when I want to choose one element from the autocomplete list the word didn't complete in the input box.