guilhermesimoes/index.html Secret

## index.html
<!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>

<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-color.v0.3.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.4.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.5.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.6.min.js"></script>
<script src="https://d3js.org/d3-axis.v0.2.min.js"></script>
<script type="text/javascript">
"use strict";

/* 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>
	<!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>

	<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
	<script src="https://d3js.org/d3-color.v0.3.min.js"></script>
	<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v0.4.min.js"></script>
	<script src="https://d3js.org/d3-scale.v0.5.min.js"></script>
	<script src="https://d3js.org/d3-selection.v0.6.min.js"></script>
	<script src="https://d3js.org/d3-axis.v0.2.min.js"></script>
	<script type="text/javascript">
	"use strict";

	/* 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>