Uncaught TypeError: d3.schemeCategory20 is not a function

Question

I'm new in d3js and all the javascript-world too. In my html-file I simply import the script like that:

<script src="https://d3js.org/d3.v4.min.js"></script>

By trying to use following:

var ordinalColorScale = d3.schemeCategory20();

I get the exception

Uncaught TypeError: d3.schemeCategory20 is not a function at index.html:48

Do I need any other d3js module, which has to be imported? Or what could have caused the problem?

Answer 1

(v5) D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes d3-scale-chromatic, which implements excellent schemes from ColorBrewer, including categorical, diverging, sequential single-hue and sequential multi-hue schemes. These schemes are available in both discrete and continuous variants.

https://github.com/d3/d3/blob/master/CHANGES.md

Answer 2

d3.schemeCategory20 is neither a scale nor a function. It is just an array of colours. According to the API, it is...

An array of twenty categorical colors represented as RGB hexadecimal strings.

The same API says:

These color schemes are designed to work with d3.scaleOrdinal.

Therefore, you have to pass it to an ordinal scale as its range, like this:

var myScale = d3.scaleOrdinal()
    .range(d3.schemeCategory20)

Which is the same of:

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)

Here is a demo:

var scale = d3.scaleOrdinal(d3.schemeCategory20);

d3.select("body").selectAll(null)
  .data(d3.range(20))
  .enter()
  .append("div")
  .style("background-color", function(d){ return scale(d)})

div {
  min-height: 10px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 3

For d3 v4. You can use like as

   var color = d3.scaleOrdinal(d3.schemeCategory20c);
                     or
    var color = d3.scaleOrdinal()
      .range(["red", "green", "blue", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);