Based on example from Generative Design Hello, Color P.1.0 book
The ability to directly influence 16, 777, 216 colours gives us amazing freedom. Simultaneous contrast–without which it would be be possible to perceive colors–is illustrated here by juxtaposing a number of color combinations...
The x-value of the mouse position defines the size of the inside colour field, the y-value the hue.
| (function() { | |
| 'use strict'; | |
| var w = 720, | |
| h = 720; | |
| // https://github.com/mbostock/d3/wiki/Colors#hsl | |
| var hueScale = d3.scale.linear().domain([0, w]).range([0, 360]), | |
| hueScaleR = d3.scale.linear().domain([0, w]).range([360, 0]), | |
| squareScale = d3.scale.linear().domain([0, w]).range([10, h]); | |
| var square = 100; | |
| // create the svg | |
| var svg = d3.select('#colours').append('svg') | |
| .attr({ | |
| width: w, | |
| height: h | |
| }); | |
| var squareCanvas = svg.append('rect') | |
| .attr({ | |
| fill: d3.hsl(360, 1, 0.5), | |
| x: 0, | |
| y: 0, | |
| width: w, | |
| height: h | |
| }); | |
| var squareSmall = svg.append('rect') | |
| .attr({ | |
| fill: d3.hsl(180, 1, 0.5), | |
| x: w/2 - (square/2), | |
| y: h/2 - (square/2), | |
| width: square, | |
| height: square | |
| }); | |
| var positionLabel = svg.append('text') | |
| .attr({ | |
| x: 10, | |
| y: 20 | |
| }); | |
| svg.on('mousemove', function () { | |
| // scale the size of square using mouse position | |
| square = function () { return squareScale(mouseX()); }; | |
| // feedback for position | |
| positionLabel.text('x: ' + mouseX() + ' | y: ' + mouseY()); | |
| // update colour of background | |
| squareCanvas.attr('fill', function () { | |
| return d3.hsl(hueScale(mouseY()), 1, 0.5); | |
| }); | |
| // update the small square | |
| squareSmall | |
| .attr({ | |
| fill: function () { return d3.hsl(hueScaleR(mouseY()), 1, 0.5); }, | |
| x: w/2 - (square()/2), | |
| y: h/2 - (square()/2), | |
| width: square(), | |
| height: square() | |
| }); | |
| }); | |
| function mouseX() { | |
| var x = d3.mouse(svg.node()); | |
| return x[0]; | |
| } | |
| function mouseY() { | |
| var y = d3.mouse(svg.node()); | |
| return y[1]; | |
| } | |
| // just for blocks viewer size | |
| d3.select(self.frameElement).style('height', '760px'); | |
| }()); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | hello colour hsl Generative Design</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script> --> | |
| </head> | |
| <section id='colours'></section> | |
| <script src="d3_code_hello_colour.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
| body { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| background-color: #130C0E; | |
| padding: 20px; | |
| } | |
| svg { | |
| cursor: none; | |
| } | |
| svg text { | |
| fill: #130C0E; | |
| } | |
