How to use the d3.scale function in d3

var margin = opts.margin;
    var padding = opts.padding;

    if (!(inData.length && inData[0].parts.length)) {
      console.log("No data to display");
      return;
    }
    // get bounds of mountElem to responsively set width
    // var bounds = d3.select(mountElem).node().getBoundingClientRect();

    // normalize data
    var data = normalizeData(inData, opts);

    // === Drawing settings
    // [width, 0] makes the normalization step easier/prettier
    var xScale = d3.scale.linear()
          .range([width, 0]);

    var yScale = d3.scale.ordinal()
          .rangeRoundBands([0, height], .1);

    // Adapt yScale to data dimensions to ensure consistent spacing
    yScale.domain(_.map(data, function(d) { return d.prefix; }));

    var colors = d3.scale.category20();

    var svg;
    if (d3.select(mountElem).select("svg").empty()) {
      // Mount main SVG element
      svg = d3.select(mountElem)
        .append("svg")
        .attr("preserveAspectRatio", "xMaxYMin meet")

function link(scope, element, attrs) {
    const svgWidth = attrs.width ? +attrs.width : 400;
    const svgHeight = scope.height = attrs.height ? +attrs.height : 400;

    // TODO - do we want to label the y axis?
    const margin = { top: 0, right: 15, bottom: 20, left: 15 };
    const infoLabelHeight = 15;

    const chartWidth = svgWidth - (margin.left + margin.right);
    const chartHeight = svgHeight - (margin.top + margin.bottom + infoLabelHeight);

    let xScale = d3.scale.linear().range([0, chartWidth]);
    let yScale = d3.scale.linear().range([chartHeight, 0]);
    let xAxisMin = 0;
    let xAxisMax = 1;
    let chartGroup;

    const distributionArea = d3.svg.area()
      .x(function (d) { return xScale(d.x); })
      .y0(function () { return yScale(0); })
      .y1(function (d) { return yScale(d.y); });

    const MIN_BAR_WIDTH = 3;  // Minimum bar width, in pixels.

    element.on('$destroy', function () {
      scope.$destroy();
    });

selectedNum * selectionMargin * 2 - boxGroupSpacing;

                // define function for plotting box plots
                boxPlot = d3.box()
                    .whiskers(iqr(1.5))
                    .width(boxGroupWidth)
                    .height(height)
                    .domain([(1 - marginRatio) * min, max]);


                // calculate offset for the left margin to align the plot to the center
                let leftMargin = ((width + margin.right + margin.left) / 2 - chartWidth / 2).clamp(margin.left, Infinity);

                if (leftMargin !== margin.left) currentScrollOffset = 0;

                let yScale = d3.scale.linear()
                    .domain([0.95 * min, max])
                    .range([height, 0]);

                let yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .innerTickSize(-width);

                chart.attr("transform", `translate(${0}, ${margin.top})`);

                svg.select("g.axis")
                    .attr("transform", `translate(${margin.left - 10},0)`)
                    .call(yAxis);


                data = data.map((d, i) => {

it('passes XY scales and margins through if both are provided', () => {
    const props = {
      scale: {
        x: d3.scale.linear().domain([-1, 1]).range([0, 400]),
        y: d3.scale.linear().domain([-2, 2]).range([10, 300])
      },
      margin: {top: 11, bottom: 21, left: 31, right: 41}
    };
    const wrapped = TestUtils.renderIntoDocument();
    const rendered = TestUtils.findRenderedComponentWithType(wrapped, Chart);

    ['scale', 'margin'].forEach(propKey => {
      expectRefAndDeepEqual(rendered.props[propKey], props[propKey]);
    })
  });

export function colorScale() {
  let chart = new BasicChart();
  let svg = chart.chart;

  let rings = 15;
  let colors = d3.scale.category20b();
  let angle = d3.scale.linear().domain([0, 20]).range([0, 2*Math.PI]);

  let arc = d3.svg.arc()
    .innerRadius((d) => d*50/rings)
    .outerRadius((d) => 50+d*50/rings)
    .startAngle((d, i, j) => angle(j))
    .endAngle((d, i, j) => angle(j+1));

  let shade = {
    darker: (d, j) => d3.rgb(colors(j)).darker(d/rings),
    brighter: (d, j) => d3.rgb(colors(j)).brighter(d/rings)
  };

  [
    [100, 100, shade.darker],
    [300, 100, shade.brighter]
  ].forEach(function (conf) {

import React, { Component, PropTypes } from 'react';
import d3 from 'd3';
import copy from 'deepcopy';
import equal from 'deep-equal';

const WIDTH = 800;
const HEIGHT = 400;
const DURATION = 750;
const color = d3.scale.category20b();

export default class Treemap extends Component {
  static displayName = 'Treemap';
  static propTypes = {
    data: PropTypes.object.isRequired,
    path: PropTypes.array.isRequired,
    onMoveDown: PropTypes.func.isRequired,
    onShowDetail: PropTypes.func.isRequired,
    onHideDetail: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);

    this.treemap = d3.layout.treemap()
      .children(d => d.children)

function initScales(width, height) {
				xScale = d3.scale.linear().range([0, width]);
				yScale = d3.scale.ordinal().rangeBands([0, height], 0.18);
			}

getYScale() {
    return d3.scale
      .linear()
      .range([this.height, 0])
      .domain([this.yMin, this.yMax]);
  }

top: 40,
      right: 40,
      bottom: 100,
      left: 80
    };

    var width = Math.min(Math.max(
      $('.tabs-container').width() - 40,
      30 * data.length), 100 * data.length);

    var height = $('.tabs-container').height() - margin.top - margin.bottom;

    var x = d3.scale.ordinal().rangeRoundBands(
      [0, width], .1);

    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")
      .ticks(10, "%");

    var d3Container = d3.select(selector);

    var svg = d3Container.append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)

function initScale(type) {
    switch(type) {
        case 'number': return d3.scale.linear();
        case 'ordinal': return d3.scale.ordinal();
        case 'time': return d3.time.scale();
    }
}