From 0002440577055df237f0a31a10af2480c5f42d38 Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Thu, 16 Aug 2018 18:02:40 -0400 Subject: [PATCH 01/11] First pass at Adjusting page for bindings. Having issues with RST header sizing. --- doc/index.rst | 2 +- .../{selections.rst => interactions.rst} | 119 +++++++++++++++++- 2 files changed, 114 insertions(+), 7 deletions(-) rename doc/user_guide/{selections.rst => interactions.rst} (60%) diff --git a/doc/index.rst b/doc/index.rst index d6953d452..abdb4032a 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -39,7 +39,7 @@ beautiful and effective visualizations with a minimal amount of code. user_guide/encoding user_guide/marks user_guide/transform - user_guide/selections + user_guide/interactions user_guide/configuration user_guide/compound_charts user_guide/saving_charts diff --git a/doc/user_guide/selections.rst b/doc/user_guide/interactions.rst similarity index 60% rename from doc/user_guide/selections.rst rename to doc/user_guide/interactions.rst index 564f18eb5..bc71e1205 100644 --- a/doc/user_guide/selections.rst +++ b/doc/user_guide/interactions.rst @@ -1,19 +1,31 @@ .. currentmodule:: altair -.. _user-guide-selections: +.. _user-guide-interactions: + +Interactions +------------ -Selections: Building Blocks of Interactions -------------------------------------------- One of the unique features of Altair, inherited from Vega-Lite, is a -declarative grammar of not just visualization, but *interaction*. The -core concept of this grammar is the *selection* object. +declarative grammar of not just visualization, but *interaction*. There are three +core concepts of this grammar: + +- the :class:`selection` object which captures interactions from the mouse or through other inputs to effect the chart. Inputs can either be events like moust clicks or drags. Inputs can also be elemnts like a drop-down, radio button or slider. Selections can be used alone but if you want to have change any element of your chart you will need to connect them to a *condition*. +- the :class:`condition` function takes the selection input and changes an element of the chart based on that input. +- the :class:`bind` property of a selection which establishes a two-way binding between the selection and an input element of your chart. + +Interactive charts can use one or more of these elements to create rich interactivity between the viewer and the data. + + +Selections: Building Blocks of Interactions +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + Selections in Altair come in a few flavors, and they can be *bound* to particular charts or sub-charts in your visualization, then referenced in other parts of the visualization. Example: Linked-Brush Scatter-Plot -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ As a motivation, let's create a simple chart and then add some selections to it. Here is a simple scatter-plot created from the ``cars`` dataset: @@ -55,6 +67,9 @@ property: The result above is a chart that allows you to click and drag to create a selection region, and to move this region once the region is created. +Conditions: Making the chart respond +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + This is neat, but the selection doesn't actually *do* anything yet. To use this selection, we need to reference it in some way within the chart. Here, we will use the :func:`condition` function to create @@ -236,6 +251,98 @@ over them with your mouse: multi_mouseover = alt.selection_multi(on='mouseover', toggle=False, empty='none') make_example(multi_mouseover) +Binding: Adding Data Driven Inputs +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +With an understanding of the selection types and conditions, you can now add data-driven input elements to the charts using the :class:`bind`. As specified by `Vega-lite binding `_, selections can be bound two-ways: + +1. Single selections can be bound directly to an input elements. *For example, a radio button.* +2. Interval selections which can be bound to scale. *for example, zooming in on a map.* + +Input Element Binding +^^^^^^^^^^^^^^^^^^^^^ +With single selections, an input element can be added to the chart to establish a binding between the input and the selection. + +For instance, using our example from above a dropdown can be used to highlight cars from a specific :origin: : + +.. altair-plot:: + input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) + selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') + color = alt.condition(selection, + alt.Color('Origin:N', legend=None), + alt.value('lightgray')) + + scatter = alt.Chart(cars).mark_point().encode( + x='Horsepower:Q', + y='Miles_per_Gallon:Q', + color=color, + tooltip='Name:N' + ).add_selection( + selection + ) + + + scatter + +The above example shows all three elements at work. The :input_dropdown: is :bind: to the :selection: which is called from the :condition: encoded through the data. + +The following are the input elements supported in vega-lite: + + +========================= =========================================================================== =============================================== +Input Element Description Example +========================= =========================================================================== =============================================== +:class:`binding_checkbox` Renders as checkboxes allowing for multiple selections of items. N/A +:class:`binding_radio` Radio buttons that force only a single selection N/A +:class:`binding_select` Drop down box for selecting a single item from a list N/A +:class:`binding_range` Shown as a slider to allow for selection along a scale. :ref:`gallery_us_population_over_time` +========================= =========================================================================== =============================================== + + +Bindings and input elements can also be used to filter data on the client side. Reducing noise in the chart and allowing the user to see just certain selected elements: + +.. altair-plot:: + input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) + selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') + color = alt.condition(selection, + alt.Color('Origin:N', legend=None), + alt.value('lightgray')) + + scatter = alt.Chart(cars).mark_point().encode( + x='Horsepower:Q', + y='Miles_per_Gallon:Q', + color='Origin:N', + tooltip='Name:N' + ).add_selection( + selection + ).transform_filter( + selection + ) + + + scatter + +Scale Binding +^^^^^^^^^^^^^ +With interval selections, the bind property can be set to the value of :"scales":. In these cases, the binding will automatically respond to the panning and zooming along the chart: + +.. altair-plot:: + selection = alt.selection_interval(bind="scales") + color = alt.condition(selection, + alt.Color('Origin:N', legend=None), + alt.value('lightgray')) + + scatter = alt.Chart(cars).mark_point().encode( + x='Horsepower:Q', + y='Miles_per_Gallon:Q', + color='Origin:N', + tooltip='Name:N' + ).add_selection( + selection + ) + scatter + + + Further Examples ~~~~~~~~~~~~~~~~ Now that you understand the basics of Altair selections, you might wish to look From 07484d7cbdd1204e7bc4ef58650b60472a50c8cf Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Thu, 23 Aug 2018 16:18:13 -0400 Subject: [PATCH 02/11] minor updates --- doc/user_guide/interactions.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/user_guide/interactions.rst b/doc/user_guide/interactions.rst index bc71e1205..093b1763a 100644 --- a/doc/user_guide/interactions.rst +++ b/doc/user_guide/interactions.rst @@ -3,7 +3,7 @@ .. _user-guide-interactions: Interactions ------------- +============ One of the unique features of Altair, inherited from Vega-Lite, is a declarative grammar of not just visualization, but *interaction*. There are three @@ -345,7 +345,7 @@ With interval selections, the bind property can be set to the value of :"scales" Further Examples ~~~~~~~~~~~~~~~~ -Now that you understand the basics of Altair selections, you might wish to look +Now that you understand the basics of Altair selections and bindings, you might wish to look through the :ref:`gallery-category-Interactive Charts` section of the example gallery for ideas about how they can be applied to more interesting charts. From c38551d5b1440e6d950c873c96c29f9e86854faf Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Thu, 23 Aug 2018 21:13:16 -0400 Subject: [PATCH 03/11] Adding commit of multiple interactions --- .../v2/examples/multiple_interactions.py | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 altair/vegalite/v2/examples/multiple_interactions.py diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py new file mode 100644 index 000000000..b35d0b3fe --- /dev/null +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -0,0 +1,62 @@ +""" +Multiple Interations +================== +This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows: + +* Dropdown: Allows the user to highlight cars from a particular country +* Slider: Filters the display so that only cars from a certain year of manufacture are shown +* Checkbox: toggles whether to size the points by the cars weight or not +* Mouse Drag and Scroll: Zooms the x and y scales to allow for panning. + + +""" +# category: interactive charts +import altair as alt +from vega_datasets import data + + +cars = data.cars.url + +input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) +dropdown_selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') +color = alt.condition(selection, + alt.Color('Origin:N', legend=None), + alt.value('lightgray')) + +scales_selection = alt.selection_interval(bind="scales") + +year_slider = alt.binding_range(min=1969, max=1981, step=1) +slider_selection = alt.selection_single(bind=year_slider, fields=['Year'], name="Manufacture_") + +input_checkbox = alt.binding_checkbox() +checkbox_selection = alt.selection_single( bind=input_checkbox, name="Highlight Heavy Vehicles") + +size = alt.condition(checkbox_selection, + alt.SizeValue(40), + alt.Size('Weight_in_lbs:Q', bin=True, legend=None) + ) + +scatter = alt.Chart(cars).mark_point(filled=True + ).transform_calculate( + Year="year(datum.Year)").transform_calculate( + Heavy=alt.expr.inrange("dataum.Weight_in_lbs", 4000,10000) +).encode( + x='Horsepower:Q', + y='Miles_per_Gallon:Q', + color=color, + tooltip='Name:N', + size=size +).add_selection( + selection +).add_selection( + scales_selection +).add_selection( + slider_selection +).add_selection( + checkbox_selection +).transform_filter( + slider_selection +) + + +scatter \ No newline at end of file From e0bf3cc5bc11b1b72a45f4f1d3dd2e71121ddf0f Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Thu, 23 Aug 2018 22:12:37 -0400 Subject: [PATCH 04/11] Adding movie based multiple interactions example --- .../v2/examples/multiple_interactions.py | 69 +++++++++---------- 1 file changed, 32 insertions(+), 37 deletions(-) diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py index b35d0b3fe..3d9578ba4 100644 --- a/altair/vegalite/v2/examples/multiple_interactions.py +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -3,60 +3,55 @@ ================== This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows: -* Dropdown: Allows the user to highlight cars from a particular country -* Slider: Filters the display so that only cars from a certain year of manufacture are shown -* Checkbox: toggles whether to size the points by the cars weight or not +* Dropdown: Filters the movies by genre +* Radio Buttons: Highlights certain films by Worldwide Gross * Mouse Drag and Scroll: Zooms the x and y scales to allow for panning. + """ # category: interactive charts + import altair as alt from vega_datasets import data -cars = data.cars.url +movies = data.movies.url -input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) -dropdown_selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') -color = alt.condition(selection, - alt.Color('Origin:N', legend=None), - alt.value('lightgray')) +ratings = ['G', 'NC-17', 'PG', 'PG-13', 'R'] +genres = ['Action', 'Adventure', 'Black Comedy', 'Comedy', + 'Concert/Performance', 'Documentary', 'Drama', 'Horror', 'Musical', + 'Romantic Comedy', 'Thriller/Suspense', 'Western'] -scales_selection = alt.selection_interval(bind="scales") -year_slider = alt.binding_range(min=1969, max=1981, step=1) -slider_selection = alt.selection_single(bind=year_slider, fields=['Year'], name="Manufacture_") -input_checkbox = alt.binding_checkbox() -checkbox_selection = alt.selection_single( bind=input_checkbox, name="Highlight Heavy Vehicles") +rating_radio = alt.binding_radio(options=ratings) -size = alt.condition(checkbox_selection, - alt.SizeValue(40), - alt.Size('Weight_in_lbs:Q', bin=True, legend=None) - ) -scatter = alt.Chart(cars).mark_point(filled=True - ).transform_calculate( - Year="year(datum.Year)").transform_calculate( - Heavy=alt.expr.inrange("dataum.Weight_in_lbs", 4000,10000) -).encode( - x='Horsepower:Q', - y='Miles_per_Gallon:Q', - color=color, - tooltip='Name:N', - size=size -).add_selection( - selection -).add_selection( - scales_selection +rating_select = alt.selection_single(fields=['MPAA_Rating'], bind=rating_radio) +rating_color_condition = alt.condition(rating_select, + alt.Color('MPAA_Rating:N', legend=None), + alt.value('lightgray')) + +genre_dropdown = alt.binding_select(options=genres) +genre_select = alt.selection_single(fields=['Major_Genre'], bind=genre_dropdown) + + +alt.Chart(movies).mark_point().transform_calculate( + Rounded_IMDB_Rating = "floor(datum.IMDB_Rating)" +).transform_filter( + alt.datum.IMDB_Rating > 0 +).transform_filter( + alt.FieldOneOfPredicate(field='MPAA_Rating', oneOf=ratings)).encode( +x=alt.X('Worldwide_Gross:Q'), +y='IMDB_Rating:Q', +color=rating_color_condition + ).add_selection( - slider_selection + rating_select ).add_selection( - checkbox_selection + genre_select ).transform_filter( - slider_selection + genre_select ) - -scatter \ No newline at end of file From bb3f188876cde99b948d3da8055cc7f556f05fc8 Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Fri, 24 Aug 2018 18:13:50 -0400 Subject: [PATCH 05/11] Updating the interations example while also fixing references in the user guide --- .../v2/examples/multiple_interactions.py | 91 ++++++++++++++----- doc/user_guide/interactions.rst | 27 +++--- 2 files changed, 80 insertions(+), 38 deletions(-) diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py index 3d9578ba4..1fa80a6b5 100644 --- a/altair/vegalite/v2/examples/multiple_interactions.py +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -1,6 +1,6 @@ """ Multiple Interations -================== +==================== This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows: * Dropdown: Filters the movies by genre @@ -11,47 +11,88 @@ """ # category: interactive charts - import altair as alt from vega_datasets import data - +import urllib, json +import pandas as pd movies = data.movies.url +raw = urllib.request.urlopen(movies) +movie_json = json.loads(raw.read()) + +movies_df = pd.DataFrame(movie_json) #Note need to download the data first to coerce the dates + +movies_df["Release_Date_dt"] = pd.to_datetime(movies_df.Release_Date, format="%d-%b-%y", errors='coerce') + ratings = ['G', 'NC-17', 'PG', 'PG-13', 'R'] + genres = ['Action', 'Adventure', 'Black Comedy', 'Comedy', 'Concert/Performance', 'Documentary', 'Drama', 'Horror', 'Musical', 'Romantic Comedy', 'Thriller/Suspense', 'Western'] +base = alt.Chart(movies_df, width=200, height=200).mark_point(filled=True).transform_calculate( + Rounded_IMDB_Rating = "floor(datum.IMDB_Rating)", + Hundred_Million_Production = "datum.Production_Budget > 100000000.0 ? 100 : 10", + Release_Year = "year(datum.Release_Date_dt)" +).transform_filter( + alt.datum.IMDB_Rating > 0 +).transform_filter( + alt.FieldOneOfPredicate(field='MPAA_Rating', oneOf=ratings) +).encode( + x=alt.X('Worldwide_Gross:Q', scale=alt.Scale(domain=(100000,10**10), clamp=True, type="log")), + y='IMDB_Rating:Q', + tooltip="Title:N" +) - -rating_radio = alt.binding_radio(options=ratings) +# A slider filter +year_slider = alt.binding_range(min=1969, max=2018, step=1) +slider_selection = alt.selection_single(bind=year_slider, fields=['Release_Year'], name="Release Year_") -rating_select = alt.selection_single(fields=['MPAA_Rating'], bind=rating_radio) -rating_color_condition = alt.condition(rating_select, - alt.Color('MPAA_Rating:N', legend=None), - alt.value('lightgray')) +filter_year = base.add_selection( + slider_selection +).transform_filter( + slider_selection +).properties(title="Slider Filtering") +# A dropdown filter genre_dropdown = alt.binding_select(options=genres) -genre_select = alt.selection_single(fields=['Major_Genre'], bind=genre_dropdown) - - -alt.Chart(movies).mark_point().transform_calculate( - Rounded_IMDB_Rating = "floor(datum.IMDB_Rating)" -).transform_filter( - alt.datum.IMDB_Rating > 0 -).transform_filter( - alt.FieldOneOfPredicate(field='MPAA_Rating', oneOf=ratings)).encode( -x=alt.X('Worldwide_Gross:Q'), -y='IMDB_Rating:Q', -color=rating_color_condition +genre_select = alt.selection_single(fields=['Major_Genre'], bind=genre_dropdown, name="Genre") -).add_selection( - rating_select -).add_selection( +filter_genres = base.add_selection( genre_select ).transform_filter( genre_select -) +).properties(title="Dropdown Filtering") +#color changing marks +rating_radio = alt.binding_radio(options=ratings) + +rating_select = alt.selection_single(fields=['MPAA_Rating'], bind=rating_radio, name="Rating") +rating_color_condition = alt.condition(rating_select, + alt.Color('MPAA_Rating:N', legend=None), + alt.value('lightgray')) + +highlight_ratings = base.add_selection( + rating_select +).encode( + color=rating_color_condition +).properties(title="Radio Button Highlighting") + +# Boolean selection for format changes +input_checkbox = alt.binding_checkbox() +checkbox_selection = alt.selection_single(bind=input_checkbox, name="Big Budget Films") + +size_checkbox_condition = alt.condition(checkbox_selection, + alt.SizeValue(25), + alt.Size('Hundred_Million_Production:Q') + ) + +budget_sizing = base.add_selection( + checkbox_selection +).encode( + size=size_checkbox_condition +).properties(title="Checkbox Formatting") + +( filter_year | filter_genres) & (highlight_ratings | budget_sizing ) \ No newline at end of file diff --git a/doc/user_guide/interactions.rst b/doc/user_guide/interactions.rst index bd8f36315..b1cf3d22a 100644 --- a/doc/user_guide/interactions.rst +++ b/doc/user_guide/interactions.rst @@ -9,9 +9,9 @@ One of the unique features of Altair, inherited from Vega-Lite, is a declarative grammar of not just visualization, but *interaction*. There are three core concepts of this grammar: -- the :class:`selection` object which captures interactions from the mouse or through other inputs to effect the chart. Inputs can either be events like moust clicks or drags. Inputs can also be elemnts like a drop-down, radio button or slider. Selections can be used alone but if you want to have change any element of your chart you will need to connect them to a *condition*. -- the :class:`condition` function takes the selection input and changes an element of the chart based on that input. -- the :class:`bind` property of a selection which establishes a two-way binding between the selection and an input element of your chart. +- the :func:`selection` object which captures interactions from the mouse or through other inputs to effect the chart. Inputs can either be events like moust clicks or drags. Inputs can also be elemnts like a drop-down, radio button or slider. Selections can be used alone but if you want to have change any element of your chart you will need to connect them to a *condition*. +- the :func:`condition` function takes the selection input and changes an element of the chart based on that input. +- the ``bind`` property of a selection which establishes a two-way binding between the selection and an input element of your chart. Interactive charts can use one or more of these elements to create rich interactivity between the viewer and the data. @@ -339,13 +339,14 @@ With single selections, an input element can be added to the chart to establish For instance, using our example from above a dropdown can be used to highlight cars from a specific :origin: : .. altair-plot:: + input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') color = alt.condition(selection, alt.Color('Origin:N', legend=None), alt.value('lightgray')) - scatter = alt.Chart(cars).mark_point().encode( + alt.Chart(cars).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color=color, @@ -355,7 +356,7 @@ For instance, using our example from above a dropdown can be used to highlight c ) - scatter + The above example shows all three elements at work. The :input_dropdown: is :bind: to the :selection: which is called from the :condition: encoded through the data. @@ -365,9 +366,9 @@ The following are the input elements supported in vega-lite: ========================= =========================================================================== =============================================== Input Element Description Example ========================= =========================================================================== =============================================== -:class:`binding_checkbox` Renders as checkboxes allowing for multiple selections of items. N/A -:class:`binding_radio` Radio buttons that force only a single selection N/A -:class:`binding_select` Drop down box for selecting a single item from a list N/A +:class:`binding_checkbox` Renders as checkboxes allowing for multiple selections of items. :ref:`multiple_interactions` +:class:`binding_radio` Radio buttons that force only a single selection :ref:`multiple_interactions` +:class:`binding_select` Drop down box for selecting a single item from a list :ref:`multiple_interactions` :class:`binding_range` Shown as a slider to allow for selection along a scale. :ref:`gallery_us_population_over_time` ========================= =========================================================================== =============================================== @@ -375,13 +376,14 @@ Input Element Description Bindings and input elements can also be used to filter data on the client side. Reducing noise in the chart and allowing the user to see just certain selected elements: .. altair-plot:: + input_dropdown = alt.binding_select(options=['Europe','Japan','USA']) selection = alt.selection_single(fields=['Origin'], bind=input_dropdown, name='Country of ') color = alt.condition(selection, alt.Color('Origin:N', legend=None), alt.value('lightgray')) - scatter = alt.Chart(cars).mark_point().encode( + alt.Chart(cars).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color='Origin:N', @@ -393,19 +395,18 @@ Bindings and input elements can also be used to filter data on the client side. ) - scatter - Scale Binding ^^^^^^^^^^^^^ With interval selections, the bind property can be set to the value of :"scales":. In these cases, the binding will automatically respond to the panning and zooming along the chart: .. altair-plot:: + selection = alt.selection_interval(bind="scales") color = alt.condition(selection, alt.Color('Origin:N', legend=None), alt.value('lightgray')) - scatter = alt.Chart(cars).mark_point().encode( + alt.Chart(cars).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color='Origin:N', @@ -413,7 +414,7 @@ With interval selections, the bind property can be set to the value of :"scales" ).add_selection( selection ) - scatter + From 68f9213547d1c65d7494024bc8cfc960d494c987 Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Fri, 24 Aug 2018 18:15:40 -0400 Subject: [PATCH 06/11] better scale config --- altair/vegalite/v2/examples/multiple_interactions.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py index 1fa80a6b5..24f6495d2 100644 --- a/altair/vegalite/v2/examples/multiple_interactions.py +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -40,7 +40,7 @@ ).transform_filter( alt.FieldOneOfPredicate(field='MPAA_Rating', oneOf=ratings) ).encode( - x=alt.X('Worldwide_Gross:Q', scale=alt.Scale(domain=(100000,10**10), clamp=True, type="log")), + x=alt.X('Worldwide_Gross:Q', scale=alt.Scale(domain=(100000,10**9), clamp=True)), y='IMDB_Rating:Q', tooltip="Title:N" ) From 259e6b88e8898e20f5ae882443135a2fd9d00196 Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Mon, 27 Aug 2018 20:34:23 -0400 Subject: [PATCH 07/11] Fixing and removing the html request with altair formatting. --- .../vegalite/v2/examples/multiple_interactions.py | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py index 24f6495d2..9f55c010f 100644 --- a/altair/vegalite/v2/examples/multiple_interactions.py +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -16,14 +16,7 @@ import urllib, json import pandas as pd -movies = data.movies.url - -raw = urllib.request.urlopen(movies) -movie_json = json.loads(raw.read()) - -movies_df = pd.DataFrame(movie_json) #Note need to download the data first to coerce the dates - -movies_df["Release_Date_dt"] = pd.to_datetime(movies_df.Release_Date, format="%d-%b-%y", errors='coerce') +movies = alt.UrlData(data.movies.url, format=alt.DataFormat(parse={"Release_Date":"date"})) ratings = ['G', 'NC-17', 'PG', 'PG-13', 'R'] @@ -31,10 +24,10 @@ 'Concert/Performance', 'Documentary', 'Drama', 'Horror', 'Musical', 'Romantic Comedy', 'Thriller/Suspense', 'Western'] -base = alt.Chart(movies_df, width=200, height=200).mark_point(filled=True).transform_calculate( +base = alt.Chart(movies, width=200, height=200).mark_point(filled=True).transform_calculate( Rounded_IMDB_Rating = "floor(datum.IMDB_Rating)", Hundred_Million_Production = "datum.Production_Budget > 100000000.0 ? 100 : 10", - Release_Year = "year(datum.Release_Date_dt)" + Release_Year = "year(datum.Release_Date)" ).transform_filter( alt.datum.IMDB_Rating > 0 ).transform_filter( From 1fb57fafb12c6194d9f264ace9ccbc6387352ad3 Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Mon, 27 Aug 2018 20:43:12 -0400 Subject: [PATCH 08/11] * Retitle the page. * fix the links --- doc/user_guide/interactions.rst | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/user_guide/interactions.rst b/doc/user_guide/interactions.rst index b1cf3d22a..c7568c65c 100644 --- a/doc/user_guide/interactions.rst +++ b/doc/user_guide/interactions.rst @@ -2,8 +2,8 @@ .. _user-guide-interactions: -Interactions -============ +Bindings, Selections, Conditions: Making Charts Interactive +=========================================================== One of the unique features of Altair, inherited from Vega-Lite, is a declarative grammar of not just visualization, but *interaction*. There are three @@ -366,9 +366,9 @@ The following are the input elements supported in vega-lite: ========================= =========================================================================== =============================================== Input Element Description Example ========================= =========================================================================== =============================================== -:class:`binding_checkbox` Renders as checkboxes allowing for multiple selections of items. :ref:`multiple_interactions` -:class:`binding_radio` Radio buttons that force only a single selection :ref:`multiple_interactions` -:class:`binding_select` Drop down box for selecting a single item from a list :ref:`multiple_interactions` +:class:`binding_checkbox` Renders as checkboxes allowing for multiple selections of items. :ref:`gallery_multiple_interactions` +:class:`binding_radio` Radio buttons that force only a single selection :ref:`gallery_multiple_interactions` +:class:`binding_select` Drop down box for selecting a single item from a list :ref:`gallery_multiple_interactions` :class:`binding_range` Shown as a slider to allow for selection along a scale. :ref:`gallery_us_population_over_time` ========================= =========================================================================== =============================================== From 622e07962787c56a5a640f72e280400137bcb26e Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Mon, 27 Aug 2018 20:48:19 -0400 Subject: [PATCH 09/11] Remove unused libraries --- altair/vegalite/v2/examples/multiple_interactions.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/altair/vegalite/v2/examples/multiple_interactions.py b/altair/vegalite/v2/examples/multiple_interactions.py index 9f55c010f..495a4b5fe 100644 --- a/altair/vegalite/v2/examples/multiple_interactions.py +++ b/altair/vegalite/v2/examples/multiple_interactions.py @@ -13,8 +13,7 @@ # category: interactive charts import altair as alt from vega_datasets import data -import urllib, json -import pandas as pd + movies = alt.UrlData(data.movies.url, format=alt.DataFormat(parse={"Release_Date":"date"})) From 93add7c13527c6ffb82ad101d9f9302ffe7b3bdd Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Wed, 29 Aug 2018 15:59:08 -0400 Subject: [PATCH 10/11] Edits based on pr 1. Find all references to `user-guide-selections` and update to refer to the new page name 2. change coding style on chart reference in interactions. --- doc/case_studies/exploring-weather.rst | 2 +- doc/user_guide/interactions.rst | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/case_studies/exploring-weather.rst b/doc/case_studies/exploring-weather.rst index dddb0d821..2af2d9fd8 100644 --- a/doc/case_studies/exploring-weather.rst +++ b/doc/case_studies/exploring-weather.rst @@ -221,7 +221,7 @@ by weather type: And now we can vertically concatenate this histogram to the points plot above, and add a brush selection tool such that the histogram reflects the content of the selection (for more information on selections, see -:ref:`user-guide-selections`): +:ref:`user-guide-interactions`): .. altair-plot:: diff --git a/doc/user_guide/interactions.rst b/doc/user_guide/interactions.rst index c7568c65c..bfadc05fe 100644 --- a/doc/user_guide/interactions.rst +++ b/doc/user_guide/interactions.rst @@ -336,7 +336,7 @@ Input Element Binding ^^^^^^^^^^^^^^^^^^^^^ With single selections, an input element can be added to the chart to establish a binding between the input and the selection. -For instance, using our example from above a dropdown can be used to highlight cars from a specific :origin: : +For instance, using our example from above a dropdown can be used to highlight cars from a specific ``origin`` : .. altair-plot:: From 91919cc52a66ff356953005ea4edb9a304d16d4f Mon Sep 17 00:00:00 2001 From: Luke Shulman Date: Wed, 29 Aug 2018 16:03:29 -0400 Subject: [PATCH 11/11] removing one line --- doc/user_guide/interactions.rst | 2 -- 1 file changed, 2 deletions(-) diff --git a/doc/user_guide/interactions.rst b/doc/user_guide/interactions.rst index bfadc05fe..98951a7b2 100644 --- a/doc/user_guide/interactions.rst +++ b/doc/user_guide/interactions.rst @@ -323,8 +323,6 @@ cylinders: By fine-tuning the behavior of selections in this way, they can be used to create a wide variety of linked interactive chart types. - - Binding: Adding Data Driven Inputs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ With an understanding of the selection types and conditions, you can now add data-driven input elements to the charts using the :class:`bind`. As specified by `Vega-lite binding `_, selections can be bound two-ways: