Built with blockbuilder.org
This visualization was inspired by one of Tamara Munzner's examples in Visualization Design and Analysis. I built this from scratch to experiment with some scales.
Last active
October 4, 2017 03:01
-
-
Save RobertDelgado/bd7fdc6f48e9b08c867aab2a3fe454cd to your computer and use it in GitHub Desktop.
Playing with hues
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| r1 {font-size: 30} | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var data1 = [ | |
| {x:20, y:30}, | |
| {x: 50, y:30}, | |
| {x:80, y:30}, | |
| {x:110, y:30}]; | |
| var data2 = [ | |
| {x:20, y:50}, | |
| {x: 50, y:50}, | |
| {x:80, y:50}, | |
| {x:110, y:50}]; | |
| // 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) | |
| margin = {top:75, right:20, bottom: 20, left:200}; | |
| xScale = d3.scaleLinear().domain([0,150]).range([0,500]); | |
| yScale = d3.scaleLinear().domain([0, 150]).range([0,500]); | |
| //var colorScale1 = d3.scaleSequential(d3.interpolateCool).domain([0, 200]); | |
| //var colorScale1 = d3.scaleSequential(d3.interpolateBlues).domain([0, 100]); | |
| var colorScale1 = d3.scaleSequential(d3.interpolateGreys).domain([0, 100]); | |
| var colorScale2 = d3.scaleSequential(d3.interpolateGreens).domain([0,200]); | |
| var g = svg.append('g') | |
| .attr('transform', `translate(${margin['left']},${margin['top']})`); | |
| var enter = g.selectAll('r1').data(data1).enter() | |
| enter.append('rect') | |
| .attr('class','r1') | |
| .attr('x', function(d){return(xScale(d.x));}) | |
| .attr('y', function(d){return(yScale(d.y));} ) | |
| .attr('height', 30) | |
| .attr('width', 30) | |
| .attr('fill', function(d){return(colorScale1(d.x));}) | |
| var enter = g.selectAll('r2').data(data2).enter() | |
| enter.append('rect') | |
| .attr('class','r2') | |
| .attr('x', function(d){return(xScale(d.x));}) | |
| .attr('y', function(d){return(yScale(d.y));} ) | |
| .attr('height', 30) | |
| .attr('width', 30) | |
| .attr('fill', function(d){return(colorScale2(d.x));}) | |
| svg.append("text") | |
| .text("Exercise in mechanics: Playing with hues and color scales") | |
| .attr("y", 70) | |
| .attr("x", 70) | |
| .attr("font-size", 25) | |
| .attr("font-family", "monospace") | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment