How to use the d3.svg function in d3

// Set the ranges
      var x = d3.time.scale().range([margin.left - 30, width - margin.right]);
      var prevBackupsX = d3.time.scale().range([0, width - margin.right]);

      // Define the axes
      function getTicks(period) {
        switch(period) {
          case "year":
            return 5;
            break;
          default: return 7;
        }
      }

      var xAxis = d3.svg.axis().scale(x)
          .orient("bottom").ticks(getTicks(this.state.period))
          .tickSize(0)
          .tickFormat(d3.time.format(tickFormat));

      // Adds the svg canvas
      var svg = d3.select("#copy-history .inside")
          .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)

  		var clip = svg.append("svg:clipPath")
  		  .attr("id", "clip")
  			.append('svg:rect')
  			.attr('width', width)
  			.attr('height', 40)
  			.attr('transform', 'translate('+ [0,55]+')' )

canvas
    .attr('width', width)
    .attr('height', height);

    const context = canvas.node().getContext('2d');
    context.imageSmoothingEnabled = false;

    // update the y scale, based on the data extents
    const ext = extent || d3.extent(data, d => d.y);

    const max = Math.max(-ext[0], ext[1]);
    y.domain([0, max]);

    // x = d3.scaleTime().domain[];
    axis = d3.svg.axis(x).ticks(5);

    context.clearRect(0, 0, width, height);
    // context.translate(0.5, 0.5);

    // the data frame currently being shown:
    const startIndex = Math.floor(Math.max(0, -(offsetX / step)));
    const endIndex = Math.floor(Math.min(data.length, startIndex + (width / step)));

    // skip drawing if there's no data to be drawn
    if (startIndex > data.length) {
      return;
    }

    // we are drawing positive & negative bands separately to avoid mutating canvas state
    // http://www.html5rocks.com/en/tutorials/canvas/performance/
    let negative = false;

setupScales: function() {
      var xdomain = this.model.get('xdomain'),
          ydomain = this.model.get('ydomain'),
          type = this.model.get('type');
      this.state.xscales = this.makeScales('x', xdomain, [0+5, this.state.w-5], type);
      this.state.yscales = this.makeScales('y', ydomain, [this.state.h, 10], 'num');


      // create axes
      this.state.xaxis = d3.svg.axis()
        .scale(this.state.xscales)
        .orient('bottom');
      this.state.yaxis = d3.svg.axis()
        .scale(this.state.yscales)
        .orient('left');

      var nticks = util.estNumXTicks(
          this.state.xaxis, 
          this.model.get('type'), 
          this.state.w
      );
      util.setAxisLabels(this.state.xaxis, this.model.get('type'), nticks);
      this.state.yaxis.ticks(2).tickSize(0,0);
    },

})
      }
    })

    // initialize radii
    outerRadius = (width > height) ? (height / 2) - 60 : (width / 2) - 5;
    innerRadius = 5;

    cg.attr('transform', `translate(${width / 2 - outerRadius}, ${2 * outerRadius + 30})`)

    layout = d3.layout.pie()
      .value((d) => d.value)
      .padAngle((d) => 3 * Math.PI / 180)
      .sort(null);

    arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius((d) => outerRadius * (d.data.value / (d.data.slots + 10)));

    paths = g.selectAll('paths.spellcircle-section').data(layout(data));
    labels = lg.selectAll('text.spellcircle-label').data(layout(data));
    cantrips = cg.selectAll('rect.spellcircle-cantrips').data(dataCantrip);
    cantripLabel = cg.selectAll('text.spellcircle-label').data(dataCantrip);

    // Entering
    paths.enter()
      .append('path')
      .attr('class', 'spellcircle-section')
      .attr('style', 'stroke-width: 2px')
      .attr('fill', '#d9edf7')
      .attr('d', arc);

for (let i = 0; i < data.length; i++) {
                    if (i == 0) 
                        cumValues.push({'id': 0, 'chr': data[i][0], 'pos': 0});
                    else 
                        cumValues.push({'id': i, 'chr': data[i][0], 'pos': cumValues[i-1].pos + +data[i-1][1]});
                }

                gAxis = gSelect.append('g')
                .classed('x axis', true);

                console.log('cumValues:', cumValues);

                let bisect = d3.bisector(function(d) { return d.pos; }).left;

                xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .tickValues(function() {
                    if (xScale != null) {
                        console.log('xScale.domain()[0]', xScale.domain()[0], xScale.domain()[1])
                        console.log('bs0:', bisect(cumValues, xScale.domain()[0]))
                        console.log('bs1:', bisect(cumValues, xScale.domain()[1]))

                        let ticks = xScale.ticks(3);
                        let chrLeft = bisect(cumValues, ticks[0]);
                        let chrRight = bisect(cumValues, ticks[ticks.length-1]);

                        if (chrLeft != chrRight) {
                            let ticks = xScale.ticks(3);
                            console.log('ticks:', ticks);
                            return ticks;

const getYAxisWidth = (id, config) => {
    if (config.padding.hasCustomPadding) {
        return config.padding.left;
    }
    const scale = d3.scale
        .ordinal()
        .domain(getYAxisDomain(config.axis.y.trackList))
        .range([0, ...getYAxisRange(config.axis.y.trackList)]);
    const axis = d3.svg
        .axis()
        .scale(scale)
        .orient(AXES_ORIENTATION.Y.LEFT);
    const dummy = d3.select("body").append("div");
    const svg = dummy.append("svg");
    const yAxisSVG = svg.append("g").call(axis);
    const width = yAxisSVG.node().getBoundingClientRect().width;
    dummy.remove();
    return width;
};
/**

.pie()
      .value(function(d) {
        return d.value;
      })
      .sort(null)
      .padAngle(0.03);

    var w = 200,
      h = 200;

    var outerRadius = w / 2;
    var innerRadius = 75;

    var color = d3.scale.category10();

    var arc = d3.svg
      .arc()
      .outerRadius(outerRadius)
      .innerRadius(innerRadius);

    var svg = d3
      .select(`#${element}`)
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('viewBox', -w / 2 + ' ' + -h / 2 + ' ' + w + ' ' + h)
      .attr('preserveAspectRatio', 'xMinYMin')
      .append('g');
    var path = svg
      .selectAll('path')
      .data(pie(dataset))
      .enter()

if (value > max) max = Math.ceil(value);
      if (value < min) min = Math.floor(value);
    });
  });

  const yscale = d3.scale
    .linear()
    .domain([min * 0.99, max * 1.01])
    .range([height, 0]);

  const chart = box()
    .whiskers(calcIqr(1.5))
    .width(boxWidth - 2 * margin.inner)
    .height(height)
    .domain([min * 0.99, max * 1.01]);
  const xAxis = d3.svg
    .axis()
    .scale(xscale)
    .orient("bottom");

  const yAxis = d3.svg
    .axis()
    .scale(yscale)
    .orient("left");

  const xLines = d3.svg
    .axis()
    .scale(xscale)
    .tickSize(height)
    .orient("bottom");

  const yLines = d3.svg

function createAreaChart(data) {

	var div = document.createElement('div');

	var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = data.width  - margin.left - margin.right,
    height = data.height - margin.top - margin.bottom;

	var x = d3.scale.linear()
	    .range([0, width]);

	var y = d3.scale.linear()
	    .range([height, 0]);

	var xAxis = d3.svg.axis()
	    .scale(x)
	    .orient("bottom");

	var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left");

	var area = d3.svg.area()
	    .x(function(d) { return x(d.xValue); })
	    .y0(height)
	    .y1(function(d) { return y(d.yValue); });

	var svg = d3.select(div).append("svg")
	    .attr("width", width + margin.left + margin.right)
	    .attr("height", height + margin.top + margin.bottom)
	    .append("g")

if(self.updates["update_y"])
  {
    var total_width = self.options.width;
    var total_height = self.options.height;
    var width = Math.min(self.options.width, self.options.height);
    var height = Math.min(self.options.width, self.options.height);
    var width_offset = (total_width - width) / 2
    var height_offset = (total_height - height) / 2
    var range = [total_height - height_offset - self.options.border - 40, 0 + height_offset + self.options.border];
    var range_canvas = [height - (2 * self.options.border) - 40, 0];
    self.y_axis_offset = 0 + width_offset + self.options.border;

    self.y_scale = self._createScale(self.options.y_string, self.options.scale_y, range, false);
    self.y_scale_canvas = self._createScale(self.options.y_string, self.options.scale_y, range_canvas, false);

    self.y_axis = d3.svg.axis().scale(self.y_scale).orient("left");
    self.y_axis_layer
      .attr("transform", "translate(" + self.y_axis_offset + ",0)")
      .call(self.y_axis)
      ;
  }

  if(self.updates["update_indices"])
  {
    self.inverse_indices = {};
    var count = self.options.indices.length;
    for(var i = 0; i != count; ++i)
      self.inverse_indices[self.options.indices[i]] = i;
  }

  if(self.updates["update_x_label"])
  {