Vega lite charts in Elixir Livebook

Questions / Help
1

Hi,

Am using Vega lite library in elixir live book to create a simple charts. Below is what i have written with dummy data.

data2 = [
%{“time” => 1, “value” => 10, “size” => 3},
%{“time” => 2, “value” => 15, “size” => 2},
%{“time” => 3, “value” => 20, “size” => 1}
]

Vl.new()
|> Vl.data_from_values(data2)
|> Vl.encode_field(:x, “time”, axis: [orient: “bottom”])
|> Vl.layers([
Vl.new()
|> Vl.mark(:point, color: “black”)
|> Vl.encode_field(:y, “value”),
Vl.new()
|> Vl.mark(:line, color: “red”)
|> Vl.encode_field(:y, “size”)
])
|> Vl.resolve(:scale, y: :independent)

Processing: vega-lite.PNG…

This always creates x axis at the top whereas i want x axis in bottom and correspondingly both y axis at same scale. May anyone look at this code and suggest what is wrong here?

2

Hi!

Anyone know way the png is still “processing”; or are others seeing it?

3

visualization

I tried your code and indeed the x axis is at the top no matter the configuration used. However I’ve tried to increase the size of the canvas because it was too small and configuring with any size even smaller (10x10) makes the axis go to the bottom
visualization(1)

So for now I would suggest increasing the value of the canvas by using

Vl.new(width: 100, height: 100)
|> ....

visualization(2)

And the full code:

Mix.install([:vega_lite, :jason, :kino])

alias VegaLite, as: Vl

data2 = [
  %{"time" => 1, "value" => 10, "size" => 3},
  %{"time" => 2, "value" => 15, "size" => 2},
  %{"time" => 3, "value" => 20, "size" => 1}
]

Vl.new(
  width: 100,
  height: 100
)
|> Vl.data_from_values(data2)
|> Vl.encode_field(:x, "time")
|> Vl.layers([
  Vl.new()
  |> Vl.mark(:point, color: "black")
  |> Vl.encode_field(:y, "value"),
  Vl.new()
  |> Vl.mark(:line, color: "red")
  |> Vl.encode_field(:y, "size")
])
|> Vl.resolve(:scale, y: :independent)
|> Kino.VegaLite.new()

I think that might be a bug

EDIT:
Reported at livebook-dev/vega_lite

2 Likes
4

Thank you for suggesting the work around :slightly_smiling_face: