Potential JS API for Vega-Lite (akin to Altair)

Potential_JavaScript_API_for_Vega-Lite.js

/// FIGURE 2
var weather = vl.data()
  .url('data/weather.csv')
  .format('csv');

// Line chart with aggregation
var fig2a = vl.line()
  .data(weather)
  .x(vl.month('date'))
  .y(vl.mean('temp_max'))
  .color(vl.field('location').type(vl.Nominal));
// fig2a.toJSON() --> generate Vega-Lite JSON

// Correlation between wind and temperature
var fig2b = vl.point()
  .data(weather)
  .x(vl.bin('temp_max'))
  .y(vl.bin('wind'))
  .size(vl.count())
  .color(vl.field('location').type(vl.Nominal));

// Stacked bar chart of weather types
var fig2c = vl.bar()
  .data(weather)
  .x(vl.field('location').type(vl.Nominal));
  .y(vl.count())
  .color(vl.field('weather').type(vl.Nominal));

/// FIGURE 3
var seattleWeather = vl.data()
  .url('data/weather.csv')
  .format('csv')
  .filter('datum.location === "Seattle"');

var noGrid = vl.axis().grid(false);

// Dual axis layered chart
var fig3a = vl.layers()
  .add(vl.bar()
    .data(seattleWeather)
    .x(vl.month('date'))
    .y(vl.mean('precipitation').axis(noGrid))
    .color(vl.value('#77b2c7')))
  .add(vl.line()
    .data(seattleWeather)
    .x(vl.month('date'))
    .y(vl.mean('temp_max').axis(noGrid))
    .color(vl.value('#ce323c"}')))
  .resolve(vl.resolve().y('independent'));

var fig3b = vl.vconcat()
  .add(fig2a)
  .add(vl.point()
    .data(weather.copy()
      .filter('datum.precipitation > 0'))
    .x(vl.count())
    .y(vl.field('location').type(vl.Nominal))
    .color(vl.year('date')));

/// FIGURE 4

// Faceted charts
var fig4a = vl.facet(fig2a)
  .column(vl.field('location'));
var fig4a = vl.facet()
  .column(vl.field('location'))
  .spec(fig2a);

// Repeated charts
var fig4b = vl.repeat(fig2a.copy().y(vl.mean(vl.column)))
  .column(['temp_max', 'precipitation']);
var fig4b = vl.repeat()
  .column(['temp_max', 'precipitation'])
  .spec(fig2a.copy().y(vl.mean(vl.column)));

/// FIGURE 5
var cars = vl.data().url('data/cars.json');

var scatter = vl.circle()
  .x(vl.field('Horsepower').type(vl.Q))
  .y(vl.field('MPG').type(vl.Q))
  .color(vl.rule()
    .if('id', vl.field('Origin').type(vl.N))
    .else(vl.value('grey')))
  .size(vl.value(100));

// Highlight a single point on click
var fig5a = scetter.copy()
  .select('id', vl.single());

// Highlight a list of individual points
var fig5b = scatter.copy()
  .select('id', vl.multi().toggle(true));

// "Paintbrush": highlight multiple points on hover
var fig5c = scatter.copy()
  .select('id', vl.multi().on('mouseover').toggle(true));

// Highlight a single Origin
var fig5d = scatter.copy()
  .select('id', vl.single().fields('Origin'));

// Highlight a list of Origins
var fig5e = scatter.copy()
  .select('id', vl.multi().toggle(true).fields('Origin'));

/// FIGURE 6

// Rectangular brush
var fig6a = vl.circle()
  .x(vl.field('Horsepower').type(vl.Q))
  .y(vl.field('MPG').type(vl.Q))
  .color(vl.rule()
    .if('region', vl.field('Origin').type(vl.N))
    .else(vl.value('grey')))
  .size(vl.value(100))
  .select('region', vl.interval());

// Moving the brush
var fig6b = fig6a.copy()
  .select('region', vl.interval().translate(true));

// Single-dimension brush
var fig6c = fig6a.copy()
  .select('region', vl.interval().translate(true).channels('x'));

/// FIGURE 7
var fig7 = fig6a.copy()
  .select('region', vl.interval()
    .on('[mousedown[event.shiftKey], mouseup] > mousemove'))
  .select('grid', vl.interval()
    .scales(true)
    .zoom(true)
    .translate('[mousedown[!event.shiftKey], mouseup] > mousemove'));

/// FIGURE 8

// A Single Brush, and Panning & Zooming in a Scatterplot Matri
var fig8a = vl.repeat()
  .row(['Displacement', 'Miles_per_Gallon'])
  .column(['Displacement', 'Miles_per_Gallon'])
  .spec(vl.circle()
    .data(cars)
    .x(vl.field(vl.column).type(vl.Q))
    .y(vl.field(vl.row).type(vl.Q))
    .color(vl.rule()
      .if('region', vl.field('Origin').type(vl.N))
      .else(vl.value('grey')))
    .size(vl.value(100))
    .select('region', vl.interval()
      .translate(true).zoom(true).resolve('single')
      .on('[mousedown[event.shiftKey], mouseup] > mousemove'))
    .select('grid', vl.interval()
      .scales(true).zoom(true).resolve('single')
      .on('[mousedown[!event.shiftKey], mouseup] > mousemove')));

// Independent Brushes
var fig8b = fig8a.copy();
fig8b.spec().select('region').resolve('independent');
fig8b.spec().select('grid').resolve('independent');

// Unioned Brushes
var fig8c = fig8a.copy();
fig8b.spec().select('region').resolve('union');
fig8b.spec().select('grid').resolve('union');

// Intersected Brushes
var fig8d = fig8a.copy();
fig8b.spec().select('region').resolve('intersect');
fig8b.spec().select('grid').resolve('intersect');

/// FIGURE 9
var stocks = vl.data.url('data/sp500.csv').format('csv');

// Overview + Detail
var fig9a = vl.vconcat([
  vl.area()
    .x(vl.field('date').type(vl.T))
    .y(vl.field('price').type(vl.Q))
    .select('region', vl.interval().channels('x'))
    .height(100),
  vl.area()
    .x(vl.field('date').type(vl.T))
    .y(vl.field('price').type(vl.Q)
         .scale(vl.scale().domain(vl.selection('region'))))
    .height(300)
]);

// Index Chart
var fig9b = vl.layers([
  vl.line()
    .data(stocks.copy()
      .lookup('index', vl.selection('indexPt').keys('symbol'))
      .calculate('field', 'indexed_price')
      .calculate('expr', '(datum.price - datum.index.price) / datum.index.price'))
    .x(vl.field('date').type(vl.Temporal))
    .y(vl.field('indexed_price').type(vl.Quantitative))
    .color(vl.field('symbol').type(vl.Nominal))
    .select('indexPt', vl.single()
      .on('mousemove').fields('date').nearest(true)),
  vl.rule()
    .x(vl.selection('indexPt.date').type(vl.T))
    .color(vl.value('red'))
]);

/// FIGURE 10
var flights = vl.data().url('data/flights-2k.json');

var fig10 = vl.repeat()
  .column(['hour', 'delay', 'distance'])
  .spec(vl.bar()
    .data(flights.copy().filter(vl.selection('region')))
    .x(vl.bin(vl.column))
    .y(vl.count())
    .color(vl.value('steelblue'))
    .select('region', vl.interval()
      .channels('x').resolve('intersect_others')));

/// FIGURE 11

// Single-Point Layered Cross Filtering
var fig11a = vl.repeat()
  .column(['hour', 'delay', 'distance'])
  .spec(vl.layers([
    vl.bar()
      .data(flights)
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('steelblue'))
      .select('selectedBins', vl.single().on('mousemove').channels('x')),
    vl.bar()
      .data(flights.copy().filter(vl.selection('selectedBins')))
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('goldenrod'))
  ]);

// Multi-Point Layered Cross Filtering
var fig11b = vl.repeat()
  .column(['hour', 'delay', 'distance'])
  .spec(vl.layers([
    vl.bar()
      .data(flights)
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('steelblue'))
      .select('selectedBins', vl.multi().on('click').channels('x')),
    vl.bar()
      .data(flights.copy().filter(vl.selection('selectedBins')))
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('goldenrod'))
  ]);

// Continuous Layered Cross Filtering
var fig11b = vl.repeat()
  .column(['hour', 'delay', 'distance'])
  .spec(vl.layers([
    vl.bar()
      .data(flights)
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('steelblue'))
      .select('selectedBins', vl.interval().channels('x')),
    vl.bar()
      .data(flights.copy().filter(vl.selection('selectedBins')))
      .x(vl.bin(vl.column))
      .y(vl.count())
      .color(vl.value('goldenrod'))
  ]);