##Explanation If viewing as a d3 block on color scales, click Open below the graphic to see full graphic. Displays the four d3 color scales plus all of Cynthia Brewer's color brewer themes. Method here is to use javascript to apply colour; note that you can use CSS instead by assigning class names to SVG elements.
Last active
October 19, 2016 14:34
-
-
Save emmasaunders/52fa83767df27f1fc8b3ee2c6d372c74 to your computer and use it in GitHub Desktop.
d3 color scales & colorbrewer (v3)
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> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>D3 and colorbrewer color ranges in d3.js</title> | |
| <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://colorbrewer2.org/export/colorbrewer.js"></script> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| text { | |
| font-family: arial; | |
| font-size: 12px; | |
| } | |
| text.blue { fill: mediumblue; } | |
| text.red { fill: crimson; } | |
| text.green { fill: darkgreen; } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: slategray; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var chartWidth = 300; | |
| var chartHeight = 50; | |
| var f = d3.scale.category10(); | |
| var g = d3.scale.category20(); | |
| var h = d3.scale.category20b(); | |
| var ii = d3.scale.category20c(); | |
| var colorScales = [f,g,h,ii]; | |
| var colorLen = [10,20,20,20]; | |
| var svg = d3.select("body").append("svg").attr("id","svg").attr("width","100%").attr("height","300%"); | |
| var newY = 0; | |
| var colorNames = ['Colour & category 10','Colour & category 20','Colour & category 20b','Colour & category 20c']; | |
| for (var p=0; p<colorScales.length; p++) { | |
| var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")"); | |
| svgGroup.append("text").attr("class","green").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(colorNames[p]); | |
| for (var q=0; q<colorLen[p]; q++) { | |
| svgGroup.append("rect").attr("x",(q*15)+270).attr("y","-7").attr("width","14").attr("height","14").attr("fill",colorScales[p](q)); | |
| } | |
| } | |
| newY += chartHeight*colorScales.length; | |
| var brewer = d3.entries(colorbrewer); | |
| for (var p=0; p<brewer.length; p++) { | |
| var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")"); | |
| svgGroup.append("text").attr("class","green").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(brewer[p].key); | |
| for (var q=0; q<brewer[p].value[d3.keys(brewer[p].value).map(Number).sort(d3.descending)[0]].length; q++) { | |
| svgGroup.append("rect").attr("x",(q*15)+270).attr("y","-7").attr("width","14").attr("height","14").attr("fill",brewer[p].value[d3.keys(brewer[p].value).map(Number).sort(d3.descending)[0]][q]); | |
| } | |
| } | |
| var svg = document.getElementById("svg"); | |
| var bb = svg.getBBox(); | |
| svg.style.height = bb.y + bb.height + "px"; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment