This is document gives a few insights on how to manage colors with d3.js. It is composed by several interactive examples, allowing to play with the code to understand better how it works.
Starting basic: you have an element and want to color it. You have several way to provide this color:
Hex code, like #69a3b2. You can use
this tool to find the
Hexcode you need.
rgb or rgba: gives the quantity of
red, green and blue between 0 and 255.
Here is an illustration of these methods:
// create svg element
var svg = d3.select("#res").append("svg").attr("width", 1000).attr("height",200)
// With Hex code
svg.append("circle").attr("cx",50).attr("cy",100).attr("r",20)
.style("fill", "#69b3a2");
// With Hex code
svg.append("circle").attr("cx",150).attr("cy",100).attr("r",20)
.style("fill", d3.color("steelblue") );
// With RGBA (last number is the opacity)
svg.append("circle").attr("cx",250).attr("cy",100).attr("r",20)
.style("fill", "rgba(198, 45, 205, 0.8)" )
// With RGB
svg.append("circle").attr("cx",350).attr("cy",100).attr("r",20)
.style("fill", "rgb(12,240,233)" )
You have a numeric variable and want to map it to a color scale. Several way to build this scale
scaleLinear()scaleSequential(). List of available palette
here. These color scale are offered in the
d3-scale-chromatic plugin
// create svg element
var svg = d3.select("#divContinuous").append("svg").attr("width", 1000).attr("height",400)
// Create data
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
// Option 1: give 2 color names
var myColor = d3.scaleLinear().domain([1,10])
.range(["white", "blue"])
svg.selectAll(".firstrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 50).attr("r", 19).attr("fill", function(d){return myColor(d) })
// Option 2: Color brewer.
// Include <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> in your code!
var myColor = d3.scaleSequential().domain([1,10])
.interpolator(d3.interpolatePuRd);
svg.selectAll(".secondrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 150).attr("r", 19).attr("fill", function(d){return myColor(d) })
// Option 3: Viridis.
// Include <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> in your code!
var myColor = d3.scaleSequential().domain([1,10])
.interpolator(d3.interpolateViridis);
svg.selectAll(".secondrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 250).attr("r", 19).attr("fill", function(d){return myColor(d) })
You have a several groups, and want to attribute a specific color to each group. Several way to build this scale
scaleLinear()scaleSequential(). List of available palette
here. These color scale are offered in the
d3-scale-chromatic plugin
// create svg element
var svg = d3.select("#divCategoric").append("svg").attr("width", 1000).attr("height",400)
// Create data
var data = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]
// Option 1: provide color names:
var myColor = d3.scaleOrdinal().domain(data)
.range(["gold", "blue", "green", "yellow", "black", "grey", "darkgreen", "pink", "brown", "slateblue", "grey1", "orange"])
svg.selectAll(".firstrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 50).attr("r", 19).attr("fill", function(d){return myColor(d) })
// Option 2: use a palette:
// Include <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> in your code!
var myColor = d3.scaleOrdinal().domain(data)
.range(d3.schemeSet3);
svg.selectAll(".firstrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 150).attr("r", 19).attr("fill", function(d){return myColor(d) })