How to use vega-canvas - 10 common examples

/*eslint no-unused-vars: "warn"*/
/*eslint no-fallthrough: "warn" */
/*eslint no-console: "warn"*/
import BitMap from './BitMap';
import { Marks } from 'vega-scenegraph';
import { canvas } from 'vega-canvas';

var SIZE_FACTOR = 0.707106781186548;
var ALIGN = ['right', 'center', 'left'];
var BASELINE = ['bottom', 'middle', 'top'];
var ALPHA_MASK = 0xff000000;
var INSIDE_OPACITY_IN_ALPHA = 0x10000000; // opacity at 0.0625 in alpha
var INSIDE_OPACITY = 0.0625;
var CONTEXT = canvas().getContext('2d');

export default function placeLabels(
  data,
  anchors,
  offsets,
  marktype,
  avoidMarks,
  size,
  avoidBaseMark,
  markIdx,
  padding
) {
  var n = data.length,
    labelInside = false;
  for (var i = 0; i < anchors.length && !labelInside; i++) {
    labelInside = anchors[i] === 0x5 || offsets[i] < 0;

export function markBitmaps($, avoidMarks, labelInside, isGroupArea) {
  // create canvas
  const width = $.width,
        height = $.height,
        border = labelInside || isGroupArea,
        context = canvas(width, height).getContext('2d');

  // render all marks to be avoided into canvas
  avoidMarks.forEach(items => draw(context, items, border));

  // get canvas buffer, create bitmaps
  const buffer = new Uint32Array(context.getImageData(0, 0, width, height).data.buffer),
        layer1 = $.bitmap(),
        layer2 = border && $.bitmap();

  // populate bitmap layers
  let x, y, u, v, alpha;
  for (y=0; y < height; ++y) {
    for (x=0; x < width; ++x) {
      alpha = buffer[y * width + x] & ALPHA_MASK;
      if (alpha) {
        u = $(x);

function writeToCanvas(avoidMarks, width, height, labelInside) {
  const context = canvas(width, height).getContext('2d'),
        m = avoidMarks.length;

  let originalItems, itemsLen;

  // draw every avoiding marks into canvas
  for (let i=0; i

place(d) {
    const mb = d.markBound;
    // can not be placed if the mark is not visible in the graph bound
    if (mb[2] < 0 || mb[5] < 0 || mb[0] > this.width || mb[3] > this.height) {
      return false;
    }

    const context = canvas().getContext('2d');
    const n = this.offsets.length;
    const textHeight = d.textHeight;
    const markBound = d.markBound;
    const text = d.text;
    const font = d.font;
    let textWidth = d.textWidth;
    let dx, dy, isInside, sizeFactor, insideFactor;
    let x, x1, xc, x2, y1, yc, y2;
    let _x1, _x2, _y1, _y2;

    // for each anchor and offset
    for (let i = 0; i < n; i++) {
      dx = (this.anchors[i] & 0x3) - 1;
      dy = ((this.anchors[i] >>> 0x2) & 0x3) - 1;

      isInside = (dx === 0 && dy === 0) || this.offsets[i] < 0;

place(d) {
    const mb = d.markBound;
    // can not be placed if the mark is not visible in the graph bound
    if (mb[2] < 0 || mb[5] < 0 || mb[0] > this.width || mb[3] > this.height) {
      return false;
    }

    const context = canvas().getContext('2d');
    const n = this.offsets.length;
    const textHeight = d.textHeight;
    const markBound = d.markBound;
    const text = d.text;
    const font = d.font;
    let textWidth = d.textWidth;
    let dx, dy, isInside, sizeFactor, insideFactor;
    let x, x1, xc, x2, y1, yc, y2;
    let _x1, _x2, _y1, _y2;

    // for each anchor and offset
    for (let i = 0; i < n; i++) {
      dx = (this.anchors[i] & 0x3) - 1;
      dy = ((this.anchors[i] >>> 0x2) & 0x3) - 1;

      isInside = (dx === 0 && dy === 0) || this.offsets[i] < 0;

function toCanvas(grid, obj, color, opacity) {
  const n = grid.width,
        m = grid.height,
        x1 = grid.x1 || 0,
        y1 = grid.y1 || 0,
        x2 = grid.x2 || n,
        y2 = grid.y2 || m,
        val = grid.values,
        value = val ? i => val[i] : zero,
        can = canvas(x2 - x1, y2 - y1),
        ctx = can.getContext('2d'),
        img = ctx.getImageData(0, 0, x2 - x1, y2 - y1),
        pix = img.data;

  for (let j=y1, k=0; j

cloud.layout = function() {
    var contextAndRatio = getContext(canvas()),
        board = zeroArray((size[0] >> 5) * size[1]),
        bounds = null,
        n = words.length,
        i = -1,
        tags = [],
        data = words.map(function(d) {
          return {
            text: text(d),
            font: font(d),
            style: fontStyle(d),
            weight: fontWeight(d),
            rotate: rotate(d),
            size: ~~(fontSize(d) + 1e-14),
            padding: padding(d),
            xoff: 0,
            yoff: 0,

export default function() {
  var context = canvas().getContext("2d"),
      markData = [],
      size,
      padding = 3,
      label = {};

  label.layout = function() {
    var data = markData.map(function(d) {
      var textWidth = labelWidth(d.text, d.fontSize, d.font, context),
          textHeight = d.fontSize;
      return {
        fontSize: d.fontSize,
        x: d.x,
        y: d.y,
        textWidth: textWidth,
        textHeight: textHeight,
        boundaryFun: getBoundaryFunction(d.x, d.y, textWidth, textHeight),

place(d) {
    const context = canvas().getContext('2d');
    const items = d.datum.datum.items[0].items;
    const n = items.length;
    const textHeight = d.textHeight;
    const textWidth = labelWidth(context, d.text, textHeight, d.font);
    const pixelRatio = this.bm1.getPixelRatio();
    const stack = new Stack();
    let maxSize = this.avoidBaseMark ? textHeight : 0;
    let labelPlaced = false;
    let labelPlaced2 = false;
    let maxAreaWidth = 0;
    let x1, x2, y1, y2, x, y, _x, _y, lo, hi, mid, areaWidth, coordinate, nextX, nextY;

    for (let i = 0; i < n; i++) {
      x1 = items[i].x;
      y1 = items[i].y;
      x2 = items[i].x2 === undefined ? x1 : items[i].x2;

prototype.loadImage = function(uri) {
  var loader = this,
      Image = image();
  increment(loader);

  return loader._loader
    .sanitize(uri, {context: 'image'})
    .then(function(opt) {
      var url = opt.href;
      if (!url || !Image) throw {url: url};

      var img = new Image();

      img.onload = function() {
        decrement(loader);
      };

      img.onerror = function() {
        decrement(loader);