How to link two bar charts in altair?












0














I'm having trouble with a fairly simple interaction because I don't understand the language of altair very much.



Say I have a dataframe containing the state, county and population.



I want to create one bar chart showing states and their populations and another showing counties and their populations.



Clicking on a state populates the next bar chart with county names, and their populations. Clicking away from any state in the first chart empties out the county chart again.



Simple master/detail or context/focus pair of charts.



Additonally, I'm not clear how to debug this either. Is there a way to print the selected state to the console?



Here is some data I pulled from wikipedia (unable to share actual work data):

State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947



When I click on the bar representing California in the first chart, the second chart should populate with Los Angeles, San Diego, Orange, Riverside and San Bernadino. When I click on New York in the first chart, the second chart should populate with Kings and Queens.










share|improve this question
























  • Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
    – FlorianGD
    Nov 21 at 12:04










  • @FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
    – Shahbaz
    Nov 21 at 15:36
















0














I'm having trouble with a fairly simple interaction because I don't understand the language of altair very much.



Say I have a dataframe containing the state, county and population.



I want to create one bar chart showing states and their populations and another showing counties and their populations.



Clicking on a state populates the next bar chart with county names, and their populations. Clicking away from any state in the first chart empties out the county chart again.



Simple master/detail or context/focus pair of charts.



Additonally, I'm not clear how to debug this either. Is there a way to print the selected state to the console?



Here is some data I pulled from wikipedia (unable to share actual work data):

State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947



When I click on the bar representing California in the first chart, the second chart should populate with Los Angeles, San Diego, Orange, Riverside and San Bernadino. When I click on New York in the first chart, the second chart should populate with Kings and Queens.










share|improve this question
























  • Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
    – FlorianGD
    Nov 21 at 12:04










  • @FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
    – Shahbaz
    Nov 21 at 15:36














0












0








0







I'm having trouble with a fairly simple interaction because I don't understand the language of altair very much.



Say I have a dataframe containing the state, county and population.



I want to create one bar chart showing states and their populations and another showing counties and their populations.



Clicking on a state populates the next bar chart with county names, and their populations. Clicking away from any state in the first chart empties out the county chart again.



Simple master/detail or context/focus pair of charts.



Additonally, I'm not clear how to debug this either. Is there a way to print the selected state to the console?



Here is some data I pulled from wikipedia (unable to share actual work data):

State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947



When I click on the bar representing California in the first chart, the second chart should populate with Los Angeles, San Diego, Orange, Riverside and San Bernadino. When I click on New York in the first chart, the second chart should populate with Kings and Queens.










share|improve this question















I'm having trouble with a fairly simple interaction because I don't understand the language of altair very much.



Say I have a dataframe containing the state, county and population.



I want to create one bar chart showing states and their populations and another showing counties and their populations.



Clicking on a state populates the next bar chart with county names, and their populations. Clicking away from any state in the first chart empties out the county chart again.



Simple master/detail or context/focus pair of charts.



Additonally, I'm not clear how to debug this either. Is there a way to print the selected state to the console?



Here is some data I pulled from wikipedia (unable to share actual work data):

State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947



When I click on the bar representing California in the first chart, the second chart should populate with Los Angeles, San Diego, Orange, Riverside and San Bernadino. When I click on New York in the first chart, the second chart should populate with Kings and Queens.







vega altair






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 15:35

























asked Nov 21 at 3:24









Shahbaz

4,320144167




4,320144167












  • Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
    – FlorianGD
    Nov 21 at 12:04










  • @FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
    – Shahbaz
    Nov 21 at 15:36


















  • Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
    – FlorianGD
    Nov 21 at 12:04










  • @FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
    – Shahbaz
    Nov 21 at 15:36
















Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
– FlorianGD
Nov 21 at 12:04




Hello, could you share some data? Here is a link that could be useful altair-viz.github.io/gallery/…
– FlorianGD
Nov 21 at 12:04












@FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
– Shahbaz
Nov 21 at 15:36




@FlorianGD added some test data. I saw the various interval selection examples but am not able to adapt them to code where a single click of a bar in Chart 1 changes chart 2.
– Shahbaz
Nov 21 at 15:36












1 Answer
1






active

oldest

votes


















1














This does what you want I believe. The idea is to create a selection on a chart, and use this to filter the second one.





import altair as alt
import pandas as pd
from io import StringIO

states_str = """State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947
"""

states_df = pd.read_csv(StringIO(states_str))

state_selector = alt.selection_multi(fields=['State'])

chart_states = alt.Chart(states_df).mark_bar().encode(
x=alt.X('State:N'),
y=alt.Y('count():Q')
).add_selection(state_selector)

chart_county = alt.Chart(states_df).mark_bar().encode(
x=alt.X('County:N'),
y=alt.Y('count():Q')
).transform_filter(state_selector)

chart_states | chart_county


Chart when nothing is selected



enter image description here



Chart after clicking on California on the first chart.
enter image description here



Created on 2018-11-21 by the reprexpy package






share|improve this answer





















  • I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
    – Shahbaz
    Nov 22 at 2:01











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404826%2fhow-to-link-two-bar-charts-in-altair%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














This does what you want I believe. The idea is to create a selection on a chart, and use this to filter the second one.





import altair as alt
import pandas as pd
from io import StringIO

states_str = """State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947
"""

states_df = pd.read_csv(StringIO(states_str))

state_selector = alt.selection_multi(fields=['State'])

chart_states = alt.Chart(states_df).mark_bar().encode(
x=alt.X('State:N'),
y=alt.Y('count():Q')
).add_selection(state_selector)

chart_county = alt.Chart(states_df).mark_bar().encode(
x=alt.X('County:N'),
y=alt.Y('count():Q')
).transform_filter(state_selector)

chart_states | chart_county


Chart when nothing is selected



enter image description here



Chart after clicking on California on the first chart.
enter image description here



Created on 2018-11-21 by the reprexpy package






share|improve this answer





















  • I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
    – Shahbaz
    Nov 22 at 2:01
















1














This does what you want I believe. The idea is to create a selection on a chart, and use this to filter the second one.





import altair as alt
import pandas as pd
from io import StringIO

states_str = """State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947
"""

states_df = pd.read_csv(StringIO(states_str))

state_selector = alt.selection_multi(fields=['State'])

chart_states = alt.Chart(states_df).mark_bar().encode(
x=alt.X('State:N'),
y=alt.Y('count():Q')
).add_selection(state_selector)

chart_county = alt.Chart(states_df).mark_bar().encode(
x=alt.X('County:N'),
y=alt.Y('count():Q')
).transform_filter(state_selector)

chart_states | chart_county


Chart when nothing is selected



enter image description here



Chart after clicking on California on the first chart.
enter image description here



Created on 2018-11-21 by the reprexpy package






share|improve this answer





















  • I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
    – Shahbaz
    Nov 22 at 2:01














1












1








1






This does what you want I believe. The idea is to create a selection on a chart, and use this to filter the second one.





import altair as alt
import pandas as pd
from io import StringIO

states_str = """State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947
"""

states_df = pd.read_csv(StringIO(states_str))

state_selector = alt.selection_multi(fields=['State'])

chart_states = alt.Chart(states_df).mark_bar().encode(
x=alt.X('State:N'),
y=alt.Y('count():Q')
).add_selection(state_selector)

chart_county = alt.Chart(states_df).mark_bar().encode(
x=alt.X('County:N'),
y=alt.Y('count():Q')
).transform_filter(state_selector)

chart_states | chart_county


Chart when nothing is selected



enter image description here



Chart after clicking on California on the first chart.
enter image description here



Created on 2018-11-21 by the reprexpy package






share|improve this answer












This does what you want I believe. The idea is to create a selection on a chart, and use this to filter the second one.





import altair as alt
import pandas as pd
from io import StringIO

states_str = """State,County,Land Area
California,Los Angeles, 10510
Illinois,Cook, 2448
Texas,Harris, 4412
Arizona,Maricopa, 23828
California,San Diego, 10895
California,Orange, 2048
Florida,Miami-Dade, 4915
New York,Kings, 183
Texas,Dallas, 2257
New York,Queens, 281
California,Riverside, 18665
California,San Bernardino, 51947
"""

states_df = pd.read_csv(StringIO(states_str))

state_selector = alt.selection_multi(fields=['State'])

chart_states = alt.Chart(states_df).mark_bar().encode(
x=alt.X('State:N'),
y=alt.Y('count():Q')
).add_selection(state_selector)

chart_county = alt.Chart(states_df).mark_bar().encode(
x=alt.X('County:N'),
y=alt.Y('count():Q')
).transform_filter(state_selector)

chart_states | chart_county


Chart when nothing is selected



enter image description here



Chart after clicking on California on the first chart.
enter image description here



Created on 2018-11-21 by the reprexpy package







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 at 21:29









FlorianGD

999219




999219












  • I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
    – Shahbaz
    Nov 22 at 2:01


















  • I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
    – Shahbaz
    Nov 22 at 2:01
















I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
– Shahbaz
Nov 22 at 2:01




I hadn't thought of using selection_multi (instead of selection_single). I ended up building multi-level charts (think state, county, city). What an awesome tool and thanks for your hep.
– Shahbaz
Nov 22 at 2:01


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404826%2fhow-to-link-two-bar-charts-in-altair%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

404 Error Contact Form 7 ajax form submitting

How to know if a Active Directory user can login interactively

TypeError: fit_transform() missing 1 required positional argument: 'X'