Smile - Statistical Machine Intelligence and Learning Engine

Declarative Data Visualization

In previous section, we show how to visualize data in imperative way. Smile also support data visualization in declarative approach. With smile.plot.vega package, we can create a specification that describes visualizations as mappings from data to properties of graphical marks (e.g., points or bars). The specification is based on Vega-Lite. The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. It then determines properties of these components based on a set of carefully designed rules.

This approach allows specifications to be succinct and expressive, but also provide user control. As Vega-Lite is designed for analysis, it supports data transformations such as aggregation, binning, filtering, sorting, and visual transformations including stacking and faceting. Moreover, Vega-Lite specifications can be composed into layered and multi-view displays, and made interactive with selections.

Vega-Lite website provides detailed documentation on the specification. In the below, we will show how to create a variety of charts through examples.

Bar Charts

Simple Bar Chart


var bar = new View("Simple Bar Plot")
        .description("A simple bar chart with embedded data.")
        .widthStep(30);

bar.data().values("""
        [
          {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
          {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
          {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
        ]""");

bar.mark("bar");
Field x = bar.encode("x", "a").type("ordinal");
x.axis().labelAngle(0);
bar.encode("y", "b").type("quantitative");
bar.show();
            

val bar = VegaLite.view().
  mark("bar").
  heightStep(17).
  x(field = "a", `type` = "ordinal", axis = JsObject("labelAngel" -> JsInt(0))).
  y(field = "b", `type` = "quantitative").
  data(jsan"""
      [
        {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
        {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
        {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
      ]"""
  ).
  description("A simple bar chart with embedded data.")

Aggregate Bar Chart


var bar = new View("Aggregate Bar Plot")
        .description("A bar chart showing the US population distribution of age groups in 2000.")
        .heightStep(20);

bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform().filter("datum.year == 2000");
bar.encode("x", "people").type("quantitative").aggregate("sum").title("population");
bar.encode("y", "age").type("ordinal");
            

val aggregateBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  heightStep(17).
  x(field = "people", `type` = "quantitative", aggregate = "sum", title = "population").
  y(field = "age", `type` = "ordinal").
  transform(json"""{"filter": "datum.year == 2000"}""").
  description("A bar chart showing the US population distribution of age groups in 2000.")

Aggregate Bar Chart (Sorted)


var bar = new View("Sorted Aggregate Bar Plot")
        .description("A bar chart that sorts the y-values by the x-values.")
        .heightStep(20);

bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform().filter("datum.year == 2000");
bar.encode("x", "people").type("quantitative").aggregate("sum").title("population");
bar.encode("y", "age").type("ordinal").sort("-x");
            

val sortedAggregateBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  heightStep(17).
  x(field = "people", `type` = "quantitative", aggregate = "sum", title = "population").
  y(field = "age", `type` = "ordinal", sort = Some("-x")).
  transform(json"""{"filter": "datum.year == 2000"}""").
  description("A bar chart that sorts the y-values by the x-values.")

show(sortedAggregateBar)

Grouped Bar Chart


var bar = new View("Group Bar Plot").widthStep(12);

bar.mark("bar");
bar.viewConfig().stroke("transparent").axis().domainWidth(1);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "gender").type("nominal").title(null);
bar.encode("y", "people").type("quantitative").aggregate("sum").axis().title("population").grid(false);
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
bar.encode("column", "age").type("ordinal").spacing(10);
            

val groupedBar = VegaLite.facet("https://vega.github.io/vega-lite/examples/data/population.json").
  column(field = "age", `type` = "ordinal", spacing = Some(10)).
  mark("bar").
  widthStep(12).
  x(field = "gender", `type` = "nominal", title = null).
  y(field = "people", `type` = "quantitative", aggregate = "sum", axis = json"""{"title": "population", "grid": false}""").
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  ).
  config(json"""{"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}}""")

Stacked Bar Chart


var bar = new View("Stacked Bar Plot");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
bar.encode("x", "date").type("ordinal").timeUnit("month").title("Month of the year");
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "weather").type("nominal")
        .domain("sun", "fog", "drizzle", "rain", "snow")
        .range("#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd")
        .legend().title("Weather type");
            

val stackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark("bar").
  x(field = "date", `type` = "ordinal", timeUnit = "month", title = "Month of the year").
  y(field = null, aggregate = "count", `type` = "quantitative").
  color(field = "weather", `type` = "nominal",
      scale = json"""{
        "domain": ["sun", "fog", "drizzle", "rain", "snow"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      }""",
      legend = JsObject("title" -> JsString("Weather type"))
  )

Stacked Bar Chart with Rounded Corners


var bar = new View("Stacked Bar with Rounded Corner");
bar.mark("bar").cornerRadiusTopLeft(3).cornerRadiusTopRight(3);
bar.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
bar.encode("x", "date").type("ordinal").timeUnit("month").title("Month of the year");
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "weather").type("nominal");
            

val stackedRoundedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark(JsObject("type" -> "bar", "cornerRadiusTopLeft" -> 3, "cornerRadiusTopRight" -> 3)).
  x(field = "date", `type` = "ordinal", timeUnit = "month").
  y(field = null, aggregate = "count", `type` = "quantitative").
  color(field = "weather", `type` = "nominal")

Horizontal Stacked Bar Chart


var bar = new View("Horizontal Stacked Bar");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/barley.json");
bar.encode("x", "yield").type("quantitative").aggregate("sum");
bar.encode("y", "variety").type("nominal");
bar.encode("color", "site").type("nominal");
            

val horizontalStackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/barley.json").
  mark("bar").
  x(field = "yield", `type` = "quantitative", aggregate = "sum").
  y(field = "variety", `type` = "nominal").
  color(field = "site", `type` = "nominal")

Layered Bar Chart


var bar = new View("Layered Bar").widthStep(17);

bar.mark("bar");
bar.background().opacity(0.7);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "age").type("ordinal");
bar.encode("y", "people").type("quantitative").aggregate("sum").title("population").stack(null);
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            

val layeredBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  widthStep(17).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", aggregate = "sum", title = "population", stack = JsNull).
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  opacity(0.7).
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  )

Normalized (Percentage) Stacked Bar Chart


var bar = new View("Normalized (Percentage) Stacked Bar").widthStep(17);

bar.mark("bar");
bar.background().opacity(0.7);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "age").type("ordinal");
bar.encode("y", "people").type("quantitative").aggregate("sum").title("population").stack("normalize");
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            

val normalizedStackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  widthStep(17).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", aggregate = "sum", title = "population", stack = "normalize").
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  )

Gantt Chart


var gantt = new View("Gantt Chart");
gantt.data().values("""
        [
          {"task": "A", "start": 1, "end": 3},
          {"task": "B", "start": 3, "end": 8},
          {"task": "C", "start": 8, "end": 10}
        ]""");

gantt.mark("bar");
gantt.encode("x", "start").type("quantitative");
gantt.encode("x2", "end").type("quantitative");
gantt.encode("y", "task").type("ordinal");
            

val gantt = VegaLite.view().
  mark("bar").
  y(field = "task", `type` = "ordinal").
  x(field = "start", `type` = "quantitative").
  x2(field = "end").
  data(jsan"""
      [
        {"task": "A", "start": 1, "end": 3},
        {"task": "B", "start": 3, "end": 8},
        {"task": "C", "start": 8, "end": 10}
      ]"""
  )

A Bar Chart Encoding Color Names in the Data


var bar = new View("Bar Chart Encoding Color Names in the Data");
bar.data().values("""
        [
          {"color": "red", "b": 28},
          {"color": "green", "b": 55},
          {"color": "blue", "b": 43}
        ]""");

bar.mark("bar");
bar.encode("x", "color").type("nominal");
bar.encode("y", "b").type("quantitative");
bar.encode("color", "color").type("nominal").scale(null);
            

val colorBar = VegaLite.view().
  mark("bar").
  x(field = "color", `type` = "nominal").
  y(field = "b", `type` = "quantitative").
  color(field = "color", `type` = "nominal", scale = JsNull).
  data(jsan"""
      [
        {"color": "red", "b": 28},
        {"color": "green", "b": 55},
        {"color": "blue", "b": 43}
      ]"""
  )

Histograms and Density Plots

Histogram


var bar = new View("Histogram");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
bar.encode("x", "IMDB Rating").type("quantitative").bin(true);
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            

val histogram = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("bar").
  x(field = "IMDB Rating", `type` = "quantitative", bin = Left(true)).
  y(field = null, `type` = "quantitative", aggregate = "count")

Relative Frequency Histogram


var bar = new View("Relative Frequency Histogram");

bar.mark("bar").tooltip(true);
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "bin_Horsepwoer").type("quantitative").bin("binned").title("Horsepower");
bar.encode("x2", "bin_Horsepwoer_end").type("quantitative");
bar.encode("y", "PercentOfTotal").type("quantitative").title("Relative Frequency").axis().format(".1~%");

bar.transform()
        .bin("Horsepower", "bin_Horsepwoer")
        .aggregate("count", null, "Count", "bin_Horsepwoer", "bin_Horsepwoer_end")
        .joinAggregate("sum", "Count", "TotalCount")
        .calculate("datum.Count/datum.TotalCount", "PercentOfTotal");
            

val freqHistogram = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark(JsObject("type" -> "bar", "tooltip" -> true)).
  x(field = "bin_Horsepwoer", `type` = "quantitative", bin = Right(json"""{"binned":true}"""), title = "Horsepower").
  x2(field = "bin_Horsepwoer_end").
  y(field = "PercentOfTotal", `type` = "quantitative", title = "Relative Frequency", axis = json"""{"format": ".1~%"}""").
  transform(jsan"""[
      {
        "bin": true, "field": "Horsepower", "as": "bin_Horsepwoer"
      },
      {
        "aggregate": [{"op": "count", "as": "Count"}],
        "groupby": ["bin_Horsepwoer", "bin_Horsepwoer_end"]
      },
      {
        "joinaggregate": [{"op": "sum", "field": "Count", "as": "TotalCount"}]
      },
      {
        "calculate": "datum.Count/datum.TotalCount", "as": "PercentOfTotal"
      }
    ]"""
  )

2D Histogram Heatmap


var bar = new View("2D Histogram Heatmap").width(300).height(200);
bar.mark("rect");
bar.viewConfig().stroke("transparent");
bar.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
bar.encode("x", "IMDB Rating").type("quantitative").title("IMDB Rating").bin(new BinParams().maxBins(60));
bar.encode("y", "Rotten Tomatoes Rating").type("quantitative").bin(new BinParams().maxBins(40));
bar.encode("color", null).type("quantitative").aggregate("count");
bar.transform().filter(and(valid("IMDB Rating"), valid("Rotten Tomatoes Rating")));
            

val histHeatmap = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("rect").
  x(field = "IMDB Rating", `type` = "quantitative", bin = Right(json"""{"maxbins":60}"""), title = "IMDB Rating").
  y(field = "Rotten Tomatoes Rating", `type` = "quantitative", bin = Right(json"""{"maxbins":40}""")).
  color(field = null, `type` = "quantitative", aggregate = "count").
  width(300).
  height(200).
  transform(json"""{
    "filter": {
      "and": [
        {"field": "IMDB Rating", "valid": true},
        {"field": "Rotten Tomatoes Rating", "valid": true}
      ]}}"""
  ).
  config(JsObject("view" -> json"""{"stroke": "transparent"}"""))

Density Plot


var plot = new View("Density Plot").width(400).height(100);
plot.mark("area");
plot.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
plot.encode("x", "value").type("quantitative").title("IMDB Rating");
plot.encode("y", "density").type("quantitative");
plot.transform().density("IMDB Rating").bandwidth(0.3);
            

val density = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("area").
  x(field = "value", `type` = "quantitative", title = "IMDB Rating").
  y(field = "density", `type` = "quantitative").
  width(400).
  height(100).
  transform(json"""
    {
      "density": "IMDB Rating",
      "bandwidth": 0.3
    }"""
  )

Cumulative Frequency Distribution


var plot = new View("Cumulative Frequency Distribution");
plot.mark("area");
plot.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
plot.encode("x", "IMDB Rating").type("quantitative");
plot.encode("y", "Cumulative Count").type("quantitative");
plot.transform().aggregate("count", "*", "count", "IMDB Rating")
    .window(new WindowTransformField("sum", "count", 0, "Cumulative Count"))
    .sort("IMDB Rating").frame(null, 0);
            

val cdf = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("area").
  x(field = "IMDB Rating", `type` = "quantitative").
  y(field = "cumulative_count", `type` = "quantitative").
  transform(json"""
    {
      "sort": [{"field": "IMDB Rating"}],
      "window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
      "frame": [null, 0]
    }"""
  )

Scatterplots

Scatterplot


var bar = new View("Scatter Plot");
bar.mark("point");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("color", "Origin").type("nominal");
bar.encode("shape", "Origin").type("nominal");
            

val scatter = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("point").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  color(field = "Origin", `type` = "nominal").
  shape(field = "Origin", `type` = "nominal")

Bubble Plot


var bar = new View("Bubble Plot");
bar.mark("point");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("size", "Acceleration").type("quantitative");
            

val bubble = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("point").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  size(field = "Acceleration", `type` = "quantitative")

Natural Disasters


var bar = new View("Natural Disasters").width(600).height(400);
bar.mark("circle").opacity(0.8).stroke("black").strokeWidth(1);
bar.data().url("https://vega.github.io/vega-lite/examples/data/disasters.csv");
bar.transform().filter("datum.Entity !== 'All natural disasters'");
bar.encode("x", "Year").type("ordinal").axis().labelOverlap("greedy");
bar.encode("y", "Entity").type("nominal").title(null);
bar.encode("color", "Entity").type("nominal").removeLegend();
bar.encode("size", "Deaths").type("quantitative")
        .range(0, 5000)
        .legend().title("Annual Global Deaths").clipHeight(30);
            

val disaster = VegaLite("https://vega.github.io/vega-lite/examples/data/disasters.csv").
  mark(JsObject(
    "type" -> "circle",
    "opacity" -> 0.8,
    "stroke" -> "black",
    "strokeWidth" -> 1
  )).
  width(600).
  height(400).
  x(field = "Year", `type` = "ordinal", axis = json"""{"labelAngle": 0}""").
  y(field = "Entity", `type` = "nominal", title = null).
  size(field = "Deaths", `type` = "quantitative",
      legend = json"""{"title": "Annual Global Deaths", "clipHeight": 30}""",
      scale = json"""{"range": [0, 5000]}"""
  ).
  color(field = "Entity", `type` = "nominal", legend = JsNull).
  transform(json"""{"filter": "datum.Entity !== 'All natural disasters'"}""")

Text Plot


var bar = new View("Text Plot");
bar.mark("text");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.transform().calculate("split(datum.Name, ' ')[0]", "Brand");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("color", "Brand").type("nominal");
bar.encode("text", "Brand").type("nominal");
            

val textPlot = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("text").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  color(field = "Brand", `type` = "nominal").
  text(field = "Brand", `type` = "nominal").
  transform(json"""
    {
      "calculate": "split(datum.Name, ' ')[0]",
      "as": "Brand"
    }"""
  )

Line & Area Charts

Line Chart


var line = new View("Line Chart");
line.mark("line");
line.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
line.transform().filter("datum.symbol==='GOOG'");
line.encode("x", "date").type("temporal");
line.encode("y", "price").type("quantitative");
            

val line = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark("line").
  x(field = "date", `type` = "temporal").
  y(field = "price", `type` = "quantitative").
  transform(json"""{"filter": "datum.symbol==='GOOG'"}""")

Line Chart with Point Markers


var line = new View("Line Chart with Point Mark");
line.mark("line").point(true);
line.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
line.encode("x", "date").type("temporal").timeUnit("year");
line.encode("y", "price").type("quantitative").aggregate("mean");
line.encode("color", "symbol").type("nominal");
            

val pointLine = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark(JsObject("type" -> "line", "point" -> true)).
  x(field = "date", `type` = "temporal", timeUnit = "year").
  y(field = "price", `type` = "quantitative", aggregate = "mean").
  color(field = "symbol", `type` = "nominal")

Line Chart with Confidence Interval Band


var line = new View();
line.mark("line");
line.encode("x", "Year").type("temporal").timeUnit("year");
line.encode("y", "Miles_per_Gallon").type("quantitative").aggregate("mean");

var band = new View();
band.mark("errorband").extent("ci");
band.encode("x", "Year").type("temporal").timeUnit("year");
band.encode("y", "Miles_per_Gallon").type("quantitative").title("Mean of Miles per Gallon (95% CIs)");

var layer = new Layer(line, band).title("Line Chart with Confidence Interval Band");
layer.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
            

val confidenceInterval = VegaLite.layer(
    "https://vega.github.io/vega-lite/examples/data/cars.json",
    "json",
    VegaLite.view().
      mark(JsObject("type" -> "errorband", "extent" -> "ci")).
      y(field = "Miles_per_Gallon", `type` = "quantitative", title = "Mean of Miles per Gallon (95% CIs)"),
    VegaLite.view().
      mark("line").
      y(field = "Miles_per_Gallon", `type` = "quantitative", aggregate = "mean")
  ).x(field = "Year", `type` = "temporal", timeUnit = "year")

Rolling Averages over Raw Values


var line = new View();
line.mark("line").color("red").size(3);
line.encode("x", "date").type("temporal");
line.encode("y", "rolling_mean").type("quantitative");

var point = new View();
point.mark("point").opacity(0.3);
point.encode("x", "date").type("temporal").title("Date");
point.encode("y", "temp_max").type("quantitative").title("Max Temperature");

var layer = new Layer(line, point).title("Rolling Averages over Raw Values").width(400).height(300);
layer.data().format("csv").url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
layer.transform().window(new WindowTransformField("mean", "temp_max", 0, "rolling_mean")).frame(-15, 15);
            

val rollingAverages = VegaLite.layer(
    "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv",
    "csv",
    VegaLite.view().
      mark(JsObject("type" -> "point", "opacity" -> 0.3)).
      x(field = "date", `type` = "temporal", title = "Date").
      y(field = "temp_max", `type` = "quantitative", title = "Max Temperature"),
    VegaLite.view().
      mark(JsObject("color" -> "red", "size" -> 3, "type" -> "line")).
      x(field = "date", `type` = "temporal").
      y(field = "rolling_mean", `type` = "quantitative"),
  ).
  width(400).
  height(300).
  transform(json"""
    {
      "frame": [-15, 15],
      "window": [
        {
          "field": "temp_max",
          "op": "mean",
          "as": "rolling_mean"
        }
      ]
    }"""
  )

Area Chart with Overlaying Lines and Point Markers


var area = new View("Area Chart with Overlaying Lines and Point Markers");
area.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
area.transform().filter("datum.symbol==='GOOG'");
area.mark("area").line(true).point(true);
area.encode("x", "date").type("temporal");
area.encode("y", "price").type("quantitative");
            

val area = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark(JsObject("type" -> "area", "line" -> true, "point" -> true)).
  x(field = "date", `type` = "temporal").
  y(field = "price", `type` = "quantitative").
  transform(json"""{"filter": "datum.symbol==='GOOG'"}""")

Advanced Charts

Annual Weather Heatmap


var heatmap = new View("2010 Daily Max Temperature (F) in Seattle, WA");

heatmap.mark("rect");
heatmap.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
heatmap.encode("x", "date").type("ordinal").timeUnit("date").title("Day").axis().labelAngle(0).format("%e");
heatmap.encode("y", "date").type("ordinal").timeUnit("month");
heatmap.encode("color", "temp_max").type("quantitative").aggregate("max").legend().title(null);

heatmap.config().axis().domain(false);
heatmap.viewConfig().strokeWidth(0).step(13);
            

val heatmap = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark("rect").
  x(field = "date", `type` = "ordinal", timeUnit = "date", title = "Day", axis = json"""{"labelAngle": 0, "format": "%e"}""").
  y(field = "date", `type` = "ordinal", timeUnit = "month", title = "Month").
  color(field = "temp_max", `type` = "quantitative", aggregate = "max", legend = json"""{"title": null}""").
  config(json"""
    {
      "view": {
          "strokeWidth": 0,
          "step": 13
      },
      "axis": {
          "domain": false
      }
    }"""
  ).
  title("2010 Daily Max Temperature (F) in Seattle, WA")

Donut Chart


var donut = new View("Donut Chart");
donut.data().values("""
        [
          {"category": 1, "value": 4},
          {"category": 2, "value": 6},
          {"category": 3, "value": 10},
          {"category": 4, "value": 3},
          {"category": 5, "value": 7},
          {"category": 6, "value": 8}
        ]""");

donut.mark("arc").innerRadius(50);
donut.encode("theta", "value").type("quantitative");
donut.encode("color", "category").type("nominal");
donut.viewConfig().stroke(null);
            

val donut = VegaLite(jsan"""
    [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]"""
  ).
  mark(JsObject("type" -> "arc", "innerRadius" -> 50)).
  view(JsObject("stroke" -> JsNull)).
  theta(field = "value", `type` = "quantitative").
  color(field = "category", `type` = "nominal")

Radial Chart


var arc = new View();
arc.mark("arc").innerRadius(20).stroke("#fff");

var text = new View();
text.mark("text").radiusOffset(10);
text.encode("text", "data").type("quantitative");

var layer = new Layer(arc, text).title("Radial Chart");
layer.background().stroke(null);
layer.data().values("[12, 23, 47, 6, 52, 19]");
layer.encode("theta", "data").type("quantitative").stack("zero");
layer.encode("radius", "data").type("quantitative").scale("sqrt").zero(true).range(20, 100);
layer.encode("color", "data").type("nominal").removeLegend();
            

val radial = VegaLite.layer(
    jsan"""[12, 23, 47, 6, 52, 19]""",
    VegaLite.view().
      mark(JsObject("type" -> "arc", "innerRadius" -> 20, "stroke" -> "#fff")),

    VegaLite.view().mark(JsObject("type" -> "text", "radiusOffset" -> 10)).
      text(field = "data", `type` = "quantitative")
  ).
  mark(JsObject("type" -> "arc", "innerRadius" -> 50)).
  view(JsObject("stroke" -> JsNull)).
  theta(field = "data", `type` = "quantitative", stack = true).
  radius(field = "data", `type` = "quantitative", scale = json"""{"type": "sqrt", "zero": true, "range": [20, 100]}""").
  color(field = "data", `type` = "nominal", legend = JsNull)

Box Plot


var boxplot = new View("Box Plot");
boxplot.background().stroke(null);
boxplot.mark("boxplot").extent("min-max");
boxplot.viewConfig().stroke(null);
boxplot.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
boxplot.encode("x", "age").type("ordinal");
boxplot.encode("y", "people").type("quantitative").title("population");
            

val boxplot = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark(JsObject("type" -> "boxplot", "extent" -> "min-max")).
  view(JsObject("stroke" -> JsNull)).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", title = "population")

Vertical Concatenation


Concat.vconcat(bar, aggregateBar, groupedBar).show()
            

show(VegaLite.vconcat(bar, aggregateBar, groupedBar))

Scatterplot Matrix (SPLOM)


var plot = new View().width(150).height(150);
plot.mark("point");
plot.encode("x", "repeat:column").type("quantitative").zero(false);
plot.encode("y", "repeat:row").type("quantitative").zero(false);
plot.encode("color", "species").type("nominal");

String[] row = {"petalWidth", "petalLength", "sepalWidth", "sepalLength"};
String[] column = {"sepalLength", "sepalWidth", "petalLength", "petalWidth"};
var splom = new Repeat(plot, row, column).title("Scatter Plot Matrix");
splom.data().url("https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json");
splom.show();
            

val iris = read.arff("data/weka/iris.arff")
show(VegaLite.splom(iris, "class"))

Choropleth of Unemployment Rate per County


var geo = new View("Choropleth of Unemployment Rate per County").width(500).height(300);
geo.mark("geoshape").extent("min-max");
geo.data().topojson("https://vega.github.io/vega-lite/examples/data/us-10m.json", "feature", "counties");
geo.encode("color", "rate").type("quantitative");
geo.projection("albersUsa");

var transform = geo.transform();
var lookupData = transform.lookupData("id").fields("rate");
lookupData.data().url("https://vega.github.io/vega-lite/examples/data/unemployment.tsv");
geo.transform().lookup("id", lookupData);
            

val geo = VegaLite(
    "https://vega.github.io/vega-lite/examples/data/us-10m.json",
    JsObject("type" -> "topojson", "feature" -> "counties")
  ).
  mark("geoshape").
  color(field = "rate", `type` = "quantitative").
  projection(json"""{"type": "albersUsa"}""").
  width(500).
  height(300).
  transform(json"""
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "https://vega.github.io/vega-lite/examples/data/unemployment.tsv"
        },
        "key": "id",
        "fields": ["rate"]
      }
    }"""
  )
Fork me on GitHub