I have a program that uses variables as part of calculations that are applied to dataframes to create a forecast. I'm now trying to display the results in a Dash dashboard and I want users to be able to change the values of the variables using sliders in the dashboard. The chart and slider are showing as I want them to but when I move the slider up and down it doesn't make any change to the chart so I think it's the function definition I'm struggling with.
app = JupyterDash('EmissionIntensity')
app.layout = html.Div(children=[dcc.Graph(id='NB_lineFig',figure=NB_lineFig),dcc.Slider(id='value_slider',min=(elec_COP/2),max=(elec_COP*2),value=elec_COP,step=0.4,vertical=False)])
#app.callback(Output(component_id='NB_lineFig',component_property='figure'),Input(component_id='value_slider',component_property='value'))
def useSlider(elec_COP_slider):
NB_AbsCO2TonnesCopy = NB_AbsCO2Tonnes.copy(deep=True)
elec_COP_slider = NB_AbsCO2TonnesCopy * elec_COP_slider
return elec_COP_slider
Related
I have the problem that when I concatenate two csv and create a column "Version" with string values, plotly does NOT generate the classification of each of the values, in this case 1 and 2. However, when this variable is numeric, it does generate a continuous classification (I need a discrete classification).
Image shows concatenation and data type
Two legends are observed, but only one color is observed
This is an example of how it doesn't work. However, if I change the variable to continuous, it does work.
I am generating this block to generate graphs for each type of group. Which should be my final result.
grouped = df_final.groupby('Name')
plots = []
for name, group in grouped:
# create a new figure for the group
fig = px.scatter(group.reset_index(), x="Time", y="Observed", opacity=1, width=800, height=600,
color = "Version)
fig.show()
This block generates the chart with its legend, but does not show the colors in the chart.
I am starting with python and plotly, any help would be appreciated.
I'm trying to understand why plotly doesn't sort my string variables
My DataFrame looks similar to this:
name
reached points
Jose Laderman
13
William Kane
13
I am currently displaying the aggregated count of students reached points of an assignment on an Altair bar chart within Streamlit like this:
brush = alt.selection(type='interval', encodings=['x'])
interactive_test = alt.Chart(df_display_all).mark_bar(opacity=1, width=5).encode(
x= alt.X('reached points', scale=alt.Scale(domain=[0, maxPoints])),
y=alt.Y('count()', type='quantitative', axis=alt.Axis(tickMinStep=1), title='student count'),
).properties(width=1200)
upper = interactive_test.encode(
alt.X('reached points', sort=alt.EncodingSortField(op='count', order='ascending'), scale=alt.Scale(domain=brush, domainMin=-0.5))
)
lower = interactive_test.properties(
height=60
).add_selection(brush)
concat_distribution_interactive = alt.vconcat(upper, lower)
Which produces this output and everything looks fine
The information I want my tooltip to show is a list of students that reached the specific amounts of reached points I'm hovering over. When adding something like:
tooltip='name'
the way my bar chart seems to display values has now been altered to this
When adding something like
tooltip='reached points'
The data seems to be displayed normally but without a tooltip that gives me the necessary information. Is it possible to display tooltip data that isn't used in my x or y axis but still part of the DataFrame I'm putting into the chart?
I tried to project altair chart using streamlit. My requirement is to project two charts in such a way that if i select few points in the above chart with scattered points i should see the distribution of a variable('notes') in the below chart. For that i have written the below code where i am using vconcat in the function. But, The chart never shows up when i use vconcat. But, It works fine when i try to project single chart.
def altair_graph(embd_1):
selected = alt.selection_single(on="click", empty="none")
brush = alt.selection(type='interval')
dom = ['Other IDs', 'Slected ID','Sel Dims']
rng_clr = ['lightgrey', 'red','blue']
color_point=alt.Color('color', scale=alt.Scale(domain=dom, range=rng_clr))
color = alt.condition(selected, alt.value('red'), color_point,legend=None)
chart = alt.Chart(embd_1).mark_circle(size=30).encode(
x = 'dimention1:Q',
y = 'dimention2:Q',
tooltip=['ID','notes'] ,
color=color
).properties(width=600,height=600).add_selection(brush).add_selection(selected).interactive()
bars = alt.Chart(embd_1).mark_bar().encode(
y='notes:N',
color='notes:N',
x='count(notes):Q'
).transform_filter(brush).interactive()
#final_chart = ((chart & bars))
final_chart = alt.vconcat(chart,bars)
return final_chart
selected=altair_component(altair_chart=altair_graph(embd_1))
From your snippet I assume that you are using the altair-part of the streamlit-vega-lite custom component. Currently it seems like it is not possible to use the streamlit-vega-lite component to retrieve selections from compound charts.
That said, it is not entirely clear to me, why the chart is not showing at all. And without a minimal reproducible example, we can't test. I had a similar case lately, where it worked to plot the charts both, separately, as well as together as a compound. Also the selections work as such, however, values are not reflected back in the event dict that gets returned from the altair_component
I have a list of pictures:
pictures = {im1,im2,im3,im4,im5,im6}
Where
im1:
im2:
im3:
im4:
im5:
im6:
I want to assign the pictures to labels (1,2,3,4 etc.)
For instance, here pictures 1 to 3 belong to label 1, picture 4 belongs to label 2, picture 5 to label 3, and picture 6 to label 4.
-> label = {1,1,1,2,3,4}
Since I need to see the images when I label them, I need a method to do that while labeling them. I was thinking of creating an array of images:
And then I define the ranges by clicking on the first and last picture belonging to the same labels, so for example:
What do you think ? Is this somehow possible ?
I would like to assign different labels to different ranges of pictures.
For instance: When one has finished selecting the first label one could indicate it by a Double-click and then do the selection of the second label range, then Double-click, then do the selection of the third label range, then Double-click, then do the selection of the fourth label range, etc.
It does not have to be Double-clicking to change the selection of the labels, it could also just be a buttom or any other idea that you might have.
In the end one should have the list of labels.
Essentially, most of the interaction you are looking for boils down to being able to display images, and detect clicks on them in real time. As that is the case, you can use the jupyter widgets (aka ipywidgets) module to achieve most (if not all) of what you are looking for.
Take a look at the button widget which is described here with explanation on how to register to its click event. The problem - we can't display an image on a button, and I didn't find any way to do this within the ipywidgets documentation. There is an image widget, but it does not provide an on_click event. So construct a custom layout, with a button underneath each image:
COLS = 4
ROWS = 2
IMAGES = ...
IMG_WIDTH = 200
IMG_HEIGHT = 200
def on_click(index):
print('Image %d clicked' % index)
import ipywidgets as widgets
import functools
rows = []
for row in range(ROWS):
cols = []
for col in range(COLS):
index = row * COLS + col
image = widgets.Image(
value=IMAGES[index], width=IMG_WIDTH, height=IMG_HEIGHT
)
button = widgets.Button(description='Image %d' % index)
# Bind the click event to the on_click function, with our index as argument
button.on_click(functools.partial(on_click, index))
# Create a vertical layout box, image above the button
box = widgets.VBox([image, button])
cols.append(box)
# Create a horizontal layout box, grouping all the columns together
rows.append(widgets.HBox(cols))
# Create a vertical layout box, grouping all the rows together
result = widgets.VBox(rows)
You can technically also write a custom widget to display an image and listen for a click, but I simply don't believe it's worth your time and effort.
Good luck!
The qsl package provides widgets that do this. For your case, the following code would allow you to label images in batches. Full disclosure, qsl is a project I started because I, like you, wanted to label images from inside Jupyter notebooks.
import qsl
from IPython.display import display
labeler = qsl.MediaLabeler(
items=[
{"target": "https://i.stack.imgur.com/cML6z.jpg"},
{"target": "https://i.stack.imgur.com/6EVAP.jpg"},
{"target": "https://i.stack.imgur.com/CAxUw.jpg"},
{"target": "https://i.stack.imgur.com/8fhan.jpg"},
{"target": "https://i.stack.imgur.com/eMXn5.jpg"},
{"target": "https://i.stack.imgur.com/YFBfM.jpg"}
],
# Optional, you can also configure the labeler from
# the UI.
config={
"image": [
{
"name": "Type",
"options": [
{"name": "Foo"},
{"name": "Bar"}
]
}
]
},
# Optional, set to 1 if you want to label
# one image at a time.
batch_size=4,
# Optionally, save labels to JSON. You
# can also get the labels using `labeler.items`.
jsonpath="labels.json"
)
display(labeler)
This generates a UI that looks like this.
Here is a Google Colab notebook that shows how to do this in Google Colab.
I would like to add points dynamically to a series in spark - highcharts, precisely using Zeppelin.
I am using:
https://github.com/knockdata/spark-highcharts
Does anybody know how to handle a chart after creating it?
Example:
import com.knockdata.spark.highcharts._
import com.knockdata.spark.highcharts.model._
var myChart = highcharts(
bank
.seriesCol("cluster")
.series("x" -> "x", "y" -> "y"))
.subtitle(Subtitle("Example"))
.title(new Title("EXAMPLE"))
.xAxis(XAxis("X"))
.yAxis(YAxis("Y"))
.chart(Chart.scatter)
myChart.plot()
For normal DataFrame, the chart data is created on the time when call highcharts function. The data series is created from DataFrame according the definition you put inside the highcharts function. It can not add data points manually.
While you can use following options to make the chart more suit for your need.
Add bands to xAxis or yAxis
Add line to xAxis or yAxis. It's quite similar to plotBands
Add data labels
Add tooltips