Add interactive point selection examples to VegaLite guide (#2612)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
This commit is contained in:
Cristine Guadelupe 2024-12-04 19:46:09 +08:00 committed by GitHub
parent 5e0311beb7
commit ba59baa9fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -998,6 +998,52 @@ Vl.new()
])
```
### Single point
Highlighting a single point by clicking on it.
```elixir
Vl.new(width: 400, height: 300)
|> Vl.data_from_url("https://vega.github.io/editor/data/cars.json")
|> Vl.param("pts", select: :point)
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)
|> Vl.encode(:color,
condition: [
param: "pts",
field: "Cylinders",
type: :ordinal,
scale: [scheme: "yelloworangebrown"]
],
value: :gray
)
|> Vl.encode(:size, condition: [param: "pts", empty: false, value: 200], value: 50)
```
### Multiple points
Highlighting a group of matching points by clicking on one of them.
```elixir
Vl.new(width: 400, height: 300)
|> Vl.data_from_url("https://vega.github.io/editor/data/cars.json")
|> Vl.param("pts", select: [type: :point, fields: ["Cylinders"]])
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)
|> Vl.encode(:color,
condition: [
param: "pts",
field: "Cylinders",
type: :ordinal,
scale: [scheme: "yelloworangebrown"]
],
value: :gray
)
|> Vl.encode(:size, condition: [param: "pts", empty: false, value: 200], value: 50)
```
### Map connections
An interactive visualization of connections between locations on a map.