Support transformed_data for Layered and Concatenated charts (#313)

* Support LayerChart, HConcatChart, and VConcatChart in transformed_data * Update Altair mocks for Altair 5 * Test transformed_data with compound chart mocks
vega · May 13, 2023 · 6916a04 · 6916a04
1 parent 5f1bc16
commit 6916a04
Show file tree

Hide file tree

Showing 15 changed files with 356 additions and 171 deletions.
diff --git a/...n/vegafusion/tests/altair_mocks/interactive/casestudy-seattle_weather_interactive/mock.py b/...n/vegafusion/tests/altair_mocks/interactive/casestudy-seattle_weather_interactive/mock.py
@@ -1,5 +1,3 @@
-# https://altair-viz.github.io/gallery/seattle_weather_interactive.html
-
 import altair as alt
 from vega_datasets import data
 
@@ -13,7 +11,7 @@
 # - a brush that is active on the top panel
 # - a multi-click that is active on the bottom panel
 brush = alt.selection_interval(encodings=['x'])
-click = alt.selection_multi(encodings=['color'])
+click = alt.selection_point(encodings=['color'])
 
 # Top panel is scatter plot of temperature vs time
 points = alt.Chart().mark_point().encode(
@@ -27,7 +25,7 @@
 ).properties(
     width=550,
     height=300
-).add_selection(
+).add_params(
     brush
 ).transform_filter(
     click
@@ -42,7 +40,7 @@
     brush
 ).properties(
     width=550,
-).add_selection(
+).add_params(
     click
 )
 
@@ -51,4 +49,4 @@
     bars,
     data=source,
     title="Seattle Weather: 2012-2015"
-)
+)
diff --git a/...gafusion/tests/altair_mocks/interactive/casestudy-us_population_pyramid_over_time/mock.py b/...gafusion/tests/altair_mocks/interactive/casestudy-us_population_pyramid_over_time/mock.py
@@ -1,15 +1,14 @@
 # https://altair-viz.github.io/gallery/us_population_pyramid_over_time.html
-
 import altair as alt
 from vega_datasets import data
 
 source = data.population.url
 
 slider = alt.binding_range(min=1850, max=2000, step=10)
-select_year = alt.selection_single(name='year', fields=['year'],
-                                   bind=slider, init={'year': 2000})
+select_year = alt.selection_point(name='year', fields=['year'],
+                                  bind=slider, value={'year': 2000})
 
-base = alt.Chart(source).add_selection(
+base = alt.Chart(source).add_params(
     select_year
 ).transform_filter(
     select_year
@@ -46,4 +45,4 @@
     color=alt.Color('gender:N', scale=color_scale, legend=None)
 ).mark_bar().properties(title='Male')
 
-alt.concat(left, middle, right, spacing=5)
+alt.concat(left, middle, right, spacing=5)
diff --git a/python/vegafusion/tests/altair_mocks/interactive/cross_highlight/mock.py b/python/vegafusion/tests/altair_mocks/interactive/cross_highlight/mock.py
@@ -1,12 +1,9 @@
-# https://altair-viz.github.io/gallery/interactive_cross_highlight.html
-# - Selection count legend removed to keep from shifting bar chart
-
 import altair as alt
 from vega_datasets import data
 
 source = data.movies.url
 
-pts = alt.selection(type="single", encodings=['x'])
+pts = alt.selection_point(encodings=['x'])
 
 rect = alt.Chart(data.movies.url).mark_rect().encode(
     alt.X('IMDB_Rating:Q', bin=True),
@@ -15,34 +12,30 @@
               scale=alt.Scale(scheme='greenblue'),
               legend=alt.Legend(title='Total Records')
               )
-).properties(
-    width=500,
-    height=250
 )
 
 circ = rect.mark_point().encode(
     alt.ColorValue('grey'),
-    alt.Size('count()', legend=None)
+    alt.Size('count()',
+             legend=alt.Legend(title='Records in Selection')
+             )
 ).transform_filter(
     pts
-).properties(
-    width=500,
-    height=250
 )
 
 bar = alt.Chart(source).mark_bar().encode(
     x='Major_Genre:N',
     y='count()',
     color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
 ).properties(
-    width=500,
-    height=100
-).add_selection(pts)
+    width=550,
+    height=200
+).add_params(pts)
 
 alt.vconcat(
     rect + circ,
     bar
 ).resolve_legend(
     color="independent",
     size="independent"
-)
+)
diff --git a/python/vegafusion/tests/altair_mocks/interactive/multiline_highlight/mock.py b/python/vegafusion/tests/altair_mocks/interactive/multiline_highlight/mock.py
@@ -1,12 +1,10 @@
-# https://altair-viz.github.io/gallery/multiline_highlight.html
-
 import altair as alt
 from vega_datasets import data
 
 source = data.stocks()
 
-highlight = alt.selection(type='single', on='mouseover',
-                          fields=['symbol'], nearest=True)
+highlight = alt.selection_point(on='mouseover',
+                                fields=['symbol'], nearest=True)
 
 base = alt.Chart(source).encode(
     x='date:T',
@@ -16,14 +14,14 @@
 
 points = base.mark_circle().encode(
     opacity=alt.value(0)
-).add_selection(
+).add_params(
     highlight
 ).properties(
-    width=500
+    width=600
 )
 
 lines = base.mark_line().encode(
     size=alt.condition(~highlight, alt.value(1), alt.value(3))
 )
 
-points + lines
+points + lines
diff --git a/python/vegafusion/tests/altair_mocks/interactive/multiline_tooltip/mock.py b/python/vegafusion/tests/altair_mocks/interactive/multiline_tooltip/mock.py
@@ -1,5 +1,3 @@
-# https://altair-viz.github.io/gallery/multiline_tooltip.html
-
 import altair as alt
 import pandas as pd
 import numpy as np
@@ -10,8 +8,8 @@
 source = source.reset_index().melt('x', var_name='category', value_name='y')
 
 # Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection(type='single', nearest=True, on='mouseover',
-                        fields=['x'], empty='none')
+nearest = alt.selection_point(nearest=True, on='mouseover',
+                              fields=['x'], empty=False)
 
 # The basic line
 line = alt.Chart(source).mark_line(interpolate='basis').encode(
@@ -25,7 +23,7 @@
 selectors = alt.Chart(source).mark_point().encode(
     x='x:Q',
     opacity=alt.value(0),
-).add_selection(
+).add_params(
     nearest
 )
 
@@ -50,5 +48,5 @@
 alt.layer(
     line, selectors, points, rules, text
 ).properties(
-    width=500, height=300
+    width=600, height=300
 )
diff --git a/python/vegafusion/tests/altair_mocks/interactive/scatter-with_linked_table/mock.py b/python/vegafusion/tests/altair_mocks/interactive/scatter-with_linked_table/mock.py
@@ -1,19 +1,17 @@
-# https://altair-viz.github.io/gallery/scatter_linked_table.html
-
 import altair as alt
 from vega_datasets import data
 
 source = data.cars()
 
 # Brush for selection
-brush = alt.selection(type='interval')
+brush = alt.selection_interval()
 
 # Scatter Plot
 points = alt.Chart(source).mark_point().encode(
     x='Horsepower:Q',
     y='Miles_per_Gallon:Q',
     color=alt.condition(brush, 'Cylinders:O', alt.value('grey'))
-).add_selection(brush)
+).add_params(brush)
 
 # Base chart for data tables
 ranked_text = alt.Chart(source).mark_text().encode(

diff --git a/python/vegafusion/tests/altair_mocks/interactive/scatter-with_minimap/mock.py b/python/vegafusion/tests/altair_mocks/interactive/scatter-with_minimap/mock.py
@@ -1,6 +1,3 @@
-# https://altair-viz.github.io/gallery/scatter_with_minimap.html
-# with smaller subplots
-
 import altair as alt
 from vega_datasets import data
 
@@ -10,33 +7,34 @@
 
 minimap = (
     alt.Chart(source)
-        .mark_point()
-        .add_selection(zoom)
-        .encode(
+    .mark_point()
+    .add_params(zoom)
+    .encode(
         x="date:T",
         y="temp_max:Q",
         color=alt.condition(zoom, "weather", alt.value("lightgray")),
     )
-        .properties(
+    .properties(
         width=200,
         height=200,
         title="Minimap -- click and drag to zoom in the detail view",
     )
-).properties(width=250, height=300)
+)
 
 detail = (
     alt.Chart(source)
-        .mark_point()
-        .encode(
+    .mark_point()
+    .encode(
         x=alt.X(
-            "date:T", scale=alt.Scale(domain={"selection": zoom.name, "encoding": "x"})
+            "date:T", scale=alt.Scale(domain={"param": zoom.name, "encoding": "x"})
         ),
         y=alt.Y(
             "temp_max:Q",
-            scale=alt.Scale(domain={"selection": zoom.name, "encoding": "y"}),
+            scale=alt.Scale(domain={"param": zoom.name, "encoding": "y"}),
         ),
         color="weather",
-    ).properties(width=250, height=300, title="Seattle weather -- detail view")
+    )
+    .properties(width=600, height=400, title="Seattle weather -- detail view")
 )
 
-detail | minimap
+detail | minimap
diff --git a/python/vegafusion/tests/altair_mocks/interactive/scatter_with_histogram/mock.py b/python/vegafusion/tests/altair_mocks/interactive/scatter_with_histogram/mock.py
@@ -1,12 +1,7 @@
-# https://altair-viz.github.io/gallery/scatter_with_histogram.html
-# With smaller subplots and a random seed
-
 import altair as alt
 import pandas as pd
 import numpy as np
 
-np.random.seed(1)
-
 x = np.random.normal(size=100)
 y = np.random.normal(size=100)
 
@@ -15,7 +10,7 @@
 source = pd.DataFrame({"x": x, "y":y, "m":m})
 
 # interval selection in the scatter plot
-pts = alt.selection(type="interval", encodings=["x"])
+pts = alt.selection_interval(encodings=["x"])
 
 # left panel: scatter plot
 points = alt.Chart().mark_point(filled=True, color="black").encode(
@@ -24,7 +19,7 @@
 ).transform_filter(
     pts
 ).properties(
-    width=250,
+    width=300,
     height=300
 )
 
@@ -34,9 +29,9 @@
     y="count()",
     color=alt.condition(pts, alt.value("black"), alt.value("lightgray"))
 ).properties(
-    width=250,
+    width=300,
     height=300
-).add_selection(pts)
+).add_params(pts)
 
 # build the chart:
 alt.hconcat(
@@ -47,4 +42,4 @@
     "mbin",
     field="m",
     bin=alt.Bin(maxbins=20)
-)
+)