Draws the x and y axis on the svg object within their
respective groups along with their axis labels
@return {void}
@private
14785
function drawAxis() {
            let translateX = hasTitle() ? legendSpacing : 0;

            svg.select('.axis-group')
                .attr('transform', `translate(${translateX}, ${chartHeight + paddingBetweenAxisAndChart})`)
                .call(axis);

            drawHorizontalExtendedLine();
        }
579103
function drawBoxes() {
            boxes = svg.select('.chart-group').selectAll('.box').data(data);

            boxes.enter()
              .append('rect')
                .classed('box', true)
                .attr('width', boxSize)
                .attr('height', boxSize)
                .attr('x', ({hour}) => hour * boxSize)
                .attr('y', ({day}) => day * boxSize)
                .style('opacity', boxInitialOpacity)
                .style('fill', boxInitialColor)
                .style('stroke', boxBorderColor)
                .style('stroke-width', boxBorderSize)
                .transition()
                    .duration(animationDuration)
                    .style('fill', ({value}) => colorScale(value))
                    .style('opacity', boxFinalOpacity);

            boxes.exit().remove();
        }
1285400
function renderComponent() {
    d3.select('svg')
      .datum(svgData)
      .call(crosshairSvg)
      .on('mousemove', function() {
          var point = d3.mouse(this);
          svgData[0] = { x: point[0], y: point[1] };
          render();
      });

    var canvas = d3.select('canvas').node();
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    crosshairCanvas.context(ctx)(canvasData);
    canvas.onmousemove = function({ offsetX, offsetY }) {
        canvasData[0] = { x: offsetX, y: offsetY };
        render();
    };
}
1206518
function drawDayLabels() {
            let dayLabelsGroup = svg.select('.day-labels-group');

            dayLabels = svg.select('.day-labels-group').selectAll('.day-label')
                .data(daysHuman);

            dayLabels.enter()
              .append('text')
                .text((label) => label)
                .attr('x', 0)
                .attr('y', (d, i) => i * boxSize)
                .style('text-anchor', 'start')
                .style('dominant-baseline', 'central')
                .attr('class', 'day-label');

            dayLabelsGroup.attr('transform', `translate(-${dayLabelWidth}, ${boxSize / 2})`);
        }
93739
function showEmbedding(data) {
  const margin = {top: 20, right: 15, bottom: 60, left: 60};
  const width = 800 - margin.left - margin.right;
  const height = 800 - margin.top - margin.bottom;

  const x = d3.scaleLinear().domain([0, 1]).range([0, width]);
  const y = d3.scaleLinear().domain([0, 1]).range([height, 0]);

  const chart = d3.select('body')
                    .append('svg')
                    .attr('width', width + margin.right + margin.left)
                    .attr('height', height + margin.top + margin.bottom)
                    .attr('class', 'chart');

  const main =
      chart.append('g')
          .attr(
              'transform', 'translate(' + margin.left + ',' + margin.top + ')')
          .attr('width', width)
          .attr('height', height)
          .attr('class', 'main');

  const xAxis = d3.axisBottom(x);
  main.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('class', 'main axis date')
      .call(xAxis);

  const yAxis = d3.axisLeft(y);
  main.append('g')
      .attr('transform', 'translate(0,0)')
      .attr('class', 'main axis date')
      .call(yAxis);

  const dots = main.append('g');

  dots.selectAll('scatter-dots')
      .data(data)
      .enter()
      .append('svg:circle')
      .attr('cx', (d) => x(d[0]))
      .attr('cy', (d) => y(d[1]))
      .attr('stroke-width', 0.25)
      .attr('stroke', '#1f77b4')
      .attr('fill', 'none')
      .attr('r', 5);
}
1025145
function () {
			var series = this,
				xAxis = series.xAxis,
				yAxis = series.yAxis,
				colorKey = series.colorKey;
			
			// Make points pass test in drawing
			each(series.data, function (point) {
				point.plotY = 1; // pass null test in column.drawPoints
				if (point[colorKey] === null) {
					point[colorKey] = 0;
					point.isNull = true;
				}
			});
			
			// Draw them
			seriesTypes.column.prototype.drawPoints.apply(series);
			
			each(series.data, function (point) {

				var dataLabels = point.dataLabels,
					minX = xAxis.toPixels(point._minX, true),
					maxX = xAxis.toPixels(point._maxX, true),
					minY = yAxis.toPixels(point._minY, true),
					maxY = yAxis.toPixels(point._maxY, true);

				point.plotX = Math.round(minX + (maxX - minX) * pick(dataLabels && dataLabels.anchorX, 0.5));
				point.plotY = Math.round(minY + (maxY - minY) * pick(dataLabels && dataLabels.anchorY, 0.5)); 
				
				
				// Reset escaped null points
				if (point.isNull) {
					point[colorKey] = null;
				}
			});

			// Now draw the data labels
			Highcharts.Series.prototype.drawDataLabels.call(series);
			
		}
1329917
function drawAxis(){
            svg.select('.x-axis-group .axis.x')
                .attr('transform', `translate(0, ${chartHeight})`)
                .call(xAxis);

            if (xAxisFormat !== 'custom') {
                svg.select('.x-axis-group .month-axis')
                    .attr('transform', `translate(0, ${(chartHeight + monthAxisPadding)})`)
                    .call(xMonthAxis);
            }

            if (xAxisLabel) {
                if (xAxisLabelEl) {
                    svg.selectAll('.x-axis-label').remove();
                }
                let xLabelXPosition = chartWidth/2;
                let xLabelYPosition = chartHeight + monthAxisPadding + xAxisLabelPadding;

                xAxisLabelEl = svg.select('.x-axis-group')
                  .append('text')
                    .attr('x', xLabelXPosition)
                    .attr('y', xLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('class', 'x-axis-label')
                    .text(xAxisLabel);
            }

            svg.select('.y-axis-group .axis.y')
                .attr('transform', `translate(${-xAxisPadding.left}, 0)`)
                .call(yAxis)
                .call(adjustYTickLabels);

            if (yAxisLabel) {
                if (yAxisLabelEl) {
                    svg.selectAll('.y-axis-label').remove();
                }
                // Note this coordinates are rotated, so they are not what they look
                let yLabelYPosition = -yAxisLabelPadding - xAxisPadding.left;
                let yLabelXPosition = -chartHeight/2;

                yAxisLabelEl = svg.select('.y-axis-group')
                  .append('text')
                    .attr('x', yLabelXPosition)
                    .attr('y', yLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('transform', 'rotate(270)')
                    .attr('class', 'y-axis-label')
                    .text(yAxisLabel);
            }
        }
890910
function drawGridLines() {
            svg.select('.grid-lines-group')
                .selectAll('line')
                .remove();

            if (grid === 'horizontal' || grid === 'full') {
                drawHorizontalGridLines();
            }

            if (grid === 'vertical' || grid === 'full') {
                drawVerticalGridLines();
            }

            drawHorizontalExtendedLine();
        }
900199
function drawLines(){
            let lines,
                topicLine;

            topicLine = d3Shape.line()
                .curve(curveMap[lineCurve])
                .x(({date}) => xScale(date))
                .y(({value}) => yScale(value));

            lines = svg.select('.chart-group').selectAll('.line')
                .data(dataByTopic, getTopic);

            paths = lines.enter()
              .append('g')
                .attr('class', 'topic')
              .append('path')
                .attr('class', 'line')
                .merge(lines)
                .attr('id', ({topic}) => topic)
                .attr('d', ({dates}) => topicLine(dates))
                .style('stroke', (d) => (
                    dataByTopic.length === 1 ? `url(#${lineGradientId})` : getLineColor(d)
                ));

            lines
                .exit()
                .remove();
        }
529586
def draw(svg, coords, options={})
      
      # Include options provided when the object was created
      options.merge!(@options)
      
      stroke_width = (options[:relativestroke]) ? relative(options[:stroke_width]) : options[:stroke_width]
      style = (options[:style]) ? options[:style] : ''
      
      if options[:shadow]
        svg.g(:class => 'shadow', :transform => "translate(#{relative(0.5)}, #{relative(0.5)})") {
          svg.polyline( :points => stringify_coords(coords).join(' '), :fill => 'transparent', 
                        :stroke => 'black', 'stroke-width' => stroke_width, 
                        :style => 'fill-opacity: 0; stroke-opacity: 0.35' )
          
          if options[:dots]
            coords.each { |coord| svg.circle( :cx => coord.first, :cy => coord.last + relative(0.9), :r => stroke_width, 
                                              :style => "stroke-width: #{stroke_width}; stroke: black; opacity: 0.35;" ) }
          end
        }
      end
    

      svg.polyline( :points => stringify_coords(coords).join(' '), :fill => 'none', :stroke => @color.to_s, 
                    'stroke-width' => stroke_width, :style => style  )
      
      if options[:dots]
        coords.each { |coord| svg.circle( :cx => coord.first, :cy => coord.last, :r => stroke_width, 
                                          :style => "stroke-width: #{stroke_width}; stroke: #{color.to_s}; fill: #{color.to_s}" ) }
      end
      
    end
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;
}
186451
function drawStackedAreas() {
            // Not ideal, we need to figure out how to call exit for nested elements
            if (series) {
                svg.selectAll('.layer-container').remove();
                svg.selectAll('.layer').remove();
                svg.selectAll('.area-outline').remove();
            }

            if (isUsingFakeData) {
                drawEmptyDataLine();

                return;
            }

            area = d3Shape.area()
                .curve(curveMap[areaCurve])
                .x(({data})=> xScale(data.date))
                .y0((d) => yScale(d[0]))
                .y1((d) => yScale(d[1]));

            areaOutline = d3Shape.line()
                .curve(area.curve())
                .x(({data}) => xScale(data.date))
                .y((d) => yScale(d[1]));

            if (isAnimated) {
                series = svg.select('.chart-group').selectAll('.layer')
                    .data(layersInitial, getName)
                    .enter()
                      .append('g')
                        .classed('layer-container', true);

                series
                  .append('path')
                    .attr('class', 'layer')
                    .attr('d', area)
                    .style('opacity', areaOpacity)
                    .style('fill', ({key}) => categoryColorMap[key]);

                series
                  .append('path')
                    .attr('class', 'area-outline')
                    .attr('d', areaOutline)
                    .style('stroke', ({key}) => categoryColorMap[key]);

                // Update
                svg.select('.chart-group').selectAll('.layer')
                    .data(layers)
                    .transition()
                    .delay((_, i) => areaAnimationDelays[i])
                    .duration(areaAnimationDuration)
                    .ease(ease)
                    .attr('d', area)
                    .style('opacity', areaOpacity)
                    .style('fill', ({key}) => categoryColorMap[key]);

                svg.select('.chart-group').selectAll('.area-outline')
                    .data(layers)
                    .transition()
                    .delay( (_, i) => areaAnimationDelays[i])
                    .duration(areaAnimationDuration)
                    .ease(ease)
                    .attr('d', areaOutline);

            } else {
                series = svg.select('.chart-group').selectAll('.layer')
                    .data(layers)
                    .enter()
                      .append('g')
                        .classed('layer-container', true);

                series
                  .append('path')
                    .attr('class', 'layer')
                    .attr('d', area)
                    .style('opacity', areaOpacity)
                    .style('fill', ({key}) => categoryColorMap[key]);

                series
                  .append('path')
                    .attr('class', 'area-outline')
                    .attr('d', areaOutline)
                    .style('stroke', ({key}) => categoryColorMap[key]);


                // Update
                svg.select('.chart-group').selectAll('.layer')
                    .attr('d', area)
                    .style('opacity', areaOpacity)
                    .style('fill', ({key}) => categoryColorMap[key]);

                svg.select('.chart-group').selectAll('.area-outline')
                    .attr('class', 'area-outline')
                    .attr('d', areaOutline)
                    .style('stroke', ({key}) => categoryColorMap[key]);
            }

            if (!hasOutline) {
                svg.select('.chart-group')
                  .selectAll('.area-outline')
                  .style('display', 'none');
            }

            // Exit
            series.exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
6523
def draw(svg, coords, options = {})
      coords.each_with_index do |coord,idx|
        next if coord.nil?
        x, y, bar_height = (coord.first), coord.last, 1#(height - coord.last)
        
          valh = max_value + min_value * -1 #value_height
          maxh = max_value * height / valh #positive area height
          minh = min_value * height / valh #negative area height
          #puts "height = #{height} and max_value = #{max_value} and min_value = #{min_value} and y = #{y} and point = #{points[idx]}"
          if points[idx] > 0
            bar_height = points[idx]*maxh/max_value
          else
            bar_height = points[idx]*minh/min_value
          end
        
        #puts " y = #{y} and point = #{points[idx]}"  
        unless options[:border] == false
          svg.g(:transform => "translate(-#{relative(0.5)}, -#{relative(0.5)})") {
            svg.rect( :x => x, :y => y, :width => @bar_width + relative(1), :height => bar_height + relative(1), 
                      :style => "fill: black; fill-opacity: 0.15; stroke: none;" )
            svg.rect( :x => x+relative(0.5), :y => y+relative(2), :width => @bar_width + relative(1), :height => bar_height - relative(0.5), 
                      :style => "fill: black; fill-opacity: 0.15; stroke: none;" )
          }
        end
        
        current_colour = color.is_a?(Array) ? color[idx % color.size] : color
        
        svg.rect( :x => x, :y => y, :width => @bar_width, :height => bar_height, 
          :fill => current_colour.to_s, 'style' => "opacity: #{opacity}; stroke: none;" )
      end
    end
793052
function buildContainerGroups(){
            let container = svg
              .append('g')
                .classed('container-group', true)
                .attr('transform', `translate(${margin.left},${margin.top})`);

            container
              .append('g').classed('x-axis-group', true)
              .append('g').classed('axis x', true);
            container.selectAll('.x-axis-group')
              .append('g').classed('month-axis', true);
            container
              .append('g').classed('y-axis-group', true)
              .append('g').classed('axis y', true);
            container
              .append('g').classed('grid-lines-group', true);
            container
              .append('g').classed('chart-group', true);
            container
              .append('g').classed('metadata-group', true);
        }
358739
function drawLegend(obj) {
            if (obj.data) {

                svg.select('.donut-text')
                    .text(() => centeredTextFunction(obj.data))
                    .attr('dy', '.2em')
                    .attr('text-anchor', 'middle');

                svg.select('.donut-text').call(wrapText, legendWidth);
            }
        }
86894
function drawLine(){
            if (topLine) {
                svg.selectAll('.line').remove();
            }

            topLine = d3Shape.line()
                .curve(d3Shape.curveBasis)
                .x(({date}) => xScale(date))
                .y(({value}) => yScale(value));

            svg.select('.chart-group')
              .append('path')
                .datum(data)
                .attr('class', 'line')
                .attr('stroke', `url(#${lineGradientId})`)
                .attr('d', topLine)
                .attr('clip-path', `url(#${maskingClipId})`);
        }
1018976
function () {
		var series = this,
			chart = series.chart,
			renderer = chart.renderer,
			groupTranslation,
			//center,
			graphic,
			group,
			shadow = series.options.shadow,
			shadowGroup,
			shapeArgs;


		// draw the slices
		each(series.data, function (point) {
			graphic = point.graphic;
			shapeArgs = point.shapeArgs;
			group = point.group;
			shadowGroup = point.shadowGroup;

			// put the shadow behind all points
			if (shadow && !shadowGroup) {
				shadowGroup = point.shadowGroup = renderer.g('shadow')
					.attr({ zIndex: 4 })
					.add();
			}

			// create the group the first time
			if (!group) {
				group = point.group = renderer.g('point')
					.attr({ zIndex: 5 })
					.add();
			}

			// if the point is sliced, use special translation, else use plot area traslation
			groupTranslation = point.sliced ? point.slicedTranslation : [chart.plotLeft, chart.plotTop];
			group.translate(groupTranslation[0], groupTranslation[1]);
			if (shadowGroup) {
				shadowGroup.translate(groupTranslation[0], groupTranslation[1]);
			}


			// draw the slice
			if (graphic) {
				graphic.animate(shapeArgs);
			} else {
				point.graphic =
					renderer.arc(shapeArgs)
					.attr(extend(
						point.pointAttr[NORMAL_STATE],
						{ 'stroke-linejoin': 'round' }
					))
					.add(point.group)
					.shadow(shadow, shadowGroup);
			}

			// detect point specific visibility
			if (point.visible === false) {
				point.setVisible(false);
			}

		});

	}