Vega.rb

Interactive charts for Ruby, powered by Vega and Vega-Lite

Line chart

Vega.lite
  .data(data)
  .mark(type: "line", tooltip: true, interpolate: "cardinal", point: {size: 60})
  .encoding(
    x: {field: "x", type: "temporal", scale: {type: "utc"}, axis: {format: "%b %e"}},
    y: {field: "y", type: "quantitative"}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Pie chart

Vega.lite
  .data(data)
  .mark(type: "arc", tooltip: true)
  .encoding(
    color: {field: "x", type: "nominal", axis: {title: nil}, legend: {labelFontSize: 12}},
    theta: {field: "y", type: "quantitative"}
  )
  .view(stroke: nil)

Column chart

Vega.lite
  .data(data)
  .mark(type: "bar", tooltip: true)
  .encoding(
    x: {field: "x", type: "nominal", sort: "none", axis: {labelAngle: 0}},
    y: {field: "y", type: "quantitative"}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Bar chart

Vega.lite
  .data(data)
  .mark(type: "bar", tooltip: true)
  .encoding(
    y: {field: "x", type: "nominal", sort: "none"},
    x: {field: "y", type: "quantitative"}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Area chart

Vega.lite
  .data(data)
  .mark(type: "area", tooltip: true, interpolate: "cardinal", point: {size: 60})
  .encoding(
    x: {field: "x", type: "temporal", scale: {type: "utc"}, axis: {format: "%b %e"}},
    y: {field: "y", type: "quantitative"}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Scatter chart

Vega.lite
  .data(data)
  .mark(type: "circle", tooltip: true)
  .encoding(
    x: {field: "x", type: "quantitative", scale: {zero: false}},
    y: {field: "y", type: "quantitative", scale: {zero: false}},
    size: {value: 60}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Multiple series

Vega.lite
  .data(data)
  .mark(type: "line", point: {size: 60}, tooltip: true, interpolate: "cardinal")
  .encoding(
    x: {field: "x", type: "temporal", scale: {type: "utc"}, axis: {format: "%b %e"}},
    y: {field: "y", type: "quantitative"},
    color: {field: "z", axis: {title: nil}}
  )
  .config(axis: {title: nil, labelFontSize: 12})

Next

See what else is possible