Built with blockbuilder.org
Last active
December 17, 2016 16:41
-
-
Save RobinL/6b27f9abc591002779d294f1fdff6b72 to your computer and use it in GitHub Desktop.
logarithmic colour scale
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Feel free to change or delete any of the code you see in this editor! | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| var domain = [0.5,10] | |
| var range = [0,500] | |
| var colour_range = ["#6AE817","#FFA200", "#B30409"] | |
| g = svg.append("g") | |
| .attr("transform","translate(100,100)") | |
| var logScale = d3.scaleLog().domain(domain).range(range) | |
| var linearScale = d3.scaleLinear().domain(domain).range(range) | |
| //Map colours across the range in equal intervals | |
| var num_colours = colour_range.length | |
| var diff = range[1] - range[0] | |
| var step = diff / (colour_range.length - 1) | |
| var for_inversion = d3.range(num_colours).map(function(d) {return range[0] + d*step}) | |
| var log_colour_values = for_inversion.map(logScale.invert) | |
| var logColour_scale = d3.scaleLog().domain(log_colour_values).range(colour_range) | |
| debugger; | |
| //Now plot rectangles | |
| var num_rectangles = 100 | |
| var step = diff/num_rectangles | |
| var rect_data = d3.range(num_rectangles).map(function(d) {return range[0] + d*step}) | |
| g.selectAll("rect").data(rect_data).enter() | |
| .append("rect") | |
| .attr("x", function(d) {return d}) | |
| .attr("y", function(d) {return 100}) | |
| .attr("height", function(d) {return 20}) | |
| .attr("width", function(d) {return diff/num_rectangles}) | |
| .attr("fill", function(d) { | |
| return logColour_scale(logScale.invert(d)) | |
| }) | |
| g | |
| .append("rect") | |
| .attr("x", function(d) {return d}) | |
| .attr("y", function(d) {return 200}) | |
| .attr("height", function(d) {return 20}) | |
| .attr("width", function(d) {return diff/num_rectangles}) | |
| .attr("fill", function(d) { | |
| return logColour_scale(0.5) | |
| }) | |
| //What number in the domain is half way along the logscale? | |
| var axis = d3.axisBottom(logScale).tickFormat(d3.format(",.1f")) | |
| g.call(axis) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment