Google News
D3.js - Interview Questions
Explain about d3.js Scales?
D3.js provides scale functions to perform data transformations. These functions map an input domain to an output range. D3 provides the following scaling methods for different types of charts.

Scale Type Method Description
Continuous d3.scaleLinear() Construct continuous linear scale where input data (domain) maps to specified output range.
  d3.scaleIdentity() Construct linear scale where input data is the same as output.
  d3.scaleTime() Construct linear scale where input data is in dates and output in numbers.
  d3.scaleLog() Construct logarithmic scale.
  d3.scaleSqrt() Construct square root scale.
  d3.scalePow() Construct exponential scale.
Sequential d3.scaleSequential() Construct sequential scale where output range is fixed by interpolator function.
Quantize d3.scaleQuantize() Construct quantize scale with discrete output range.
Quantile d3.scaleQuantile() Construct quantile scale where input sample data maps to discrete output range.
Threshold d3.scaleThreshold() Construct scale where arbitrary input data maps to discrete output range.
Band d3.scaleBand() Band scales are like ordinal scales except the output range is continuous and numeric.
Point d3.scalePoint() Construct point scale.
Ordinal d3.scaleOrdinal() Construct ordinal scale where input data includes alphabets and are mapped to discrete numeric output range.

Example : 
<div class="container">
    <h1>D3 Color Scales</h1>
    <div id="chart"></div>
var bardata = [90, 45, 25, 15, 10, 7];
var height = 400,
    width = 600,
    barWidth = 50,
    barOffset = 5;

var colors = d3.scale.linear()
    .domain([0, bardata.length])
    .range(['#C61C6F', '#B58929']);

var yScale = d3.scale.linear()
    .domain([0, d3.max(bardata)])
    .range([0, height]);

var xScale = d3.scale.ordinal()
    .domain(d3.range(0, bardata.length))
    .rangeBands([0, width]);'#chart').append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('background', '#C9D7D6')
    .style('fill', function (d, i) {
        return colors(i);
    .attr('width', xScale.rangeBand() - 10)
    .attr('height', function (d) {
        return yScale(d);
    .attr('x', function (d, i) {
        return xScale(i);
    .attr('y', function (d) {
        return height - yScale(d);