@spec brush(vl :: VegaLite.t(), opts :: keyword()) :: VegaLite.t()

Links the plots of a concatenated plot with a brush.

Dragging a rectangle, the brush, on any of the plots selects the rows under it, and the same rows are highlighted in all plots, while the rest are faded. This is known as linked brushing, or brushing and linking, and it shows how a subset of the data is distributed across different fields, e.g. where the outliers of one plot are in the others. Double click on a plot to clear the brush.

The plots must be built from the same data, since the selection is matched by the fields of the rows.

The brush is added to the plots that draw one mark per row, e.g. scatter or strip plots, on their continuous x and y axes. Plots without continuous axes are highlighted but they cannot be brushed.

Options

• :unselected_opacity (number/0) - The opacity of the data that are not selected by the brush. The default value is 0.15.

Examples

Select some cars on any plot to see where they are on the other:

Tucan.hconcat([
  Tucan.scatter(:cars, "Horsepower", "Miles_per_Gallon", color_by: "Origin", width: 250),
  Tucan.scatter(:cars, "Weight_in_lbs", "Acceleration", color_by: "Origin", width: 250)
])
|> Tucan.Interactive.brush()

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","hconcat":[{"data":{"url":"https://vega.github.io/editor/data/cars.json"},"encoding":{"color":{"field":"Origin","type":"nominal"},"opacity":{"condition":{"param":"_brush","value":1},"value":0.15},"x":{"field":"Horsepower","scale":{"zero":false},"type":"quantitative"},"y":{"field":"Miles_per_Gallon","scale":{"zero":false},"type":"quantitative"}},"mark":{"fillOpacity":1,"type":"point"},"params":[{"name":"_brush","select":{"encodings":["x","y"],"type":"interval"}}],"width":250},{"data":{"url":"https://vega.github.io/editor/data/cars.json"},"encoding":{"color":{"field":"Origin","type":"nominal"},"opacity":{"condition":{"param":"_brush","value":1},"value":0.15},"x":{"field":"Weight_in_lbs","scale":{"zero":false},"type":"quantitative"},"y":{"field":"Acceleration","scale":{"zero":false},"type":"quantitative"}},"mark":{"fillOpacity":1,"type":"point"},"params":[{"name":"_brush","select":{"encodings":["x","y"],"type":"interval"}}],"width":250}]}

A linked scatter plot and strip plot, with a lower opacity of the unselected rows:

Tucan.vconcat([
  Tucan.scatter(:penguins, "Beak Length (mm)", "Beak Depth (mm)", color_by: "Species"),
  Tucan.stripplot(:penguins, "Body Mass (g)", group_by: "Species", style: :jitter)
])
|> Tucan.Interactive.brush(unselected_opacity: 0.05)

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","vconcat":[{"data":{"url":"https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"},"encoding":{"color":{"field":"Species","type":"nominal"},"opacity":{"condition":{"param":"_brush","value":1},"value":0.05},"x":{"field":"Beak Length (mm)","scale":{"zero":false},"type":"quantitative"},"y":{"field":"Beak Depth (mm)","scale":{"zero":false},"type":"quantitative"}},"mark":{"fillOpacity":1,"type":"point"},"params":[{"name":"_brush","select":{"encodings":["x","y"],"type":"interval"}}]},{"data":{"url":"https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"},"encoding":{"opacity":{"condition":{"param":"_brush","value":1},"value":0.05},"x":{"field":"Body Mass (g)","type":"quantitative"},"y":{"field":"Species","type":"nominal"},"yOffset":{"axis":null,"field":"jitter","type":"quantitative"}},"mark":{"size":16,"type":"point"},"params":[{"name":"_brush","select":{"encodings":["x"],"type":"interval"}}],"transform":[{"as":"jitter","calculate":"sqrt(-2*log(random()))*cos(2*PI*random())"}]}]}

@spec crosshair(vl :: VegaLite.t(), opts :: keyword()) :: VegaLite.t()

Adds an interactive crosshair to a plot.

When hovering over the plot, a vertical rule is drawn at the nearest x value, and the points of all series at this value are highlighted, with a tooltip showing their values. It is useful for comparing the values of several series, e.g. of a line plot, at the same point in time.

The plot must be a single view plot with an x and a y field encoding, e.g. a Tucan.lineplot/4 or a Tucan.area/4. Its color encoding, if any, is used for the points. The plot is turned into a layered plot, with the original marks as its first layer.

Options

• :rule_color (String.t/0) - The color of the vertical rule. The default value is "gray".

• :point_size (pos_integer/0) - The size of the highlighted points. The default value is 50.

Examples

Hover over the plot to compare the prices of the stocks:

Tucan.lineplot(:stocks, "date", "price", color_by: "symbol", x: [type: :temporal], width: 400)
|> Tucan.Interactive.crosshair()

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/editor/data/stocks.csv"},"layer":[{"encoding":{"color":{"field":"symbol"},"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"}},"mark":{"fillOpacity":1,"type":"line"}},{"encoding":{"x":{"field":"date","type":"temporal"}},"mark":{"opacity":0,"type":"point"},"params":[{"name":"_hover","select":{"clear":"pointerout","fields":["date"],"nearest":true,"on":"pointerover","type":"point"}}]},{"encoding":{"opacity":{"condition":{"empty":false,"param":"_hover","value":1},"value":0},"x":{"field":"date","type":"temporal"}},"mark":{"color":"gray","type":"rule"}},{"encoding":{"color":{"field":"symbol"},"opacity":{"condition":{"empty":false,"param":"_hover","value":1},"value":0},"tooltip":[{"field":"date","type":"temporal"},{"field":"price","type":"quantitative"},{"field":"symbol"}],"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"}},"mark":{"filled":true,"size":50,"type":"point"}}],"width":400}

@spec dropdown(vl :: VegaLite.t(), field :: String.t(), opts :: keyword()) ::
  VegaLite.t()

Adds a dropdown that filters the data of the plot by the selected value of field.

It is useful for focusing on a single category of a plot with many categories. The dropdown is drawn below the plot.

As with slider/3, the rows are filtered before any other transform of the plot, and plots whose layers have their own data are not filtered.

Options

• :options - The values of the dropdown. If not set the distinct values of the field are used, which is possible only if the data are passed inline.

• :value - The initial value of the dropdown. If not set all data are shown if :all is enabled, otherwise the first option is selected.

• :all - Whether to include an option for showing all the data. If a string is passed it is used as the label of this option, defaults to "All". The default value is true.

• :label (String.t/0) - The label of the dropdown. Defaults to the field.

Examples

Select a stock to show only its prices:

:stocks
|> Tucan.lineplot("date", "price", color_by: "symbol", x: [type: :temporal], width: 400)
|> Tucan.Interactive.dropdown("symbol", options: ["AAPL", "AMZN", "GOOG", "IBM", "MSFT"])

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/editor/data/stocks.csv"},"encoding":{"color":{"field":"symbol"},"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"}},"mark":{"fillOpacity":1,"type":"line"},"params":[{"bind":{"input":"select","labels":["All","AAPL","AMZN","GOOG","IBM","MSFT"],"name":"symbol ","options":[null,"AAPL","AMZN","GOOG","IBM","MSFT"]},"name":"dropdown_symbol","value":null}],"transform":[{"filter":"dropdown_symbol == null || datum[\"symbol\"] == dropdown_symbol"}],"width":400}

Without an option for showing all data, the first option is initially selected:

:penguins
|> Tucan.scatter("Beak Length (mm)", "Beak Depth (mm)", color_by: "Island", width: 400)
|> Tucan.Interactive.dropdown("Island", options: ["Biscoe", "Dream", "Torgersen"], all: false)

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"},"encoding":{"color":{"field":"Island","type":"nominal"},"x":{"field":"Beak Length (mm)","scale":{"zero":false},"type":"quantitative"},"y":{"field":"Beak Depth (mm)","scale":{"zero":false},"type":"quantitative"}},"mark":{"fillOpacity":1,"type":"point"},"params":[{"bind":{"input":"select","labels":["Biscoe","Dream","Torgersen"],"name":"Island ","options":["Biscoe","Dream","Torgersen"]},"name":"dropdown_Island","value":"Biscoe"}],"transform":[{"filter":"datum[\"Island\"] == dropdown_Island"}],"width":400}

@spec overview_detail(vl :: VegaLite.t(), opts :: keyword()) :: VegaLite.t()

Adds an overview of the plot below it, selecting an interval on the overview zooms the detail plot to it.

It is useful for long series, e.g. time series spanning many years. The overview is a smaller copy of the plot showing all the data. Drag on it to select the x-axis interval shown in the detail plot, drag the selection to move it and double click to reset it.

Options

• :overview_height (pos_integer/0) - The height of the overview plot in pixels. The default value is 60.

• :spacing (non_neg_integer/0) - The spacing between the detail and the overview plots in pixels. The default value is 20.

Examples

Select an interval of the overview to see the prices of the stocks in detail:

:stocks
|> Tucan.lineplot("date", "price", color_by: "symbol", x: [type: :temporal], width: 500)
|> Tucan.Interactive.overview_detail()

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/editor/data/stocks.csv"},"spacing":20,"vconcat":[{"encoding":{"color":{"field":"symbol"},"x":{"field":"date","scale":{"domain":{"param":"_overview"}},"type":"temporal"},"y":{"field":"price","type":"quantitative"}},"mark":{"clip":true,"fillOpacity":1,"type":"line"},"width":500},{"encoding":{"color":{"field":"symbol"},"x":{"field":"date","type":"temporal"},"y":{"field":"price","type":"quantitative"}},"height":60,"mark":{"fillOpacity":1,"type":"line"},"params":[{"name":"_overview","select":{"encodings":["x"],"type":"interval"}}],"width":500}]}

Layered plots are supported as well:

data = for x <- 0..200, do: %{x: x, y: :math.sin(x / 8) * x}

Tucan.layers([
  Tucan.area(data, "x", "y", fill_opacity: 0.3),
  Tucan.lineplot(data, "x", "y")
])
|> Tucan.set_size(500, 200)
|> Tucan.Interactive.overview_detail(overview_height: 80)

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","spacing":20,"vconcat":[{"height":200,"layer":[{"__tucan__":{"types":{"x":"quantitative","y":"quantitative"}},"data":{"values":[{"x":0,"y":0.0},{"x":1,"y":0.12467473338522769},{"x":2,"y":0.4948079185090459},{"x":3,"y":1.0988175872581427},{"x":4,"y":1.917702154416812},{"x":5,"y":2.9254863647023113},{"x":6,"y":4.089832560140005},{"x":7,"y":5.37280451565219},{"x":8,"y":6.731767878463172},{"x":9,"y":8.120408346891857},{"x":10,"y":9.489846193555863},{"x":11,"y":10.789823627254712},{"x":12,"y":11.969939839248653},{"x":13,"y":12.980907427017812},{"x":14,"y":13.775803256235116},{"x":15,"y":14.311286724145408},{"x":16,"y":14.548758829210907},{"x":17,"y":14.455436426913684},{"x":18,"y":14.005317543982581},{"x":19,"y":13.180015607112164},{"x":20,"y":11.969442882079129},{"x":21,"y":10.372326270811874},{"x":22,"y":8.396541825151298},{"x":23,"y":6.059257847358679},{"x":24,"y":3.386880193436813},{"x":25,"y":0.41479730573369766},{"x":26,"y":-2.813073497782818},{"x":27,"y":-6.244932934854589},{"x":28,"y":-9.821930375309355},{"x":29,"y":-13.479164852916659},{"x":30,"y":-17.146839562270312},{"x":31,"y":-20.751549613369818},{"x":32,"y":-24.217679849853706},{"x":33,"y":-27.46888698041358},{"x":34,"y":-30.42963817977184},{"x":35,"y":-33.02677673053368},{"x":36,"y":-35.19108423594349},{"x":37,"y":-36.85880846199973},{"x":38,"y":-37.97312598106436},{"x":39,"y":-38.4855094928632},{"x":40,"y":-38.35697098652554},{"x":41,"y":-37.55915376207599},{"x":42,"y":-36.075248723916864},{"x":43,"y":-33.900713254409155},{"x":44,"y":-31.043774325097246},{"x":45,"y":-27.525701249965433},{"x":46,"y":-23.380837564965887},{"x":47,"y":-18.65638585968261},{"x":48,"y":-13.411943913548441},{"x":49,"y":-7.718795119399007},{"x":50,"y":-1.658960827377841},{"x":51,"y":4.675973172999066},{"x":52,"y":11.186239380566407},{"x":53,"y":17.76545966766453},{"x":54,"y":24.30237998415335},{"x":55,"y":30.68274044500171},{"x":56,"y":36.79124952825219},{"x":57,"y":42.513628592883784},{"x":58,"y":47.73869098266732},{"x":59,"y":52.36041865606044},{"x":60,"y":56.279998606484334},{"x":61,"y":59.40778133365282},{"x":62,"y":61.66512430489292},{"x":63,"y":62.986084703416296},{"x":64,"y":63.318927783896434},{"x":65,"y":62.62741981802723},{"x":66,"y":60.89187787579645},{"x":67,"y":58.109952502618135},{"x":68,"y":54.29712365839734},{"x":69,"y":49.48689501270645},{"x":70,"y":43.73067676279347},{"x":71,"y":37.09735247326346},{"x":72,"y":29.672530937406474},{"x":73,"y":21.557489635546766},{"x":74,"y":12.867821918152083},{"x":75,"y":3.7318054725808962},{"x":76,"y":-5.711485155097507},{"x":77,"y":-15.314294312612187},{"x":78,"y":-24.922497102537346},{"x":79,"y":-34.37807117956671},{"x":80,"y":-43.52168887114958},{"x":81,"y":-52.19538720246132},{"x":82,"y":-60.24527129319323},{"x":83,"y":-67.52420521982346},{"x":84,"y":-73.89444383762029},{"x":85,"y":-79.23015925339304},{"x":86,"y":-83.41981664117836},{"x":87,"y":-86.36835589303834},{"x":88,"y":-87.99913817646191},{"x":89,"y":-88.25561979528204},{"x":90,"y":-87.10271977601353},{"x":91,"y":-84.52785226686207},{"x":92,"y":-80.54160007133542},{"x":93,"y":-75.17801136064838},{"x":94,"y":-68.49450772775398},{"x":95,"y":-60.57139816165327},{"x":96,"y":-51.51100012804176},{"x":97,"y":-41.43637563109006},{"x":98,"y":-30.489696788150475},{"x":99,"y":-18.830261960424373},{"x":100,"y":-6.632189735120068},{"x":101,"y":5.9181760616651635},{"x":102,"y":18.625111732375668},{"x":103,"y":31.28656602948905},{"x":104,"y":43.697371829970656},{"x":105,"y":55.65256612908709},{"x":106,"y":66.9507646981333},{"x":107,"y":77.39753599489968},{"x":108,"y":86.80871806757506},{"x":109,"y":95.01362227890034},{"x":110,"y":101.85806870894899},{"x":111,"y":107.20720006728094},{"x":112,"y":110.94802383782547},{"x":113,"y":112.99163615635571},{"x":114,"y":113.27508552913494},{"x":115,"y":111.76283987591019},{"x":116,"y":108.44782644086322},{"x":117,"y":103.35202076885345},{"x":118,"y":96.52656808765391},{"x":119,"y":88.05142795675411},{"x":120,"y":78.03454081885403},{"x":121,"y":66.61052299482022},{"x":122,"y":53.93890456633781},{"x":123,"y":40.201932360935686},{"x":124,"y":25.60196776028678},{"x":125,"y":10.358516166324778},{"x":126,"y":-5.29506844257394},{"x":127,"y":-21.115154467537888},{"x":128,"y":-36.85162453312836},{"x":129,"y":-52.25182920399056},{"x":130,"y":-67.06464008635422},{"x":131,"y":-81.04453734134597},{"x":132,"y":-93.95566519272424},{"x":133,"y":-105.5757886448052},{"x":134,"y":-115.70008535625935},{"x":135,"y":-124.14470844339701},{"x":136,"y":-130.75005889561973},{"x":137,"y":-135.3837102408835},{"x":138,"y":-137.94293304757198},{"x":139,"y":-138.3567727213506},{"x":140,"y":-136.58764076554206},{"x":141,"y":-132.63238712069136},{"x":142,"y":-126.52282926932918},{"x":143,"y":-118.32572235998448},{"x":144,"y":-108.14216353512137},{"x":145,"y":-96.10643279827529},{"x":146,"y":-82.38428197843086},{"x":147,"y":-67.17069249398737},{"x":148,"y":-50.68713153350265},{"x":149,"y":-33.17834480691393},{"x":150,"y":-14.908732034827226},{"x":151,"y":3.84164130251766},{"x":152,"y":22.781335868768757},{"x":153,"y":41.61206827754107},{"x":154,"y":60.0334083959423},{"x":155,"y":77.7475701795151},{"x":156,"y":94.46421967625777},{"x":157,"y":109.90522265769964},{"x":158,"y":123.80925440458016},{"x":159,"y":135.93619550604276},{"x":160,"y":146.07124011642043},{"x":161,"y":154.02864692408403},{"x":162,"y":159.6550680735494},{"x":163,"y":162.83239737645664},{"x":164,"y":163.48008626172307},{"x":165,"y":161.55688394513035},{"x":166,"y":157.06196712284455},{"x":167,"y":150.03543397668653},{"x":168,"y":140.5581472740574},{"x":169,"y":128.75092169513445},{"x":170,"y":114.77306105977617},{"x":171,"y":98.82026168725702},{"x":172,"y":81.12190853220174},{"x":173,"y":61.93780082936108},{"x":174,"y":41.554353581147396},{"x":175,"y":20.280330174397882},{"x":176,"y":-1.5578304351110823},{"x":177,"y":-23.62102132056286},{"x":178,"y":-45.56273317034128},{"x":179,"y":-67.03449610162},{"x":180,"y":-87.69141224289172},{"x":181,"y":-107.19769127160066},{"x":182,"y":-125.23210013101006},{"x":183,"y":-141.49323861110608},{"x":184,"y":-155.70455436823138},{"x":185,"y":-167.61901426067462},{"x":186,"y":-177.02335355299775},{"x":187,"y":-183.74183052822707},{"x":188,"y":-187.6394212601265},{"x":189,"y":-188.6243976329385},{"x":190,"y":-186.65024102940043},{"x":191,"y":-181.71685429842282},{"x":192,"y":-173.87104550527178},{"x":193,"y":-163.20626839039284},{"x":194,"y":-149.86161623895748},{"x":195,"y":-134.02007780528277},{"x":196,"y":-115.90607585356437},{"x":197,"y":-95.78232057663605},{"x":198,"y":-73.94602144725472},{"x":199,"y":-50.72451175609873},{"x":200,"y":-26.470350019554605}]},"encoding":{"x":{"field":"x","scale":{"domain":{"param":"_overview"}},"type":"quantitative"},"y":{"field":"y","stack":true,"type":"quantitative"}},"mark":{"clip":true,"fillOpacity":0.3,"line":false,"type":"area"}},{"__tucan__":{"types":{"x":"quantitative","y":"quantitative"}},"data":{"values":[{"x":0,"y":0.0},{"x":1,"y":0.12467473338522769},{"x":2,"y":0.4948079185090459},{"x":3,"y":1.0988175872581427},{"x":4,"y":1.917702154416812},{"x":5,"y":2.9254863647023113},{"x":6,"y":4.089832560140005},{"x":7,"y":5.37280451565219},{"x":8,"y":6.731767878463172},{"x":9,"y":8.120408346891857},{"x":10,"y":9.489846193555863},{"x":11,"y":10.789823627254712},{"x":12,"y":11.969939839248653},{"x":13,"y":12.980907427017812},{"x":14,"y":13.775803256235116},{"x":15,"y":14.311286724145408},{"x":16,"y":14.548758829210907},{"x":17,"y":14.455436426913684},{"x":18,"y":14.005317543982581},{"x":19,"y":13.180015607112164},{"x":20,"y":11.969442882079129},{"x":21,"y":10.372326270811874},{"x":22,"y":8.396541825151298},{"x":23,"y":6.059257847358679},{"x":24,"y":3.386880193436813},{"x":25,"y":0.41479730573369766},{"x":26,"y":-2.813073497782818},{"x":27,"y":-6.244932934854589},{"x":28,"y":-9.821930375309355},{"x":29,"y":-13.479164852916659},{"x":30,"y":-17.146839562270312},{"x":31,"y":-20.751549613369818},{"x":32,"y":-24.217679849853706},{"x":33,"y":-27.46888698041358},{"x":34,"y":-30.42963817977184},{"x":35,"y":-33.02677673053368},{"x":36,"y":-35.19108423594349},{"x":37,"y":-36.85880846199973},{"x":38,"y":-37.97312598106436},{"x":39,"y":-38.4855094928632},{"x":40,"y":-38.35697098652554},{"x":41,"y":-37.55915376207599},{"x":42,"y":-36.075248723916864},{"x":43,"y":-33.900713254409155},{"x":44,"y":-31.043774325097246},{"x":45,"y":-27.525701249965433},{"x":46,"y":-23.380837564965887},{"x":47,"y":-18.65638585968261},{"x":48,"y":-13.411943913548441},{"x":49,"y":-7.718795119399007},{"x":50,"y":-1.658960827377841},{"x":51,"y":4.675973172999066},{"x":52,"y":11.186239380566407},{"x":53,"y":17.76545966766453},{"x":54,"y":24.30237998415335},{"x":55,"y":30.68274044500171},{"x":56,"y":36.79124952825219},{"x":57,"y":42.513628592883784},{"x":58,"y":47.73869098266732},{"x":59,"y":52.36041865606044},{"x":60,"y":56.279998606484334},{"x":61,"y":59.40778133365282},{"x":62,"y":61.66512430489292},{"x":63,"y":62.986084703416296},{"x":64,"y":63.318927783896434},{"x":65,"y":62.62741981802723},{"x":66,"y":60.89187787579645},{"x":67,"y":58.109952502618135},{"x":68,"y":54.29712365839734},{"x":69,"y":49.48689501270645},{"x":70,"y":43.73067676279347},{"x":71,"y":37.09735247326346},{"x":72,"y":29.672530937406474},{"x":73,"y":21.557489635546766},{"x":74,"y":12.867821918152083},{"x":75,"y":3.7318054725808962},{"x":76,"y":-5.711485155097507},{"x":77,"y":-15.314294312612187},{"x":78,"y":-24.922497102537346},{"x":79,"y":-34.37807117956671},{"x":80,"y":-43.52168887114958},{"x":81,"y":-52.19538720246132},{"x":82,"y":-60.24527129319323},{"x":83,"y":-67.52420521982346},{"x":84,"y":-73.89444383762029},{"x":85,"y":-79.23015925339304},{"x":86,"y":-83.41981664117836},{"x":87,"y":-86.36835589303834},{"x":88,"y":-87.99913817646191},{"x":89,"y":-88.25561979528204},{"x":90,"y":-87.10271977601353},{"x":91,"y":-84.52785226686207},{"x":92,"y":-80.54160007133542},{"x":93,"y":-75.17801136064838},{"x":94,"y":-68.49450772775398},{"x":95,"y":-60.57139816165327},{"x":96,"y":-51.51100012804176},{"x":97,"y":-41.43637563109006},{"x":98,"y":-30.489696788150475},{"x":99,"y":-18.830261960424373},{"x":100,"y":-6.632189735120068},{"x":101,"y":5.9181760616651635},{"x":102,"y":18.625111732375668},{"x":103,"y":31.28656602948905},{"x":104,"y":43.697371829970656},{"x":105,"y":55.65256612908709},{"x":106,"y":66.9507646981333},{"x":107,"y":77.39753599489968},{"x":108,"y":86.80871806757506},{"x":109,"y":95.01362227890034},{"x":110,"y":101.85806870894899},{"x":111,"y":107.20720006728094},{"x":112,"y":110.94802383782547},{"x":113,"y":112.99163615635571},{"x":114,"y":113.27508552913494},{"x":115,"y":111.76283987591019},{"x":116,"y":108.44782644086322},{"x":117,"y":103.35202076885345},{"x":118,"y":96.52656808765391},{"x":119,"y":88.05142795675411},{"x":120,"y":78.03454081885403},{"x":121,"y":66.61052299482022},{"x":122,"y":53.93890456633781},{"x":123,"y":40.201932360935686},{"x":124,"y":25.60196776028678},{"x":125,"y":10.358516166324778},{"x":126,"y":-5.29506844257394},{"x":127,"y":-21.115154467537888},{"x":128,"y":-36.85162453312836},{"x":129,"y":-52.25182920399056},{"x":130,"y":-67.06464008635422},{"x":131,"y":-81.04453734134597},{"x":132,"y":-93.95566519272424},{"x":133,"y":-105.5757886448052},{"x":134,"y":-115.70008535625935},{"x":135,"y":-124.14470844339701},{"x":136,"y":-130.75005889561973},{"x":137,"y":-135.3837102408835},{"x":138,"y":-137.94293304757198},{"x":139,"y":-138.3567727213506},{"x":140,"y":-136.58764076554206},{"x":141,"y":-132.63238712069136},{"x":142,"y":-126.52282926932918},{"x":143,"y":-118.32572235998448},{"x":144,"y":-108.14216353512137},{"x":145,"y":-96.10643279827529},{"x":146,"y":-82.38428197843086},{"x":147,"y":-67.17069249398737},{"x":148,"y":-50.68713153350265},{"x":149,"y":-33.17834480691393},{"x":150,"y":-14.908732034827226},{"x":151,"y":3.84164130251766},{"x":152,"y":22.781335868768757},{"x":153,"y":41.61206827754107},{"x":154,"y":60.0334083959423},{"x":155,"y":77.7475701795151},{"x":156,"y":94.46421967625777},{"x":157,"y":109.90522265769964},{"x":158,"y":123.80925440458016},{"x":159,"y":135.93619550604276},{"x":160,"y":146.07124011642043},{"x":161,"y":154.02864692408403},{"x":162,"y":159.6550680735494},{"x":163,"y":162.83239737645664},{"x":164,"y":163.48008626172307},{"x":165,"y":161.55688394513035},{"x":166,"y":157.06196712284455},{"x":167,"y":150.03543397668653},{"x":168,"y":140.5581472740574},{"x":169,"y":128.75092169513445},{"x":170,"y":114.77306105977617},{"x":171,"y":98.82026168725702},{"x":172,"y":81.12190853220174},{"x":173,"y":61.93780082936108},{"x":174,"y":41.554353581147396},{"x":175,"y":20.280330174397882},{"x":176,"y":-1.5578304351110823},{"x":177,"y":-23.62102132056286},{"x":178,"y":-45.56273317034128},{"x":179,"y":-67.03449610162},{"x":180,"y":-87.69141224289172},{"x":181,"y":-107.19769127160066},{"x":182,"y":-125.23210013101006},{"x":183,"y":-141.49323861110608},{"x":184,"y":-155.70455436823138},{"x":185,"y":-167.61901426067462},{"x":186,"y":-177.02335355299775},{"x":187,"y":-183.74183052822707},{"x":188,"y":-187.6394212601265},{"x":189,"y":-188.6243976329385},{"x":190,"y":-186.65024102940043},{"x":191,"y":-181.71685429842282},{"x":192,"y":-173.87104550527178},{"x":193,"y":-163.20626839039284},{"x":194,"y":-149.86161623895748},{"x":195,"y":-134.02007780528277},{"x":196,"y":-115.90607585356437},{"x":197,"y":-95.78232057663605},{"x":198,"y":-73.94602144725472},{"x":199,"y":-50.72451175609873},{"x":200,"y":-26.470350019554605}]},"encoding":{"x":{"field":"x","scale":{"domain":{"param":"_overview"}},"type":"quantitative"},"y":{"field":"y","type":"quantitative"}},"mark":{"clip":true,"fillOpacity":1,"type":"line"}}],"width":500},{"height":80,"layer":[{"__tucan__":{"types":{"x":"quantitative","y":"quantitative"}},"data":{"values":[{"x":0,"y":0.0},{"x":1,"y":0.12467473338522769},{"x":2,"y":0.4948079185090459},{"x":3,"y":1.0988175872581427},{"x":4,"y":1.917702154416812},{"x":5,"y":2.9254863647023113},{"x":6,"y":4.089832560140005},{"x":7,"y":5.37280451565219},{"x":8,"y":6.731767878463172},{"x":9,"y":8.120408346891857},{"x":10,"y":9.489846193555863},{"x":11,"y":10.789823627254712},{"x":12,"y":11.969939839248653},{"x":13,"y":12.980907427017812},{"x":14,"y":13.775803256235116},{"x":15,"y":14.311286724145408},{"x":16,"y":14.548758829210907},{"x":17,"y":14.455436426913684},{"x":18,"y":14.005317543982581},{"x":19,"y":13.180015607112164},{"x":20,"y":11.969442882079129},{"x":21,"y":10.372326270811874},{"x":22,"y":8.396541825151298},{"x":23,"y":6.059257847358679},{"x":24,"y":3.386880193436813},{"x":25,"y":0.41479730573369766},{"x":26,"y":-2.813073497782818},{"x":27,"y":-6.244932934854589},{"x":28,"y":-9.821930375309355},{"x":29,"y":-13.479164852916659},{"x":30,"y":-17.146839562270312},{"x":31,"y":-20.751549613369818},{"x":32,"y":-24.217679849853706},{"x":33,"y":-27.46888698041358},{"x":34,"y":-30.42963817977184},{"x":35,"y":-33.02677673053368},{"x":36,"y":-35.19108423594349},{"x":37,"y":-36.85880846199973},{"x":38,"y":-37.97312598106436},{"x":39,"y":-38.4855094928632},{"x":40,"y":-38.35697098652554},{"x":41,"y":-37.55915376207599},{"x":42,"y":-36.075248723916864},{"x":43,"y":-33.900713254409155},{"x":44,"y":-31.043774325097246},{"x":45,"y":-27.525701249965433},{"x":46,"y":-23.380837564965887},{"x":47,"y":-18.65638585968261},{"x":48,"y":-13.411943913548441},{"x":49,"y":-7.718795119399007},{"x":50,"y":-1.658960827377841},{"x":51,"y":4.675973172999066},{"x":52,"y":11.186239380566407},{"x":53,"y":17.76545966766453},{"x":54,"y":24.30237998415335},{"x":55,"y":30.68274044500171},{"x":56,"y":36.79124952825219},{"x":57,"y":42.513628592883784},{"x":58,"y":47.73869098266732},{"x":59,"y":52.36041865606044},{"x":60,"y":56.279998606484334},{"x":61,"y":59.40778133365282},{"x":62,"y":61.66512430489292},{"x":63,"y":62.986084703416296},{"x":64,"y":63.318927783896434},{"x":65,"y":62.62741981802723},{"x":66,"y":60.89187787579645},{"x":67,"y":58.109952502618135},{"x":68,"y":54.29712365839734},{"x":69,"y":49.48689501270645},{"x":70,"y":43.73067676279347},{"x":71,"y":37.09735247326346},{"x":72,"y":29.672530937406474},{"x":73,"y":21.557489635546766},{"x":74,"y":12.867821918152083},{"x":75,"y":3.7318054725808962},{"x":76,"y":-5.711485155097507},{"x":77,"y":-15.314294312612187},{"x":78,"y":-24.922497102537346},{"x":79,"y":-34.37807117956671},{"x":80,"y":-43.52168887114958},{"x":81,"y":-52.19538720246132},{"x":82,"y":-60.24527129319323},{"x":83,"y":-67.52420521982346},{"x":84,"y":-73.89444383762029},{"x":85,"y":-79.23015925339304},{"x":86,"y":-83.41981664117836},{"x":87,"y":-86.36835589303834},{"x":88,"y":-87.99913817646191},{"x":89,"y":-88.25561979528204},{"x":90,"y":-87.10271977601353},{"x":91,"y":-84.52785226686207},{"x":92,"y":-80.54160007133542},{"x":93,"y":-75.17801136064838},{"x":94,"y":-68.49450772775398},{"x":95,"y":-60.57139816165327},{"x":96,"y":-51.51100012804176},{"x":97,"y":-41.43637563109006},{"x":98,"y":-30.489696788150475},{"x":99,"y":-18.830261960424373},{"x":100,"y":-6.632189735120068},{"x":101,"y":5.9181760616651635},{"x":102,"y":18.625111732375668},{"x":103,"y":31.28656602948905},{"x":104,"y":43.697371829970656},{"x":105,"y":55.65256612908709},{"x":106,"y":66.9507646981333},{"x":107,"y":77.39753599489968},{"x":108,"y":86.80871806757506},{"x":109,"y":95.01362227890034},{"x":110,"y":101.85806870894899},{"x":111,"y":107.20720006728094},{"x":112,"y":110.94802383782547},{"x":113,"y":112.99163615635571},{"x":114,"y":113.27508552913494},{"x":115,"y":111.76283987591019},{"x":116,"y":108.44782644086322},{"x":117,"y":103.35202076885345},{"x":118,"y":96.52656808765391},{"x":119,"y":88.05142795675411},{"x":120,"y":78.03454081885403},{"x":121,"y":66.61052299482022},{"x":122,"y":53.93890456633781},{"x":123,"y":40.201932360935686},{"x":124,"y":25.60196776028678},{"x":125,"y":10.358516166324778},{"x":126,"y":-5.29506844257394},{"x":127,"y":-21.115154467537888},{"x":128,"y":-36.85162453312836},{"x":129,"y":-52.25182920399056},{"x":130,"y":-67.06464008635422},{"x":131,"y":-81.04453734134597},{"x":132,"y":-93.95566519272424},{"x":133,"y":-105.5757886448052},{"x":134,"y":-115.70008535625935},{"x":135,"y":-124.14470844339701},{"x":136,"y":-130.75005889561973},{"x":137,"y":-135.3837102408835},{"x":138,"y":-137.94293304757198},{"x":139,"y":-138.3567727213506},{"x":140,"y":-136.58764076554206},{"x":141,"y":-132.63238712069136},{"x":142,"y":-126.52282926932918},{"x":143,"y":-118.32572235998448},{"x":144,"y":-108.14216353512137},{"x":145,"y":-96.10643279827529},{"x":146,"y":-82.38428197843086},{"x":147,"y":-67.17069249398737},{"x":148,"y":-50.68713153350265},{"x":149,"y":-33.17834480691393},{"x":150,"y":-14.908732034827226},{"x":151,"y":3.84164130251766},{"x":152,"y":22.781335868768757},{"x":153,"y":41.61206827754107},{"x":154,"y":60.0334083959423},{"x":155,"y":77.7475701795151},{"x":156,"y":94.46421967625777},{"x":157,"y":109.90522265769964},{"x":158,"y":123.80925440458016},{"x":159,"y":135.93619550604276},{"x":160,"y":146.07124011642043},{"x":161,"y":154.02864692408403},{"x":162,"y":159.6550680735494},{"x":163,"y":162.83239737645664},{"x":164,"y":163.48008626172307},{"x":165,"y":161.55688394513035},{"x":166,"y":157.06196712284455},{"x":167,"y":150.03543397668653},{"x":168,"y":140.5581472740574},{"x":169,"y":128.75092169513445},{"x":170,"y":114.77306105977617},{"x":171,"y":98.82026168725702},{"x":172,"y":81.12190853220174},{"x":173,"y":61.93780082936108},{"x":174,"y":41.554353581147396},{"x":175,"y":20.280330174397882},{"x":176,"y":-1.5578304351110823},{"x":177,"y":-23.62102132056286},{"x":178,"y":-45.56273317034128},{"x":179,"y":-67.03449610162},{"x":180,"y":-87.69141224289172},{"x":181,"y":-107.19769127160066},{"x":182,"y":-125.23210013101006},{"x":183,"y":-141.49323861110608},{"x":184,"y":-155.70455436823138},{"x":185,"y":-167.61901426067462},{"x":186,"y":-177.02335355299775},{"x":187,"y":-183.74183052822707},{"x":188,"y":-187.6394212601265},{"x":189,"y":-188.6243976329385},{"x":190,"y":-186.65024102940043},{"x":191,"y":-181.71685429842282},{"x":192,"y":-173.87104550527178},{"x":193,"y":-163.20626839039284},{"x":194,"y":-149.86161623895748},{"x":195,"y":-134.02007780528277},{"x":196,"y":-115.90607585356437},{"x":197,"y":-95.78232057663605},{"x":198,"y":-73.94602144725472},{"x":199,"y":-50.72451175609873},{"x":200,"y":-26.470350019554605}]},"encoding":{"x":{"field":"x","type":"quantitative"},"y":{"field":"y","stack":true,"type":"quantitative"}},"mark":{"fillOpacity":0.3,"line":false,"type":"area"},"params":[{"name":"_overview","select":{"encodings":["x"],"type":"interval"}}]},{"__tucan__":{"types":{"x":"quantitative","y":"quantitative"}},"data":{"values":[{"x":0,"y":0.0},{"x":1,"y":0.12467473338522769},{"x":2,"y":0.4948079185090459},{"x":3,"y":1.0988175872581427},{"x":4,"y":1.917702154416812},{"x":5,"y":2.9254863647023113},{"x":6,"y":4.089832560140005},{"x":7,"y":5.37280451565219},{"x":8,"y":6.731767878463172},{"x":9,"y":8.120408346891857},{"x":10,"y":9.489846193555863},{"x":11,"y":10.789823627254712},{"x":12,"y":11.969939839248653},{"x":13,"y":12.980907427017812},{"x":14,"y":13.775803256235116},{"x":15,"y":14.311286724145408},{"x":16,"y":14.548758829210907},{"x":17,"y":14.455436426913684},{"x":18,"y":14.005317543982581},{"x":19,"y":13.180015607112164},{"x":20,"y":11.969442882079129},{"x":21,"y":10.372326270811874},{"x":22,"y":8.396541825151298},{"x":23,"y":6.059257847358679},{"x":24,"y":3.386880193436813},{"x":25,"y":0.41479730573369766},{"x":26,"y":-2.813073497782818},{"x":27,"y":-6.244932934854589},{"x":28,"y":-9.821930375309355},{"x":29,"y":-13.479164852916659},{"x":30,"y":-17.146839562270312},{"x":31,"y":-20.751549613369818},{"x":32,"y":-24.217679849853706},{"x":33,"y":-27.46888698041358},{"x":34,"y":-30.42963817977184},{"x":35,"y":-33.02677673053368},{"x":36,"y":-35.19108423594349},{"x":37,"y":-36.85880846199973},{"x":38,"y":-37.97312598106436},{"x":39,"y":-38.4855094928632},{"x":40,"y":-38.35697098652554},{"x":41,"y":-37.55915376207599},{"x":42,"y":-36.075248723916864},{"x":43,"y":-33.900713254409155},{"x":44,"y":-31.043774325097246},{"x":45,"y":-27.525701249965433},{"x":46,"y":-23.380837564965887},{"x":47,"y":-18.65638585968261},{"x":48,"y":-13.411943913548441},{"x":49,"y":-7.718795119399007},{"x":50,"y":-1.658960827377841},{"x":51,"y":4.675973172999066},{"x":52,"y":11.186239380566407},{"x":53,"y":17.76545966766453},{"x":54,"y":24.30237998415335},{"x":55,"y":30.68274044500171},{"x":56,"y":36.79124952825219},{"x":57,"y":42.513628592883784},{"x":58,"y":47.73869098266732},{"x":59,"y":52.36041865606044},{"x":60,"y":56.279998606484334},{"x":61,"y":59.40778133365282},{"x":62,"y":61.66512430489292},{"x":63,"y":62.986084703416296},{"x":64,"y":63.318927783896434},{"x":65,"y":62.62741981802723},{"x":66,"y":60.89187787579645},{"x":67,"y":58.109952502618135},{"x":68,"y":54.29712365839734},{"x":69,"y":49.48689501270645},{"x":70,"y":43.73067676279347},{"x":71,"y":37.09735247326346},{"x":72,"y":29.672530937406474},{"x":73,"y":21.557489635546766},{"x":74,"y":12.867821918152083},{"x":75,"y":3.7318054725808962},{"x":76,"y":-5.711485155097507},{"x":77,"y":-15.314294312612187},{"x":78,"y":-24.922497102537346},{"x":79,"y":-34.37807117956671},{"x":80,"y":-43.52168887114958},{"x":81,"y":-52.19538720246132},{"x":82,"y":-60.24527129319323},{"x":83,"y":-67.52420521982346},{"x":84,"y":-73.89444383762029},{"x":85,"y":-79.23015925339304},{"x":86,"y":-83.41981664117836},{"x":87,"y":-86.36835589303834},{"x":88,"y":-87.99913817646191},{"x":89,"y":-88.25561979528204},{"x":90,"y":-87.10271977601353},{"x":91,"y":-84.52785226686207},{"x":92,"y":-80.54160007133542},{"x":93,"y":-75.17801136064838},{"x":94,"y":-68.49450772775398},{"x":95,"y":-60.57139816165327},{"x":96,"y":-51.51100012804176},{"x":97,"y":-41.43637563109006},{"x":98,"y":-30.489696788150475},{"x":99,"y":-18.830261960424373},{"x":100,"y":-6.632189735120068},{"x":101,"y":5.9181760616651635},{"x":102,"y":18.625111732375668},{"x":103,"y":31.28656602948905},{"x":104,"y":43.697371829970656},{"x":105,"y":55.65256612908709},{"x":106,"y":66.9507646981333},{"x":107,"y":77.39753599489968},{"x":108,"y":86.80871806757506},{"x":109,"y":95.01362227890034},{"x":110,"y":101.85806870894899},{"x":111,"y":107.20720006728094},{"x":112,"y":110.94802383782547},{"x":113,"y":112.99163615635571},{"x":114,"y":113.27508552913494},{"x":115,"y":111.76283987591019},{"x":116,"y":108.44782644086322},{"x":117,"y":103.35202076885345},{"x":118,"y":96.52656808765391},{"x":119,"y":88.05142795675411},{"x":120,"y":78.03454081885403},{"x":121,"y":66.61052299482022},{"x":122,"y":53.93890456633781},{"x":123,"y":40.201932360935686},{"x":124,"y":25.60196776028678},{"x":125,"y":10.358516166324778},{"x":126,"y":-5.29506844257394},{"x":127,"y":-21.115154467537888},{"x":128,"y":-36.85162453312836},{"x":129,"y":-52.25182920399056},{"x":130,"y":-67.06464008635422},{"x":131,"y":-81.04453734134597},{"x":132,"y":-93.95566519272424},{"x":133,"y":-105.5757886448052},{"x":134,"y":-115.70008535625935},{"x":135,"y":-124.14470844339701},{"x":136,"y":-130.75005889561973},{"x":137,"y":-135.3837102408835},{"x":138,"y":-137.94293304757198},{"x":139,"y":-138.3567727213506},{"x":140,"y":-136.58764076554206},{"x":141,"y":-132.63238712069136},{"x":142,"y":-126.52282926932918},{"x":143,"y":-118.32572235998448},{"x":144,"y":-108.14216353512137},{"x":145,"y":-96.10643279827529},{"x":146,"y":-82.38428197843086},{"x":147,"y":-67.17069249398737},{"x":148,"y":-50.68713153350265},{"x":149,"y":-33.17834480691393},{"x":150,"y":-14.908732034827226},{"x":151,"y":3.84164130251766},{"x":152,"y":22.781335868768757},{"x":153,"y":41.61206827754107},{"x":154,"y":60.0334083959423},{"x":155,"y":77.7475701795151},{"x":156,"y":94.46421967625777},{"x":157,"y":109.90522265769964},{"x":158,"y":123.80925440458016},{"x":159,"y":135.93619550604276},{"x":160,"y":146.07124011642043},{"x":161,"y":154.02864692408403},{"x":162,"y":159.6550680735494},{"x":163,"y":162.83239737645664},{"x":164,"y":163.48008626172307},{"x":165,"y":161.55688394513035},{"x":166,"y":157.06196712284455},{"x":167,"y":150.03543397668653},{"x":168,"y":140.5581472740574},{"x":169,"y":128.75092169513445},{"x":170,"y":114.77306105977617},{"x":171,"y":98.82026168725702},{"x":172,"y":81.12190853220174},{"x":173,"y":61.93780082936108},{"x":174,"y":41.554353581147396},{"x":175,"y":20.280330174397882},{"x":176,"y":-1.5578304351110823},{"x":177,"y":-23.62102132056286},{"x":178,"y":-45.56273317034128},{"x":179,"y":-67.03449610162},{"x":180,"y":-87.69141224289172},{"x":181,"y":-107.19769127160066},{"x":182,"y":-125.23210013101006},{"x":183,"y":-141.49323861110608},{"x":184,"y":-155.70455436823138},{"x":185,"y":-167.61901426067462},{"x":186,"y":-177.02335355299775},{"x":187,"y":-183.74183052822707},{"x":188,"y":-187.6394212601265},{"x":189,"y":-188.6243976329385},{"x":190,"y":-186.65024102940043},{"x":191,"y":-181.71685429842282},{"x":192,"y":-173.87104550527178},{"x":193,"y":-163.20626839039284},{"x":194,"y":-149.86161623895748},{"x":195,"y":-134.02007780528277},{"x":196,"y":-115.90607585356437},{"x":197,"y":-95.78232057663605},{"x":198,"y":-73.94602144725472},{"x":199,"y":-50.72451175609873},{"x":200,"y":-26.470350019554605}]},"encoding":{"x":{"field":"x","type":"quantitative"},"y":{"field":"y","type":"quantitative"}},"mark":{"fillOpacity":1,"type":"line"}}],"width":500}]}

@spec slider(vl :: VegaLite.t(), field :: String.t(), opts :: keyword()) ::
  VegaLite.t()

Adds a slider that filters the data of the plot by the value of a numeric field.

Moving the slider updates the plot, e.g. to show the data of a single year. The slider is drawn below the plot.

The rows are filtered before any other transform of the plot, so aggregations, e.g. of a histogram, are computed on the filtered rows. Plots whose layers have their own data are not filtered.

Options

• :min - The minimum value of the slider. If not set it is the minimum value of the field, which is possible only if the data are passed inline.

• :max - The maximum value of the slider. If not set it is the maximum value of the field, which is possible only if the data are passed inline.

• :step - The step of the slider. The default value is 1.

• :value - The initial value of the slider. Defaults to the minimum value.

• :mode - How the data are filtered, :equal shows only the rows with the selected value, :up_to shows the rows up to and including the selected value. The default value is :equal.

• :label (String.t/0) - The label of the slider. Defaults to the field.

Examples

The famous Gapminder chart, move the slider to see how the fertility and the life expectancy of the countries changed over the years:

"https://vega.github.io/vega-datasets/data/gapminder.json"
|> Tucan.bubble("fertility", "life_expect", "pop", color_by: "cluster", width: 400)
|> Tucan.Interactive.slider("year", min: 1955, max: 2005, step: 5)
|> Tucan.Scale.set_x_domain(0, 9)
|> Tucan.Scale.set_y_domain(20, 85)

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/vega-datasets/data/gapminder.json"},"encoding":{"color":{"field":"cluster","type":"nominal"},"size":{"field":"pop","type":"quantitative"},"x":{"field":"fertility","scale":{"domain":[0,9],"zero":false},"type":"quantitative"},"y":{"field":"life_expect","scale":{"domain":[20,85],"zero":false},"type":"quantitative"}},"mark":"circle","params":[{"bind":{"input":"range","max":2005,"min":1955,"name":"year ","step":5},"name":"slider_year","value":1955}],"transform":[{"filter":"datum[\"year\"] == slider_year"}],"width":400}

Showing all the data up to the selected value:

data = for x <- 0..100, do: %{x: x, y: :math.sin(x / 10)}

Tucan.lineplot(data, "x", "y", width: 400)
|> Tucan.Interactive.slider("x", mode: :up_to, value: 50)
|> Tucan.Scale.set_x_domain(0, 100)

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","__tucan__":{"types":{"x":"quantitative","y":"quantitative"}},"data":{"values":[{"x":0,"y":0.0},{"x":1,"y":0.09983341664682815},{"x":2,"y":0.19866933079506122},{"x":3,"y":0.29552020666133955},{"x":4,"y":0.3894183423086505},{"x":5,"y":0.479425538604203},{"x":6,"y":0.5646424733950354},{"x":7,"y":0.644217687237691},{"x":8,"y":0.7173560908995228},{"x":9,"y":0.7833269096274834},{"x":10,"y":0.8414709848078965},{"x":11,"y":0.8912073600614354},{"x":12,"y":0.9320390859672263},{"x":13,"y":0.963558185417193},{"x":14,"y":0.9854497299884601},{"x":15,"y":0.9974949866040544},{"x":16,"y":0.9995736030415051},{"x":17,"y":0.9916648104524686},{"x":18,"y":0.9738476308781951},{"x":19,"y":0.9463000876874145},{"x":20,"y":0.9092974268256817},{"x":21,"y":0.8632093666488737},{"x":22,"y":0.8084964038195901},{"x":23,"y":0.7457052121767204},{"x":24,"y":0.6754631805511511},{"x":25,"y":0.5984721441039564},{"x":26,"y":0.5155013718214642},{"x":27,"y":0.4273798802338298},{"x":28,"y":0.3349881501559051},{"x":29,"y":0.23924932921398243},{"x":30,"y":0.1411200080598672},{"x":31,"y":0.04158066243329049},{"x":32,"y":-0.058374143427580086},{"x":33,"y":-0.1577456941432482},{"x":34,"y":-0.2555411020268312},{"x":35,"y":-0.35078322768961984},{"x":36,"y":-0.44252044329485246},{"x":37,"y":-0.5298361409084934},{"x":38,"y":-0.6118578909427189},{"x":39,"y":-0.6877661591839738},{"x":40,"y":-0.7568024953079283},{"x":41,"y":-0.8182771110644103},{"x":42,"y":-0.8715757724135882},{"x":43,"y":-0.9161659367494549},{"x":44,"y":-0.9516020738895161},{"x":45,"y":-0.977530117665097},{"x":46,"y":-0.9936910036334644},{"x":47,"y":-0.9999232575641008},{"x":48,"y":-0.9961646088358407},{"x":49,"y":-0.9824526126243325},{"x":50,"y":-0.9589242746631385},{"x":51,"y":-0.9258146823277325},{"x":52,"y":-0.8834546557201531},{"x":53,"y":-0.8322674422239013},{"x":54,"y":-0.7727644875559871},{"x":55,"y":-0.7055403255703919},{"x":56,"y":-0.6312666378723216},{"x":57,"y":-0.5506855425976376},{"x":58,"y":-0.46460217941375737},{"x":59,"y":-0.373876664830236},{"x":60,"y":-0.27941549819892586},{"x":61,"y":-0.18216250427209588},{"x":62,"y":-0.0830894028174964},{"x":63,"y":0.016813900484349713},{"x":64,"y":0.11654920485049364},{"x":65,"y":0.21511998808781552},{"x":66,"y":0.31154136351337786},{"x":67,"y":0.4048499206165983},{"x":68,"y":0.49411335113860816},{"x":69,"y":0.5784397643882002},{"x":70,"y":0.6569865987187891},{"x":71,"y":0.7289690401258759},{"x":72,"y":0.7936678638491531},{"x":73,"y":0.8504366206285644},{"x":74,"y":0.8987080958116269},{"x":75,"y":0.9379999767747389},{"x":76,"y":0.9679196720314863},{"x":77,"y":0.9881682338770004},{"x":78,"y":0.998543345374605},{"x":79,"y":0.998941341839772},{"x":80,"y":0.9893582466233818},{"x":81,"y":0.9698898108450863},{"x":82,"y":0.9407305566797731},{"x":83,"y":0.9021718337562934},{"x":84,"y":0.8545989080882804},{"x":85,"y":0.7984871126234903},{"x":86,"y":0.7343970978741134},{"x":87,"y":0.6629692300821833},{"x":88,"y":0.5849171928917617},{"x":89,"y":0.5010208564578846},{"x":90,"y":0.4121184852417566},{"x":91,"y":0.3190983623493521},{"x":92,"y":0.22288991410024764},{"x":93,"y":0.1244544235070617},{"x":94,"y":0.024775425453357765},{"x":95,"y":-0.0751511204618093},{"x":96,"y":-0.17432678122297965},{"x":97,"y":-0.27176062641094245},{"x":98,"y":-0.36647912925192844},{"x":99,"y":-0.4575358937753214},{"x":100,"y":-0.5440211108893698}]},"encoding":{"x":{"field":"x","scale":{"domain":[0,100]},"type":"quantitative"},"y":{"field":"y","type":"quantitative"}},"mark":{"fillOpacity":1,"type":"line"},"params":[{"bind":{"input":"range","max":100,"min":0,"name":"x ","step":1},"name":"slider_x","value":50}],"transform":[{"filter":"datum[\"x\"] <= slider_x"}],"width":400}