How to apply specific colors to D3.js map based on data values?

Question

I have a US counties map that's supposed to show in animation the amount of water yield for counties in a 14-day period. I need to show the colors in red (less than 50 mm), green(greater than 49 mm and lower than 100 mm), and blue (greater than 100 mm). I've adapted from Mike Bostock and Rich Donohue the following codes:

<style>
.county {
    fill:steelblue;
    stroke: #fff; /*White*/
    stroke-width: .5px;
}

#play, #clock {
    position: absolute;
    /*top: 15px;*/
}

#play {
    /*left: 15px;*/
    left: 160px;
    top: 140px;
}

#clock {
    left: 220px;
    top: 148px;
}

<button id="play">Play</button>
<span id="clock">Day</span>
<h1 style="text-align:center">14-Day Water Yield By County</h1>

<div id="svgDiv1" style="text-align:center">
<svg width="960" height="600" stroke-linejoin="round" stroke-linecap="round">
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="5"></feGaussianBlur>
        </filter>
    </defs>
</svg>

<script>

//globals
var width, height, projection, path, group, graticule, svg, defs, attributeArray = [], currentAttribute = 0, playing = false;

function init() {

    setMap();
    animateMap();

}

function setMap() {

    svg = d3.select("svg");

    defs = svg.select("defs");

    path = d3.geoPath();

    d3.json("/topo/us-10m.v1.json", function (error, us) {
        if (error) throw error;

        defs.append("path")
            .attr("id", "nation")
            .attr("d", path(topojson.feature(us, us.objects.counties)));

        svg.append("use")
            .attr("xlink:href", "#nation")
            .attr("fill-opacity", 0.2)
            .attr("filter", "url(#blur)");

        svg.append("use")
            .attr("xlink:href", "#nation")
            .attr("fill", "#fff");

        svg.append("path")
            .attr("fill", "none")
            .attr("stroke", "#777")
            .attr("stroke-width", 0.70)
            .attr("d", path(topojson.mesh(us, us.objects.counties, function (a, b) { return a !== b; })));
    });

    loadData();  // let's load our data next
}

function loadData() {
    queue()   // queue function loads all external data files asynchronously
      .defer(d3.json, "/topo/us-10m.v1.json")  // our geometries
      .defer(d3.csv, "/data/wtryld.csv")  // and associated data in csv file
      .await(processData);   // once all files are loaded, call the processData function passing the loaded objects as arguments
}

function processData(error, us, countyData) {
    // function accepts any errors from the queue function as first argument, then
    // each data object in the order of chained defer() methods above
    if (error) throw error;

    //Get values from geojson
    var conus = topojson.feature(us, us.objects.counties); // store the path in variable for ease

    //Get values from csv file
    for (var i in conus.features) {    // for each geometry object
        for (var j in countyData) {  // for each row in the CSV
            if (conus.features[i].id == countyData[j].id) {  // if they match
                for (var k in countyData[i]) {   // for each column in the a row within the CSV
                    if (k != 'id' && k != 'County') {  // select only number of days as column headings
                        if (attributeArray.indexOf(k) == -1) {
                            attributeArray.push(k);  // add new column headings to our array for later
                        }
                        conus.features[i].properties[k] = Number(countyData[j][k])  // add each CSV column key/value to geometry object
                    }
                }
                break;  // stop looking through the CSV since we made our match
            }
        }
    }
    d3.select('#clock').html(attributeArray[currentAttribute]);  // populate the clock initially with the current day
    drawMap(conus);  // let's mug the map now with our newly populated data object
}

//Sort function; can specify multiple columns to sort: propSort("STATE", "COUNTY");
function propSort(props) {
    if (!props instanceof Array) props = props.split(",");
    return function sort(a, b) {
        var p;
        a = a.properties;
        b = b.properties;
        for (var i = 0; i < props.length; i++) {
            p = props[i];
            if (typeof a[p] === "undefined") return -1;
            if (a[p] < b[p]) return -1;
            if (a[p] > b[p]) return 1;
        }
        return 0;
    };
}

function drawMap(conus) {

    svg.selectAll(".feature")   // select country objects (which don't exist yet)
      .data(conus.features)   // bind data to these non-existent objects
      .enter().append("path") // prepare data to be appended to paths
      .attr("class", "county") // give them a class for styling and access later
      .attr("id", function (d) { return d.properties.id; }, true)  // give each a unique id for access later
      .attr("d", path); // create them using the svg path generator defined above

    var dataRange = getDataRange(); // get the min/max values from the current day's range of data values
    d3.selectAll('.county')  // select all the counties
        .attr('fill-opacity', function (d) {
            return getColor(d.properties[attributeArray[currentAttribute]], dataRange);  // give them an opacity value based on their current value
        });
}

function sequenceMap() {
    var dataRange = getDataRange(); // get the min/max values from the current year's range of data values
    d3.selectAll('.county').transition()  //select all the counties and prepare for a transition to new values
      .duration(300)  // give it a smooth time period for the transition
      .attr('fill-opacity', function (d) {
          return getColor(d.properties[attributeArray[currentAttribute]], dataRange);  // the end color value
      })
}

function getColor(valueIn, valuesIn) {
    // create a linear scale
    var color = d3.scale.linear()
      .domain([valuesIn[0], valuesIn[1]])  // input uses min and max values
      .range([.3, 1]);   // output for opacity between .3 and 1 %

    return color(valueIn);  // return that number to the caller
}

function getDataRange() {
    // function loops through all the data values from the current data attribute
    // and returns the min and max values

    var min = Infinity, max = -Infinity;
    d3.selectAll('.county')
        .each(function (d, i) {
          var currentValue = d.properties[attributeArray[currentAttribute]];
          if (currentValue <= min && currentValue != -99 && currentValue != 'undefined') {
              min = currentValue;
          }
          if (currentValue >= max && currentValue != -99 && currentValue != 'undefined') {
              max = currentValue;
          }
      });
    return [min, max];
}

function animateMap() {

    var timer;  // create timer object
    d3.select('#play')
      .on('click', function () {  // when user clicks the play button
          if (playing == false) {  // if the map is currently playing
              timer = setInterval(function () {   // set a JS interval
                  if (currentAttribute < attributeArray.length - 1) {
                      currentAttribute += 1;  // increment the current attribute counter
                  } else {
                      currentAttribute = 0;  // or reset it to zero
                  }
                  sequenceMap();  // update the representation of the map
                  d3.select('#clock').html(attributeArray[currentAttribute]);  // update the clock
              }, 2000);

              d3.select(this).html('Stop');  // change the button label to stop
              playing = true;   // change the status of the animation
          } else {    // else if is currently playing
              clearInterval(timer);   // stop the animation by clearing the interval
              d3.select(this).html('Play');   // change the button label to play
              playing = false;   // change the status again
          }
      });
}


window.onload = init();  // magic starts here

The above code applies "choropleth" color by using fill-opacity. Only steelblue color in differing shades. But I need to apply green, blue and red colors.

Appreciate any help.

Answer 1

Rather than using css to set the color of all features and then applying an opacity value from your linear scale to each feature, you can output a color directly with your scale (D3 scale ranges accept colors). Then, instead of setting your fill-opacity, just set the fill.

For example:

var color = d3.scale.linear()
  .domain([0, 9])  
  .range(["blue", "green"]); 
  
var svg = d3.select('body')
    .append('svg')
    .attr('width',500)
    .attr('height',200);
    
svg.selectAll('rect')
    .data(d3.range(10))
    .enter()
    .append('rect')
    .attr('x',function(d,i) { return i * 40; })
    .attr('y',30)
    .attr('width',30)
    .attr('height',30)
    .attr('fill',function(d,i) { return color(i); });
      

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Just be sure that your css doesn't still specify a steel blue color.

You can also use hex color codes or specify multiple steps:

var color = d3.scale.linear()
  .domain([0, 5, 9])  
  .range(["blue", "yellow", "green"]); 
  
var svg = d3.select('body')
    .append('svg')
    .attr('width',500)
    .attr('height',200);
    
svg.selectAll('rect')
    .data(d3.range(10))
    .enter()
    .append('rect')
    .attr('x',function(d,i) { return i * 40; })
    .attr('y',30)
    .attr('width',30)
    .attr('height',30)
    .attr('fill',function(d,i) { return color(i); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Though, you may want a threshold scale if you want clear steps for each value:

var color = d3.scale.threshold()
  .domain([2, 5, 9])  
  .range(["blue","yellow","green","orange"]); 
  
var svg = d3.select('body')
    .append('svg')
    .attr('width',500)
    .attr('height',200);
    
svg.selectAll('rect')
    .data(d3.range(10))
    .enter()
    .append('rect')
    .attr('x',function(d,i) { return i * 40; })
    .attr('y',30)
    .attr('width',30)
    .attr('height',30)
    .attr('fill',function(d,i) { return color(i); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

There is one more element in the range than the domain for the threshold scale. Imagine a single threshold, it would have one value for more than, one value for less than.