Old school D3 from simpler times

All examples By author By category About

chadepl

Full window Github gist

Color references

There are many times when a chart has some kind of color encoding. Be it a group or a level, you will need to convey that information with colors.

In order help people understanding this, color references are useful. This block has easy ways to creating this references.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

d3.select("body").style("background-color", "#ffffff");

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");;

var color1 = d3.scaleOrdinal(d3.schemeCategory20c),
    dataset = d3.range(20),
    barWidth = width / dataset.length;

svg.selectAll("rect .color1")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "color1")
    .attr("height", 20)
    .attr("width", barWidth)
    .attr("y", 0)
    .attr("x", function(d, i){ return i * barWidth;})
    .attr("fill", color1);
    
var color2 = d3.scaleLinear()
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#00FF00"), d3.rgb('#FF0000')]);

var dataset2 = d3.range(0, 1, .05),
    barWidth2 = width / dataset2.length;

svg.selectAll("rect .color2")
    .data(dataset2)
    .enter()
    .append("rect")
    .attr("class", "color2")
    .attr("height", 20)
    .attr("width", barWidth2)
    .attr("y", 20)
    .attr("x", function(d, i){ return i * barWidth2;})
    .attr("fill", color2);

</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
d3.select("body").style("background-color", "#ffffff");
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");;
​
var color1 = d3.scaleOrdinal(d3.schemeCategory20c),
    dataset = d3.range(20),
    barWidth = width / dataset.length;
​
svg.selectAll("rect .color1")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "color1")
    .attr("height", 20)
    .attr("width", barWidth)
    .attr("y", 0)
    .attr("x", function(d, i){ return i * barWidth;})
    .attr("fill", color1);
    
var color2 = d3.scaleLinear()
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#00FF00"), d3.rgb('#FF0000')]);
​
var dataset2 = d3.range(0, 1, .05),
    barWidth2 = width / dataset2.length;
​
svg.selectAll("rect .color2")
    .data(dataset2)
    .enter()
    .append("rect")
    .attr("class", "color2")
    .attr("height", 20)
    .attr("width", barWidth2)
    .attr("y", 20)
    .attr("x", function(d, i){ return i * barWidth2;})
    .attr("fill", color2);
​
​
</script>
​
    

https://d3js.org/d3.v4.min.js