Last active
January 9, 2017 22:45
-
-
Save zanarmstrong/c0f07275634de1f12769 to your computer and use it in GitHub Desktop.
Color Interpolation test
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
| #svgContainer { | |
| width:2000px; | |
| height:3000px; | |
| background-color:white; | |
| } | |
| p, h2 { | |
| font-family:'Oxygen'; | |
| max-width: 2000px; | |
| } | |
| .verticalLine { | |
| border-top:thin solid #aaa; | |
| line-height: 140%; | |
| } |
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
| var w = 1000; | |
| var h = 500; | |
| var num = 20; | |
| var radius = w / num / 6; | |
| var ylevel = 30; | |
| var color = 'darkred' | |
| // change colors in colorlist to interpolate between different colors! | |
| var colorlist = [color, 'blue']; | |
| var functionlist = [d3.interpolateRgb, d3.interpolateHsl, d3.interpolateHcl]; | |
| //Create SVG elements | |
| var createsvg = function (w, h) { | |
| svg = d3.select("#forSVG") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| } | |
| // create array of color interpolating functions | |
| var s = []; | |
| for (var i = 0; i < functionlist.length; i++) { | |
| s.push(d3.scale.linear() | |
| .domain([0, num]) | |
| .interpolate(functionlist[i]) | |
| .range([colorlist[0], colorlist[1]])); | |
| } | |
| var expanddata = function (arrayoffunc, num, startingX, startingY, radius, ySep) { | |
| var data = []; | |
| for (var i = 0; i < arrayoffunc.length; i++) { | |
| var ylevel = startingY + i * ySep; | |
| for (var j = 0; j < num; j++) { | |
| data.push([arrayoffunc[i](j), startingX + j * 2 * radius, ylevel]); | |
| } | |
| } | |
| return data; | |
| } | |
| // draw the circles! | |
| createsvg() | |
| svg.selectAll('x') | |
| .data(expanddata(s, num, radius, ylevel, radius, 4 * radius)) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d) { | |
| return d[1] | |
| }) | |
| .attr("cy", function (d) { | |
| return d[2] | |
| }) | |
| .attr("r", radius) | |
| .attr("opacity", 1) | |
| .attr("fill", function (d) { | |
| return d[0] | |
| }); | |
| // add html | |
| var overview = document.getElementById('overview'); | |
| overview.innerHTML = '<p>Interpolation between ' + colorlist[0] + | |
| ' and ' + colorlist[1] + | |
| ' using RGB, HSL, or HCL</p>'; |
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
| <!-- note: this code is one of the first things I wrote in D3... which I just moved from jsfiddle to github, so there may be weirdness is how things are implemented --> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Color Interpolation</title> | |
| <link href='https://fonts.googleapis.com/css?family=Oxygen:300normal,400normal,700normal' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="colorInterpolation.css"> | |
| <body> | |
| <h2>Interpolating Between Colors</h2> | |
| <p id="overview"></p> | |
| <div id="forSVG"></div> | |
| <p>To try different colors, use the jsfiddle example <a href="https://fiddle.jshell.net/HvTcN/6/">here</a>.</p> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="colorInterpolation.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment