livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-02-20 21:04:17 +08:00
Code Issues Projects Releases Packages Wiki Activity

Mark sections as branching in VegaLite introductory notebook (#1059)

Browse source
This commit is contained in:
Jonatan Kłosko 2022-03-17 23:33:10 +01:00 committed by GitHub
parent b8ba2648b3
commit d72cb5db03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
lib/livebook/notebook/explore/intro_to_vega_lite.livemd
View file

@ -4,11 +4,11 @@
We need two libraries for plotting in Livebook:
* The [`vega_lite`](https://github.com/elixir-nx/vega_lite)
package allows us to define our graph specifications
* The [`vega_lite`](https://github.com/elixir-nx/vega_lite)
package allows us to define our graph specifications
* The [`kino`](https://github.com/elixir-nx/kino) package
renders our specifications
* The [`kino`](https://github.com/elixir-nx/kino) package
renders our specifications
Let's install them:
@ -26,6 +26,8 @@ so it's useful to alias the module as something shorter.
alias VegaLite, as: Vl
```
<!-- livebook:{"branch_parent_index":0} -->
## Basic concepts
Composing a basic Vega-Lite graphic usually consists of the following steps:
@ -46,6 +48,8 @@ Below you can find a number of example graphics for common use cases.
For a number of plain Vega-Lite examples you can look
[here](https://vega.github.io/vega-lite/examples).
<!-- livebook:{"branch_parent_index":0} -->
## Bar charts
### Simple bar chart
@ -116,6 +120,8 @@ Vl.new(width: [step: 12])
|> Vl.config(view: [stroke: nil])
```
<!-- livebook:{"branch_parent_index":0} -->
## Histograms, density plots and dot plots
### Histogram
@ -232,6 +238,8 @@ Vl.new(title: "Daily max temperatures (C) in Seattle, WA")
|> Vl.config(view: [stroke: nil])
```
<!-- livebook:{"branch_parent_index":0} -->
## Scatter and strip plots
### Scatterplot
@ -278,6 +286,8 @@ Vl.new(width: 400, height: 300)
|> Vl.encode_field(:shape, "Species", type: :nominal)
```
<!-- livebook:{"branch_parent_index":0} -->
## Line charts
### Line chart
@ -343,6 +353,8 @@ Vl.new(width: 300, height: 150)
|> Vl.encode_field(:color, "key", type: :nominal, title: nil)
```
<!-- livebook:{"branch_parent_index":0} -->
## Area charts and streamgraphs
### Area chart
@ -387,6 +399,8 @@ Vl.new(width: 400, height: 300)
|> Vl.encode_field(:color, "series", scale: [scheme: "category20b"])
```
<!-- livebook:{"branch_parent_index":0} -->
## Circular plots
### Pie chart
@ -437,6 +451,8 @@ Vl.new()
|> Vl.config(view: [stroke: nil])
```
<!-- livebook:{"branch_parent_index":0} -->
## Calculations
### Layering rolling averages over raw values
@ -491,6 +507,8 @@ Vl.new(width: 400, height: 300)
])
```
<!-- livebook:{"branch_parent_index":0} -->
## Composite marks
### Error bars showing standard deviation
@ -542,6 +560,8 @@ Vl.new(width: 400, height: 300)
])
```
<!-- livebook:{"branch_parent_index":0} -->
## Box plots
### Box plot with min/max whiskers
@ -559,6 +579,8 @@ Vl.new(width: 400, height: 300)
|> Vl.encode_field(:y, "Body Mass (g)", type: :quantitative, scale: [zero: false])
```
<!-- livebook:{"branch_parent_index":0} -->
## Faceting
### Trellis bar chart
@ -618,6 +640,8 @@ Vl.new(name: "Trellis Barley", height: [step: 12])
|> Vl.encode_field(:color, "year", type: :nominal)
```
<!-- livebook:{"branch_parent_index":0} -->
## Repeated graphics
### Repeated layer
@ -696,6 +720,8 @@ Vl.new()
)
```
<!-- livebook:{"branch_parent_index":0} -->
## Layering
### Layered charts with separate scales
@ -731,6 +757,8 @@ Vl.new(width: 400, height: 300)
|> Vl.resolve(:scale, y: :independent)
```
<!-- livebook:{"branch_parent_index":0} -->
## Concatenation
### Arbitrary charts
@ -759,6 +787,8 @@ Vl.new()
)
```
<!-- livebook:{"branch_parent_index":0} -->
## Maps (geographic displays)
### Projection
@ -805,6 +835,8 @@ Vl.new(width: 500, height: 300)
|> Vl.config(view: [stroke: nil])
```
<!-- livebook:{"branch_parent_index":0} -->
## Interactive graphics
### Overview and detail