d3-scale experiments

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chart-container {
    position: relative;
}

.chart-container .controls {
    position: absolute;
    top: 12px;
    left: 18px;
}

.chart path,
.chart line,
.chart rect {
    shape-rendering: crispEdges;
}

.chart .axis path,
.chart .axis line {
    fill: none;
    stroke: #000;
}

.chart .linear .point {
    fill: steelblue;
}

.chart .pow .point {
    fill: #CD4638;
}

</style>
<body>

<div class="chart-container js-chart-container">
    <form class="controls">
        Scale:
        <label><input type="radio" name="x-scale" value="power2" checked>Power2</label>
        <label><input type="radio" name="x-scale" value="linear">Linear</label>
        <label><input type="radio" name="x-scale" value="sqrt">SquareRoot</label>
        <label><input type="radio" name="x-scale" value="log2">Log2</label>
        <label><input type="radio" name="x-scale" value="log10">Log10</label>
    </form>
    <svg class="chart js-chart"></svg>
</div>

/* global d3_scale, d3_selection, d3_axis, document */
var chart = {
    margin: { top: 40, right: 25, bottom: 20, left: 25 },

animationDuration: 400,

scales: {
        power2: d3_scale.scalePow().exponent(2),
        linear: d3_scale.scaleLinear(),
        sqrt:   d3_scale.scalePow().exponent(0.5),
        log2:   d3_scale.scaleLog().base(2),
        log10:  d3_scale.scaleLog().base(10)
    },

init: function (container, data) {
        this.el = d3_selection.select(".js-chart")
            .attr("width", container.width)
            .attr("height", container.height);

this.width  = container.width - this.margin.left - this.margin.right;
        this.height = container.height - this.margin.top - this.margin.bottom;

this.adaptScales();
        this.setXScale();
        this.draw(data);

d3_selection.selectAll(".js-chart-container input").on("click", this.changeXScale.bind(this));
    },

draw: function (data) {
        var mainGroup, series;

mainGroup = this.el.append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

series = mainGroup.selectAll(".series").data(data)
            .enter().append("g")
                .attr("class", function (d) { return "series " + d.name; });

this.points = series.selectAll(".point").data(function (d) { return d.points; })
            .enter().append("circle")
                .attr("class", "point")
                .attr("cx", this.xScale)
                .attr("cy", this.height / 2)
                .attr("r", 6);

this.points.append("title")
           .text(String);

this.xAxis = d3_axis.axisBottom(this.xScale);

this.domXAxis = mainGroup.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + this.height + ")")
            .call(this.xAxis);
    },

redraw: function () {
        this.domXAxis.call(this.xAxis.scale(this.xScale));
        this.points.attr("cx", this.xScale);
    },

adaptScales: function () {
        Object.keys(this.scales).forEach(function (scaleType) {
            var scale;

scale = this.scales[scaleType];
            this.scales[scaleType] = scale.domain([1, 1000]).range([0, this.width]);
        }, this);
    },

changeXScale: function () {
        this.setXScale();
        this.redraw();
    },

setXScale: function () {
        var scaleType;

scaleType = d3_selection.select(".js-chart-container input:checked").node().value;
        this.xScale = this.scales[scaleType];
    }
};

var container = {
    width: document.querySelector(".js-chart-container").clientWidth,
    height: 300
};

var data = [
    {
        name: "linear",
        points: [300, 400, 500, 600]
    },
    {
        name: "pow",
        points: [1, 10, 100, 1000]
    }
];

chart.init(container, data);

</script>
</body>

https://d3js.org/d3-array.v0.7.min.js

https://d3js.org/d3-color.v0.3.min.js

https://d3js.org/d3-format.v0.5.min.js

https://d3js.org/d3-interpolate.v0.4.min.js

https://d3js.org/d3-scale.v0.5.min.js

https://d3js.org/d3-selection.v0.6.min.js

https://d3js.org/d3-axis.v0.2.min.js