-
-
Save guilhermesimoes/af7ef9fe50c7c71b2165 to your computer and use it in GitHub Desktop.
d3-scale experiments
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment