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
Related
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 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
Just like we can highlight point(s) in one of the charts of a concatenated chart or a faceted chart and the corresponding point(s) will also get highlighted in the other chart, I was wondering if the same can be done with a tooltip.
I have been able to come up with a demo using mark_text as you can see below. But the biggest challenge is not being able to show multiple encodings as text. Tooltips make that really easy by just mentioning all the encodings in a list. So I was thinking if there is a way to do that in Altair.
Or is this not the expected behavior of Tooltips, and they are ONLY supposed to highlight the point over which the mouse is hovering even if other charts may have a common selection?
Whatever I have tried with Tooltips only works in a single chart, the other point despite being highlighted does not also show a tooltip.
Code:
import altair as alt
from vega_datasets import data
source = data.cars()
highlight = alt.selection(type='single', on="mouseover", empty='none')
base = alt.Chart(source).encode(
y='Miles_per_Gallon',
color=alt.condition(highlight, 'Origin', alt.ColorValue('gray')),
)
mpg = base.mark_point().encode(
x='Horsepower',
size=alt.condition(highlight, alt.value(150), alt.value(50))).add_selection(
highlight
)
acc = base.mark_point().encode(
x='Acceleration',
size=alt.condition(highlight, alt.value(150), alt.value(50))).add_selection(
highlight
)
text_mpg = base.mark_text(dx=5, dy=-10, size=15).encode(
x='Horsepower',
y='Miles_per_Gallon',
text=alt.condition(highlight, 'Horsepower:Q', alt.value('')),
)
text_acc = base.mark_text(dx=5, dy=-10, size=15).encode(
x='Acceleration',
y='Miles_per_Gallon',
text=alt.condition(highlight, 'Acceleration:Q', alt.value('')),
)
(mpg+text_mpg)|(acc+text_acc)
Demo:
Expected Output:
Show tooltips instead of text, with multiple encodings
I am however starting to feel that this is not the intended behavior of tooltip.
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
I found this solution.
If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?
Thanks
Sorry for my bad English.
Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:
$("#highligher").click(function () {
var e = jQuery.Event('click');
e.pageX = 250; //add a made up x/y coordinate to the click event
e.pageY = 250;
$('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});
Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/
The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.
Just got this working by altering a few things...
I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.
Then, after these two lines in jquery.flot.pie.js...
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
I added...
plot.highlight = pieHighlight;
plot.unhighlight = pieUnhighlight;
We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.
var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});
The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.
NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:
var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';