Creates the gradient on the area
@return {void}
774881
function buildGradient() {
            if (!chartGradientEl) {
                chartGradientEl = svg.select('.metadata-group')
                  .append('linearGradient')
                    .attr('id', gradientId)
                    .attr('gradientUnits', 'userSpaceOnUse')
                    .attr('x1', 0)
                    .attr('x2', xScale(data[data.length - 1].date))
                    .attr('y1', 0)
                    .attr('y2', 0)
                  .selectAll('stop')
                    .data([
                        {offset: '0%', color: gradient[0]},
                        {offset: '100%', color: gradient[1]}
                    ])
                  .enter().append('stop')
                    .attr('offset', ({offset}) => offset)
                    .attr('stop-color', ({color}) => color);
            }
        }
955347
function () {
        var brushCanvas = this._brushCanvas || (this._brushCanvas = zrUtil.createCanvas());
        // set brush size
        var r = this.pointSize + this.blurSize;
        var d = r * 2;
        brushCanvas.width = d;
        brushCanvas.height = d;

        var ctx = brushCanvas.getContext('2d');
        ctx.clearRect(0, 0, d, d);

        // in order to render shadow without the distinct circle,
        // draw the distinct circle in an invisible place,
        // and use shadowOffset to draw shadow in the center of the canvas
        ctx.shadowOffsetX = d;
        ctx.shadowBlur = this.blurSize;
        // draw the shadow in black, and use alpha and shadow blur to generate
        // color in color map
        ctx.shadowColor = '#000';

        // draw circle in the left to the canvas
        ctx.beginPath();
        ctx.arc(-r, r, this.pointSize, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        return brushCanvas;
    }
814907
function Gradient(parsedNode) {
    this.node = {};
    this.preludeNodes = [];
    this.stops = [];
    this.afterNodes = [];
    this.setNode(parsedNode);

    this._actionQueue = [];
    this._walking = false;
}
170179
function(ctx, from, to, width, gradient) {

        var innerWidth = width - 4;
        var outerWidth = width;
        var buttFrom = g.point(from).move(to, -outerWidth / 2);
        var buttTo = g.point(to).move(from, -outerWidth / 2);

        ctx.beginPath();
        ctx.lineWidth = outerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.6)';

        ctx.moveTo(from.x, from.y);
        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        gradient.addColorStop(0.000, 'rgba(86, 170, 255, 1)');
        gradient.addColorStop(0.500, 'rgba(255, 255, 255, 1)');
        gradient.addColorStop(1.000, 'rgba(86, 170, 255, 1)');

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = gradient;
        ctx.moveTo(from.x, from.y);

        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        ctx.lineCap = "square";

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(from.x, from.y);
        ctx.lineTo(buttFrom.x, buttFrom.y);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(to.x, to.y);
        ctx.lineTo(buttTo.x, buttTo.y);
        ctx.stroke();
        ctx.closePath();
    }
1359972
function () {
        var self = this, style, rect;

        style = self.getEl().style;
        rect = self._layoutRect;

        style.left = rect.x + 'px';
        style.top = rect.y + 'px';
        style.zIndex = 0xFFFF + 0xFFFF;
      }
327975
function buildGradient() {
            if (!linearGradient) {
                linearGradient = svg.select('.metadata-group')
                  .append('linearGradient')
                    .attr('id', lineGradientId)
                    .attr('x1', '0%')
                    .attr('y1', '0%')
                    .attr('x2', '100%')
                    .attr('y2', '0%')
                    .attr('gradientUnits', 'userSpaceOnUse')
                    .selectAll('stop')
                    .data([
                        {offset:'0%', color: singleLineGradientColors[0]},
                        {offset:'100%', color: singleLineGradientColors[1]}
                    ])
                    .enter()
                      .append('stop')
                        .attr('offset', ({offset}) => offset)
                        .attr('stop-color', ({color}) => color)
            }
        }
19959
function Graphics()
{
    Container.call(this);

    /**
     * The alpha value used when filling the Graphics object.
     *
     * @member {number}
     * @default 1
     */
    this.fillAlpha = 1;

    /**
     * The width (thickness) of any lines drawn.
     *
     * @member {number}
     * @default 0
     */
    this.lineWidth = 0;

    /**
     * The color of any lines drawn.
     *
     * @member {string}
     * @default 0
     */
    this.lineColor = 0;

    /**
     * Graphics data
     *
     * @member {GraphicsData[]}
     * @private
     */
    this.graphicsData = [];

    /**
     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
     *
     * @member {number}
     * @default 0xFFFFFF
     */
    this.tint = 0xFFFFFF;

    /**
     * The previous tint applied to the graphic shape. Used to compare to the current tint and check if theres change.
     *
     * @member {number}
     * @private
     * @default 0xFFFFFF
     */
    this._prevTint = 0xFFFFFF;

    /**
     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
     *
     * @member {number}
     * @default CONST.BLEND_MODES.NORMAL;
     */
    this.blendMode = CONST.BLEND_MODES.NORMAL;

    /**
     * Current path
     *
     * @member {GraphicsData}
     * @private
     */
    this.currentPath = null;

    /**
     * Array containing some WebGL-related properties used by the WebGL renderer.
     *
     * @member {object<number, object>}
     * @private
     */
    // TODO - _webgl should use a prototype object, not a random undocumented object...
    this._webGL = {};

    /**
     * Whether this shape is being used as a mask.
     *
     * @member {boolean}
     */
    this.isMask = false;

    /**
     * The bounds' padding used for bounds calculation.
     *
     * @member {number}
     */
    this.boundsPadding = 0;

    /**
     * A cache of the local bounds to prevent recalculation.
     *
     * @member {Rectangle}
     * @private
     */
    this._localBounds = new math.Rectangle(0,0,1,1);

    /**
     * Used to detect if the graphics object has changed. If this is set to true then the graphics
     * object will be recalculated.
     *
     * @member {boolean}
     * @private
     */
    this.dirty = true;

    /**
     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
     * graphics object will be recalculated.
     *
     * @member {boolean}
     * @private
     */
    this.glDirty = false;

    this.boundsDirty = true;

    /**
     * Used to detect if the cached sprite object needs to be updated.
     *
     * @member {boolean}
     * @private
     */
    this.cachedSpriteDirty = false;
}
1112697
function () {
			var N = this.N;

			var cg = this.costGrad(this.Y); // evaluate gradient
			var cost = cg.cost;
			var grad = cg.grad;

			var e = 1e-5;
			for (var i = 0; i < N; i++) {
				for (var d = 0; d < this.dim; d++) {
					var yold = this.Y[i][d];

					this.Y[i][d] = yold + e;
					var cg0 = this.costGrad(this.Y);

					this.Y[i][d] = yold - e;
					var cg1 = this.costGrad(this.Y);

					var analytic = grad[i][d];
					var numerical = (cg0.cost - cg1.cost) / ( 2 * e );
					console.log(i + ',' + d + ': gradcheck analytic: ' + analytic + ' vs. numerical: ' + numerical);

					this.Y[i][d] = yold;
				}
			}
		}
326565
function drawGradient(legend, barGroup, y) {
  var id = "terriajs-legend-gradient" + ++gradientCount;
  var defs = addSvgElement(legend, "defs", {}); // apparently it's ok to have the defs anywhere in the doc
  var linearGradient = svgElement(legend, "linearGradient", {
    x1: "0",
    x2: "0",
    y1: "1",
    y2: "0",
    id: id
  });
  legend.gradientColorMap.forEach(function(c, i) {
    linearGradient.appendChild(
      svgElement(legend, "stop", {
        offset: c.offset,
        "stop-color": c.color
      })
    );
  });
  defs.appendChild(linearGradient);

  var gradientItems = legend.items.filter(function(item) {
    return !defined(item.color);
  });

  var totalSpacingAbove = gradientItems.reduce(function(prev, item) {
    return prev + (item.spacingAbove || 0);
  }, 0);
  var barHeight = Math.max(
    (legend.computedItemHeight + legend.itemSpacing) * gradientItems.length +
      totalSpacingAbove,
    legend.barHeightMin
  );

  addSvgElement(
    legend,
    "rect",
    {
      x: legend.barLeft,
      y: y,
      width: legend.itemWidth,
      height: barHeight,
      fill: "url(#" + id + ")"
    },
    "gradient-bar"
  );

  return barHeight;
}
353607
function (clearAll, clearColor) {
        var dom = this.dom;
        var ctx = this.ctx;
        var width = dom.width;
        var height = dom.height;

        var clearColor = clearColor || this.clearColor;
        var haveMotionBLur = this.motionBlur && !clearAll;
        var lastFrameAlpha = this.lastFrameAlpha;

        var dpr = this.dpr;

        if (haveMotionBLur) {
            if (!this.domBack) {
                this.createBackBuffer();
            }

            this.ctxBack.globalCompositeOperation = 'copy';
            this.ctxBack.drawImage(
                dom, 0, 0,
                width / dpr,
                height / dpr
            );
        }

        ctx.clearRect(0, 0, width, height);
        if (clearColor && clearColor !== 'transparent') {
            var clearColorGradientOrPattern;
            // Gradient
            if (clearColor.colorStops) {
                // Cache canvas gradient
                clearColorGradientOrPattern = clearColor.__canvasGradient || Style.getGradient(ctx, clearColor, {
                    x: 0,
                    y: 0,
                    width: width,
                    height: height
                });

                clearColor.__canvasGradient = clearColorGradientOrPattern;
            }
            // Pattern
            else if (clearColor.image) {
                clearColorGradientOrPattern = Pattern.prototype.getCanvasPattern.call(clearColor, ctx);
            }
            ctx.save();
            ctx.fillStyle = clearColorGradientOrPattern || clearColor;
            ctx.fillRect(0, 0, width, height);
            ctx.restore();
        }

        if (haveMotionBLur) {
            var domBack = this.domBack;
            ctx.save();
            ctx.globalAlpha = lastFrameAlpha;
            ctx.drawImage(domBack, 0, 0, width, height);
            ctx.restore();
        }
    }
1029838
function() {
			var c = this.canvas;

			var radius = this.r;
			var x = this.size / 2;

			var stopIndex = 0; // The index of the current color
			var stop = this.stops[stopIndex], prevStop;

			var diff, t, sameColor;

			c.rotate(-90, this.size / 2, this.size / 2);

			for (var i = 0; i < 360; i += 0.5) {
				if (i / 360 + ε >= stop.pos) {
					// Switch color stop
					do {
						prevStop = stop;

						stopIndex++;
						stop = this.stops[stopIndex];
					} while (
						stop && stop !== prevStop && stop.pos === prevStop.pos
					);

					if (!stop) {
						break;
					}

					sameColor =
						prevStop.color + '' === stop.color + '' &&
						prevStop !== stop;

					diff = prevStop.color.map(function(c, i){
						return stop.color[i] - c;
					});
				}

				t = (i / 360 - prevStop.pos) / (stop.pos - prevStop.pos);

				var interpolated = sameColor ?
					stop.color :
					diff.map(function (d, i){
						var ret = d * t + prevStop.color[i];

						return i < 3 ? ret & 255 : ret;
					});

				var path = new _.CanvasKit.SkPath();

				path.moveTo(x, x);

				var angle = Math.min(360 * deg, i * deg);
				var θ;

				if (sameColor) {
					θ = 360 * (stop.pos - prevStop.pos);

					i += θ - 0.5;
				}
				else {
					θ = 0.5;
				}

				var endAngle = angle + θ * deg;

				endAngle = Math.min(360 * deg, endAngle);

				// 0.02: To prevent moire

				var arc = endAngle - angle;

				path.arc(
					x, x,
					radius,
					arc >= 2 * deg ? angle : angle - 0.02, endAngle
				);

				var paint = new _.CanvasKit.SkPaint();
				paint.setStyle(_.CanvasKit.PaintStyle.Fill);
				paint.setColor(_.CanvasKit.Color(...interpolated, 1.0));

				c.drawPath(path, paint);
				
				this.surface.flush();

				path.delete();
				paint.delete();
			}
		}
405628
function renderColorScaleToCanvas(name, canvas) {
  /* eslint-disable no-param-reassign */
  const csDef = colorscales[name];
  canvas.height = 1;
  const ctx = canvas.getContext('2d');

  if (Object.prototype.toString.call(csDef) === '[object Object]') {
    canvas.width = 256;
    const gradient = ctx.createLinearGradient(0, 0, 256, 1);

    for (let i = 0; i < csDef.colors.length; ++i) {
      gradient.addColorStop(csDef.positions[i], csDef.colors[i]);
    }
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 256, 1);
  } else if (Object.prototype.toString.call(csDef) === '[object Uint8Array]') {
    canvas.width = 256;
    const imgData = ctx.createImageData(256, 1);
    imgData.data.set(csDef);
    ctx.putImageData(imgData, 0, 0);
  } else {
    throw new Error('Color scale not defined.');
  }
  /* eslint-enable no-param-reassign */
}
887519
function buildScales() {
            const decidedRange = isReverse ? [chartWidth, 0] : [0, chartWidth];

            xScale = d3Scale.scaleLinear()
                .domain([0, Math.max(ranges[0], markers[0], measures[0])])
                .rangeRound(decidedRange)
                .nice();

            // Derive width scales from x scales
            barWidth = bulletWidth(xScale);

            // set up opacity scale based on ranges and measures
            rangeOpacityScale = ranges.map((d, i) => startMaxRangeOpacity - (i * rangeOpacifyDiff)).reverse();
            measureOpacityScale = ranges.map((d, i) => 0.9 - (i * measureOpacifyDiff)).reverse();

            // initialize range and measure bars and marker line colors
            rangeColor = colorSchema[0];
            measureColor = colorSchema[1];
        }
345800
function drawArea(){
            if (area) {
                svg.selectAll('.sparkline-area').remove();
            }

            area = d3Shape.area()
                .x(({date}) => xScale(date))
                .y0(() => yScale(0) + lineStrokeWidth / 2)
                .y1(({value}) => yScale(value))
                .curve(d3Shape.curveBasis);

            svg.select('.chart-group')
              .append('path')
                .datum(data)
                .attr('class', 'sparkline-area')
                .attr('fill', `url(#${areaGradientId})`)
                .attr('d', area)
                .attr('clip-path', `url(#${maskingClipId})`);
        }
98931
function KDE( canvas, width, height, left, top ) {

		var graph, data, area, rug, edges, axes, annotations, title, text;

		// [1] Instantiate a new graph generator and configure:
		graph = xfig.graph( canvas )
			.width( width )
			.height( height )
			.position({
				'left': left,
				'top': top
			})
			.xMin( 0 )
			.xMax( 1 )
			.yMin( 0 );

		// Create the graph:
		graph.create( 'kde' );

		// Get data:
		d3.json( 'data/kde.data.json', function ( error, json ) {

			var max;

			// [2] Instantiate a new data generator and configure:
			data = xfig.data( json )
				.accessors( 'x', function ( d ) {
					return d[ 0 ];
				})
				.accessors( 'y', function ( d ) {
					return d[ 1 ];
				});

			// Format the data and calculate the KDE:
			data.format( [ 'x', 'y' ] )
				.kde(
					function ( d ) {
						return d[ 1 ];
					}, 0, 1
				);

			// Bind the data instance to the graph:
			max = data.max( function ( d ) {
				return d[ 1 ];
			});
			max += max * 0.05;
			graph.data( data )
				.yMax( max );

			// [3] Instantiate a new area chart generator and configure:
			area = xfig.area( graph )
				.labels( [ 'data 0' ] );

			// Create the area chart:
			area.create();

			// [4] Instantiate a new data generator and configure:
			data = xfig.data( json )
				.accessors( 'x', function ( d ) {
					return d[ 0 ];
				})
				.accessors( 'y', function ( d ) {
					return d[ 1 ];
				});

			// Format the data:
			data.format( [ 'x', 'y' ] )
				.extract( function ( d ) {
					return d[ 1 ];
				});

			// Bind the data instance to the graph:
			graph.data( data );

			// [5] Instantiate a new rug chart generator and configure:
			rug = xfig.rug( graph )
				.labels( [ 'data 0' ] );

			// Create the rug chart:
			rug.create();

			// [6] Instantiate a new axes generator and configure:
			axes = xfig.axes( graph )
				.yLabel( 'density' );

			// Create the axes:
			axes.create();

			// [7] Instantiate a new annotations generator and configure:
			annotations = xfig.annotations( graph );

			// Create the annotations element:
			annotations.create();

			// [7.1] Instantiate a new title instance and configure:
			title = annotations.title()
				.top( -30 )
				.left( 250 );

			// Add a (sub)title:
			title.create( 'KDE' );

			// [7.2] Instantiate a new text instance and configure:
			text = annotations.text()
				.width( 200 )
				.height( 100 )
				.top( 50 )
				.left( 310 );

			// Add a text annotation:
			text.create( 'This is another text annotation, which may run multiple lines.' );

		});

	}
95043
def _draw_gradient(self, alpha, color):
        """"""
        self.delete("gradient")
        self.delete("cursor")
        del self.gradient
        width = self.winfo_width()
        height = self.winfo_height()

        bg = create_checkered_image(width, height)
        r, g, b = color
        w = width - 1.
        gradient = Image.new("RGBA", (width, height))
        for i in range(width):
            for j in range(height):
                gradient.putpixel((i, j), (r, g, b, round2(i / w * 255)))
        self.gradient = ImageTk.PhotoImage(Image.alpha_composite(bg, gradient),
                                           master=self)

        self.create_image(0, 0, anchor="nw", tags="gardient",
                          image=self.gradient)
        self.lower("gradient")

        x = alpha / 255. * width
        h, s, v = rgb_to_hsv(r, g, b)
        if v < 50:
            fill = "gray80"
        else:
            fill = 'black'
        self.create_line(x, 0, x, height, width=2, tags='cursor', fill=fill)
1230232
function buildScales() {
            const [minX, minY] = [d3Array.min(dataPoints, ({ x }) => x), d3Array.min(dataPoints, ({ y }) => y)];
            const [maxX, maxY] = [d3Array.max(dataPoints, ({ x }) => x), d3Array.max(dataPoints, ({ y }) => y)];
            const yScaleBottomValue = Math.abs(minY) < 0 ? Math.abs(minY) : 0;

            xScale = d3Scale.scaleLinear()
                .domain([minX, maxX])
                .rangeRound([0, chartWidth])
                .nice();

            yScale = d3Scale.scaleLinear()
                .domain([yScaleBottomValue, maxY])
                .rangeRound([chartHeight, 0])
                .nice();

            colorScale = d3Scale.scaleOrdinal()
                .domain(dataPoints.map(getName))
                .range(colorSchema);

            areaScale = d3Scale.scaleSqrt()
                .domain([yScaleBottomValue, maxY])
                .range([0, maxCircleArea]);

            const colorRange = colorScale.range();

            /**
             * Maps data point category name to
             * each color of the given color scheme
             * {
             *     name1: 'color1',
             *     name2: 'color2',
             *     name3: 'color3',
             *     ...
             * }
             * @private
             */
            nameColorMap = colorScale.domain().reduce((accum, item, i) => {
                accum[item] = colorRange[i];

                return accum;
            }, {});
        }