-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: José Valim <jose.valim@gmail.com>
- Loading branch information
1 parent
4f9b9c3
commit 518d1d1
Showing
4 changed files
with
807 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,265 @@ | ||
# VegaLite Data | ||
|
||
```elixir | ||
Mix.install([ | ||
{:explorer, "~> 0.6.1"}, | ||
{:kino, "~> 0.10.0"}, | ||
{:vega_lite, | ||
git: "https://github.com/cristineguadelupe/vega_lite", branch: "cg-stats", override: true}, | ||
{:kino_vega_lite, "~> 0.1.9"} | ||
]) | ||
``` | ||
|
||
## Introduction | ||
|
||
The `VegaLite.Data` module is designed to provide a shorthand API to plot commonly used charts and high-level abstractions for specialized plots. | ||
|
||
The API can be combined with the main `VegaLite` module at any level and at any point, providing flexibility to achieve the same results in a more concise way without compromising expressiveness. | ||
|
||
Throughout this guide, we will look at how to use the API alone, in combination with the `VegaLite` module, and also show some comparisons between all the possible paths to achieve the same plotting results. | ||
|
||
**Limitations**: `VegaLite.Data` relies on internal type inference, and although all options may be overridden, only data that implements the `Table.Reader` protocol is supported. | ||
|
||
For meaningful examples, we will use the *fuels* dataset directly from `Explorer` | ||
|
||
```elixir | ||
alias Explorer.DataFrame, as: DF | ||
alias VegaLite, as: Vl | ||
alias VegaLite.Data | ||
|
||
fuels = Explorer.Datasets.fossil_fuels() | ||
|
||
data = [ | ||
%{"category" => "A", "score" => 28}, | ||
%{"category" => "B", "score" => 50}, | ||
%{"category" => "C", "score" => 34}, | ||
%{"category" => "D", "score" => 42}, | ||
%{"category" => "E", "score" => 39} | ||
] | ||
``` | ||
|
||
## Chart - the shorthand api | ||
|
||
`VegaLite.Data.chart/3` and `VegaLite.Data.chart/4` are the shorthand API. We will use these functions to get quick and concise plots. It's shine for plots that don't require a lot of configuration or customization. | ||
|
||
`VegaLite.Data.chart/3` takes 3 arguments: the data, the mark and a list of fields to be encoded while `VegaLite.Data.chart/4` works similarly, but takes a valid `VegaLite` specification as the first argument. | ||
|
||
```elixir | ||
# A simple bar plot | ||
Vl.new() | ||
|> Vl.data_from_values(data) | ||
|> Vl.mark(:bar) | ||
|> Vl.encode_field(:y, "score", type: :quantitative) | ||
|> Vl.encode_field(:x, "category", type: :nominal) | ||
``` | ||
|
||
```elixir | ||
# The same chart with the shorthand api | ||
Data.chart(data, :bar, x: "category", y: "score") | ||
``` | ||
|
||
Plotting a simple chart is a breeze! As we can see from the comparison above, the code becomes much leaner and handleable. However, the API also accepts a list of options for each argument, allowing more complex results. | ||
|
||
```elixir | ||
# A line plot with point: true without the shorthand api | ||
Vl.new() | ||
|> Vl.data_from_values(fuels, only: ["total", "solid_fuel"]) | ||
|> Vl.mark(:line, point: true) | ||
|> Vl.encode_field(:x, "total", type: :quantitative) | ||
|> Vl.encode_field(:y, "solid_fuel", type: :quantitative) | ||
``` | ||
|
||
```elixir | ||
# A line plot with point: true using the shorthand api | ||
Data.chart(fuels, [type: :line, point: true], x: "total", y: "solid_fuel") | ||
``` | ||
|
||
Now let's see a bit of iteroperability between the api and the main module. We'll plot the same line chart but now with a title and a custom width. | ||
|
||
```elixir | ||
# Without the shorthand api | ||
Vl.new(title: "Fuels", width: 400) | ||
|> Vl.data_from_values(fuels, only: ["total", "solid_fuel"]) | ||
|> Vl.mark(:line, point: true) | ||
|> Vl.encode_field(:x, "total", type: :quantitative) | ||
|> Vl.encode_field(:y, "solid_fuel", type: :quantitative) | ||
``` | ||
|
||
```elixir | ||
# With the shorthand api | ||
Vl.new(title: "Fuels", width: 400) | ||
|> Data.chart(fuels, [type: :line, point: true], x: "total", y: "solid_fuel") | ||
``` | ||
|
||
If a channel requires more configuration, the flexibility of the API comes into play. | ||
|
||
```elixir | ||
Vl.new(width: 500, height: 300, title: "Fuels") | ||
|> Vl.data_from_values(fuels, only: ["total", "solid_fuel"]) | ||
|> Vl.mark(:point) | ||
|> Vl.encode_field(:x, "total", type: :quantitative) | ||
|> Vl.encode_field(:y, "solid_fuel", type: :quantitative) | ||
|> Vl.encode_field(:color, "total", type: :quantitative, scale: [scheme: "category10"]) | ||
``` | ||
|
||
In the example above, we have a color channel that requires more customization. While it's possible to get the exact same plot using only the shorthand API, the expressiveness may be sacrificed. It's precisely in these cases that using the API together with the main module will probably result in more readable code. Let's take a look and compare the possible combinations between the API and the `VegaLite` module. | ||
|
||
```elixir | ||
# Using mainly the shorthand api | ||
Vl.new(width: 500, height: 300, title: "Combined") | ||
|> Data.chart(fuels, :point, | ||
x: "total", | ||
y: "solid_fuel", | ||
color: [field: "total", type: :quantitative, scale: [scheme: "category10"]] | ||
) | ||
``` | ||
|
||
```elixir | ||
# Piping the shorthand api into a enconde_field | ||
Vl.new(width: 500, height: 300, title: "Fuels") | ||
|> Data.chart(fuels, :point, x: "total", y: "solid_fuel") | ||
|> Vl.encode_field(:color, "total", type: :quantitative, scale: [scheme: "category10"]) | ||
``` | ||
|
||
As we can see, the API is flexible enough to allow it to be piped from `VegaLite`, piped to `VegaLite` or both! In principle, you are free to choose the code that best suits your needs, ideally aiming for a balance between conciseness and expressiveness. | ||
|
||
## Specialized plots | ||
|
||
Specialized plots provide high-level abstractions for commonly used complex charts. | ||
|
||
### Heatmap | ||
|
||
Plotting heatmaps directly from VegaLite requires a lot of code. | ||
|
||
For a more concrete example, we will use precomputed data from the correlation matrix of the wine dataset. | ||
|
||
<!-- livebook:{"disable_formatting":true} --> | ||
|
||
```elixir | ||
corr_to_plot = %{ | ||
"corr_val" => [1.0, -0.02, 0.29, 0.09, 0.02, -0.05, 0.09, 0.27, -0.43, -0.02, | ||
-0.12, -0.11, -0.02, 1.0, -0.15, 0.06, 0.07, -0.1, 0.09, 0.03, -0.03, -0.04, | ||
0.07, -0.19, 0.29, -0.15, 1.0, 0.09, 0.11, 0.09, 0.12, 0.15, -0.16, 0.06, | ||
-0.08, -0.01, 0.09, 0.06, 0.09, 1.0, 0.09, 0.3, 0.4, 0.84, -0.19, -0.03, | ||
-0.45, -0.1, 0.02, 0.07, 0.11, 0.09, 1.0, 0.1, 0.2, 0.26, -0.09, 0.02, -0.36, | ||
-0.21, -0.05, -0.1, 0.09, 0.3, 0.1, 1.0, 0.62, 0.29, 0.0, 0.06, -0.25, 0.01, | ||
0.09, 0.09, 0.12, 0.4, 0.2, 0.62, 1.0, 0.53, 0.0, 0.13, -0.45, -0.17, 0.27, | ||
0.03, 0.15, 0.84, 0.26, 0.29, 0.53, 1.0, -0.09, 0.07, -0.78, -0.31, -0.43, | ||
-0.03, -0.16, -0.19, -0.09, 0.0, 0.0, -0.09, 1.0, 0.16, 0.12, 0.1, -0.02, | ||
-0.04, 0.06, -0.03, 0.02, 0.06, 0.13, 0.07, 0.16, 1.0, -0.02, 0.05, -0.12, | ||
0.07, -0.08, -0.45, -0.36, -0.25, -0.45, -0.78, 0.12, -0.02, 1.0, 0.44, | ||
-0.11, -0.19, -0.01, -0.1, -0.21, 0.01, -0.17, -0.31, 0.1, 0.05, 0.44, 1.0], | ||
"x" => ["fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality", | ||
"fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality", | ||
"fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality", | ||
"fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality", | ||
"fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality", | ||
"fixed acidity", "volatile acidity", "citric acid", "residual sugar", | ||
"chlorides", "free sulfur dioxide", "total sulfur dioxide", "density", "pH", | ||
"sulphates", "alcohol", "quality", "fixed acidity", "volatile acidity", | ||
"citric acid", "residual sugar", "chlorides", "free sulfur dioxide", | ||
"total sulfur dioxide", "density", "pH", "sulphates", "alcohol", "quality"], | ||
"y" => ["fixed acidity", "fixed acidity", "fixed acidity", "fixed acidity", | ||
"fixed acidity", "fixed acidity", "fixed acidity", "fixed acidity", | ||
"fixed acidity", "fixed acidity", "fixed acidity", "fixed acidity", | ||
"volatile acidity", "volatile acidity", "volatile acidity", | ||
"volatile acidity", "volatile acidity", "volatile acidity", | ||
"volatile acidity", "volatile acidity", "volatile acidity", | ||
"volatile acidity", "volatile acidity", "volatile acidity", "citric acid", | ||
"citric acid", "citric acid", "citric acid", "citric acid", "citric acid", | ||
"citric acid", "citric acid", "citric acid", "citric acid", "citric acid", | ||
"citric acid", "residual sugar", "residual sugar", "residual sugar", | ||
"residual sugar", "residual sugar", "residual sugar", "residual sugar", | ||
"residual sugar", "residual sugar", "residual sugar", "residual sugar", | ||
"residual sugar", "chlorides", "chlorides", "chlorides", "chlorides", | ||
"chlorides", "chlorides", "chlorides", "chlorides", "chlorides", "chlorides", | ||
"chlorides", "chlorides", "free sulfur dioxide", "free sulfur dioxide", | ||
"free sulfur dioxide", "free sulfur dioxide", "free sulfur dioxide", | ||
"free sulfur dioxide", "free sulfur dioxide", "free sulfur dioxide", | ||
"free sulfur dioxide", "free sulfur dioxide", "free sulfur dioxide", | ||
"free sulfur dioxide", "total sulfur dioxide", "total sulfur dioxide", | ||
"total sulfur dioxide", "total sulfur dioxide", "total sulfur dioxide", | ||
"total sulfur dioxide", "total sulfur dioxide", "total sulfur dioxide", | ||
"total sulfur dioxide", "total sulfur dioxide", "total sulfur dioxide", | ||
"total sulfur dioxide", "density", "density", "density", "density", | ||
"density", "density", "density", "density", "density", "density", "density", | ||
"density", "pH", "pH", "pH", "pH", "pH", "pH", "pH", "pH", "pH", "pH", "pH", | ||
"pH", "sulphates", "sulphates", "sulphates", "sulphates", "sulphates", | ||
"sulphates", "sulphates", "sulphates", "sulphates", "sulphates", "sulphates", | ||
"sulphates", "alcohol", "alcohol", "alcohol", "alcohol", "alcohol", | ||
"alcohol", "alcohol", "alcohol", "alcohol", "alcohol", "alcohol", "alcohol", | ||
"quality", "quality", "quality", "quality", "quality", "quality", "quality", | ||
"quality", "quality", "quality", "quality", "quality"] | ||
} | ||
|> Explorer.DataFrame.new() | ||
``` | ||
|
||
```elixir | ||
Vl.new(title: "Correlation matrix", width: 600, height: 600) | ||
|> Vl.layers([ | ||
Vl.new() | ||
|> Vl.data_from_values(corr_to_plot) | ||
|> Vl.mark(:rect) | ||
|> Vl.encode_field(:x, "x", type: :nominal) | ||
|> Vl.encode_field(:y, "y", type: :nominal) | ||
|> Vl.encode_field(:color, "corr_val", type: :quantitative), | ||
Vl.new() | ||
|> Vl.data_from_values(corr_to_plot) | ||
|> Vl.mark(:text) | ||
|> Vl.encode_field(:x, "x", type: :nominal) | ||
|> Vl.encode_field(:y, "y", type: :nominal) | ||
|> Vl.encode_field(:text, "corr_val", type: :quantitative) | ||
]) | ||
``` | ||
|
||
We can use our already explored shorthand API to simplify it. | ||
|
||
```elixir | ||
Vl.new(title: "Correlation matrix", width: 600, height: 600) | ||
|> Vl.layers([ | ||
Data.chart(corr_to_plot, :rect, | ||
x: [field: "x", type: :nominal], | ||
y: [field: "y", type: :nominal], | ||
color: "corr_val" | ||
), | ||
Data.chart(corr_to_plot, :text, | ||
x: [field: "x", type: :nominal], | ||
y: [field: "y", type: :nominal], | ||
text: "corr_val" | ||
) | ||
]) | ||
``` | ||
|
||
Or we can go even further and use the `VegaLite.Data.heatmap/2` function alone or the `VegaLite.Data.heatmap/3` function in combination with `VegaLite`. | ||
|
||
The specialized plots follow the same principle as the shorthand API, they can be combined with the main module, and each argument can also take a list of options to override the defaults. | ||
|
||
```elixir | ||
Vl.new(title: "Correlation matrix", width: 600, height: 600) | ||
|> Data.heatmap(corr_to_plot, | ||
x: "x", | ||
y: "y", | ||
color: "corr_val", | ||
text: "corr_val" | ||
) | ||
``` |
Oops, something went wrong.