Method draw

js/src/HeatMap.ts:114–143

()

  }

  draw() {
    this.set_ranges();

    const plottingData = this.getPlottingData();

    this.canvas.setAttribute('width', plottingData.totalWidth.toString());
    this.canvas.setAttribute('height', plottingData.totalHeight.toString());

    const ctx = this.canvas.getContext('2d');
    const colors = this.model.mark_data.color;
    colors.forEach((row: number[], i: number) => {
      const height = plottingData.heights[i];
      const y = plottingData.yOrigin + plottingData.yStartPoints[i];

      row.forEach((d: number, j: number) => {
        const width = plottingData.widths[j];
        const x = plottingData.xOrigin + plottingData.xStartPoints[j];
        ctx.fillStyle = this.getElementFill(d);
        ctx.fillRect(x, y, this.expandRect(width), this.expandRect(height));
      });
    });

    this.image
      .attr('width', plottingData.totalWidth)
      .attr('height', plottingData.totalHeight)
      .attr('x', plottingData.x0)
      .attr('y', plottingData.y0);

    this.drawCanvas();
  }

  private expandRect(value: number): number {
    // Add 0.5px to width and height to fill gaps between rectangles