paulanthonywilson

paulanthonywilson

VegaLite bar charts with non-zero origin

For reasons I’ve been using the VegaLite to produce histograms and I’ve run into problems when I want an origin other than zero. For example, let’s say I’m interested in temperatures around the house in Kelvin.

data = [
  %{location: "Fridge", temp: "277"},
  %{location: "Office", temp: "292"},
  %{location: "Garden", temp: "285"},
  %{location: "Oven", temp: "453"}
]

Everything is fine if I go with the default Y scale.

Vl.new(width: 200, height: 159)
|> Vl.data_from_values(data)
|> Vl.mark(:bar)
|> Vl.encode_field(:x, "location", title: "Location (location, location)", axis: [label_angle: 0])
|> Vl.encode_field(:y, "temp", type: :quantitative, title: "Temperature (Kelvin)")

But my house rarely approaches absolute zero so I’d like to truncate the Y axis. From the VegaLite docs it looks like scale: [domain: [low, high]] should be just the job but the bars still want to start at zero.

Vl.new(width: 200, height: 150)
|> Vl.data_from_values(data)
|> Vl.mark(:bar)
|> Vl.encode_field(:x, "location", title: "Location (location, location)", axis: [label_angle: 0])
|> Vl.encode_field(:y, "temp",
  type: :quantitative,
  title: "Temperature (Kelvin)",
  scale: [domain: [263, 500]]
)

Not pretty. I’ve tried fiddling with things like range but I can’t seem to do anything but occasionally end up with Stranger Things style upside down or compressed chart.

What does seem to help is adding an aggregate value but that seems hacky and impacts things like the toolbar text (which I can’t seem to change through the Elixir).

Vl.new(width: 200, height: 150)
|> Vl.data_from_values(data)
|> Vl.mark(:bar)
|> Vl.encode_field(:x, "location", title: "Location (location, location)", axis: [label_angle: 0])
|> Vl.encode_field(:y, "temp",
  type: :quantitative,
  title: "Temperature (Kelvin)",
  scale: [domain: [263, 500]],
  aggregate: :max
)

Does anyone have any other ideas? (Apart from use Celsius - it’s a placeholder for a different genuine reason to want to truncate the y axis).

Marked As Solved

NickGnd

NickGnd

Hey @paulanthonywilson :wave:
I found this example on vegalite docs

Have you tried to use set the option clip: true ?

Vl.new(width: 200, height: 150)
|> Vl.data_from_values(data)
|> Vl.mark(:bar, clip: true)
|> Vl.encode_field(:x, "location", title: "Location (location, location)", axis: [label_angle: 0])
|> Vl.encode_field(:y, "temp",
  type: :quantitative,
  title: "Temperature (Kelvin)",
  scale: [domain: [263, 500]]
)

Hope it works :crossed_fingers:
Cheers :v:

Also Liked

paulanthonywilson

paulanthonywilson

Nice - that is exactly the right thing. Thank you :blue_heart:

PS -Total aside but LiveBook has been super useful in trying out this stuff

NickGnd

NickGnd

Glad that worked out! :raised_hands:

True, that’s a game changer!

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

We're in Beta

About us Mission Statement