Scatter & Strip Plots

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

alias VegaLite, as: Vl

Scatterplot

A scatterplot showing horsepower and miles per gallons for various cars.

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)

1D Strip Plot

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv")
|> Vl.mark(:tick)
|> Vl.encode_field(:x, "precipitation", type: :quantitative)

Strip Plot

Shows the relationship between horsepower and the number of cylinders using tick marks.

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.mark(:tick)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Cylinders", type: :ordinal)

Colored Scatterplot

A scatterplot showing body mass and flipper lengths of penguins.

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/penguins.json")
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Flipper Length (mm)", type: :quantitative, scale: [zero: false])
|> Vl.encode_field(:y, "Body Mass (g)", type: :quantitative, scale: [zero: false])
|> Vl.encode_field(:color, "Species", type: :nominal)
|> Vl.encode_field(:shape, "Species", type: :nominal)

2D Histogram Scatterplot

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/movies.json")
|> Vl.mark(:circle)
|> Vl.encode_field(:x, "IMDB Rating", bin: [maxbins: 10])
|> Vl.encode_field(:y, "Rotten Tomatoes Rating", bin: [maxbins: 10])
|> Vl.encode(:size, aggregate: :count)

Bubble Plot

A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size.

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)
|> Vl.encode_field(:size, "Acceleration", type: :quantitative)

Scatterplot with Null Values in Grey

TODO condition

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/movies.json")
|> Vl.mark(:point)
|> Vl.encode_field(:x, "IMDB Rating", type: :quantitative)
|> Vl.encode_field(:y, "Rotten Tomatoes Rating", type: :quantitative)
|> Vl.encode(:color,
  value: "#aaa",
  condition: [test: "datum['IMDB Rating'] !== null && datum['Rotten Tomatoes Rating'] !== null"]
)
|> Vl.config(mark: [invalid: :null])

Scatterplot with Filled Circles

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.mark(:circle)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)

Bubble Plot (Gapminder)

A bubble plot showing the correlation between health and income for 187 countries in the world (modified from an example in Lisa Charlotte Rost’s blog post ‘One Chart, Twelve Charting Libraries’ –http://lisacharlotterost.github.io/2016/05/17/one-chart-code/).

Vl.new(width: 500, height: 300)
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/gapminder-health-income.csv")
|> Vl.mark(:circle)
|> Vl.encode_field(:y, "health", type: :quantitative, scale: [zero: false], axis: [min_extent: 30])
|> Vl.encode_field(:x, "income", scale: [type: :log])
|> Vl.encode_field(:size, "population", type: :quantitative)
|> Vl.encode(:color, value: "#000")

Bubble Plot (Natural Disasters)

Visualization of global deaths from natural disasters. Copy of chart from Our World in Data.

Vl.new(width: 600, height: 400)
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/disasters.csv")
|> Vl.transform(filter: "datum.Entity !== 'All natural disasters'")
|> Vl.mark(:circle, opacity: 0.8, stroke: "black", stroke_width: 1)
|> Vl.encode_field(:x, "Year", type: :temporal, axis: [grid: false])
|> Vl.encode_field(:y, "Entity", type: :nominal, axis: [title: false])
|> Vl.encode_field(:size, "Deaths", type: :quantitative, scale: [range_max: 5000])
|> Vl.encode_field(:color, "Entity", legend: false)

Section Scatter Plot with Text Marks

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.transform(calculate: "datum.Origin[0]", as: "OriginInitial")
|> Vl.mark(:text)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Miles_per_Gallon", type: :quantitative)
|> Vl.encode_field(:color, "Origin", type: :nominal)
|> Vl.encode_field(:text, "OriginInitial", type: :nominal)

Strip plot with custom axis tick labels

After using the numerical values to calculate the average rating, they are replaced by string labels.

Vl.new()
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/movies.json")
|> Vl.mark(:circle, size: 80)
|> Vl.encode_field(:x, "IMDB Rating",
  aggregate: :mean,
  scale: [domain: [0, 10]],
  title: false,
  axis: [
    label_expr: "datum.label == 0 ? 'Poor' : datum.label == 5 ? 'Neutral' : 'Great'",
    label_flush: false,
    values: [0, 5, 10]
  ]
)
|> Vl.encode_field(:y, "Major Genre", sort: "x", title: false)

Dot Plot with Jittering

Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering).

Vl.new(height: [step: 50])
|> Vl.data_from_url("https://vega.github.io/vega-lite/examples/data/cars.json")
|> Vl.transform(calculate: "random()", as: "random")
|> Vl.mark(:point)
|> Vl.encode_field(:x, "Horsepower", type: :quantitative)
|> Vl.encode_field(:y, "Cylinders", type: :ordinal)
|> Vl.encode_field(:y_offset, "random", type: :quantitative)