Using d2.queue to load a tsv, how do I get the max and min values from a column in the TSV?

Question

I'm trying to get the max and min values from a tsv but I can't seem to use either the d3.extent or the d3.max, d3.min functions in the queue. I need the extent or the max and min values so I can use them for the color domain.

I noticed that some maps that use the queue for doing choropleth maps manually put in the domain, like this map from Yan Holtz: https://www.d3-graph-gallery.com/graph/choropleth_basic.html

And this one from Mike Bostock (the link is broken on the laptop, but works on phone): https://observablehq.com/@d3/choropleth

In both maps, they manually input the domain like this:

 var colorScale = d3.scaleThreshold()
   .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
   .range(d3.schemeBlues[7])

Is there a way to just get the domain programmatically? When I insert the d3.extent or d3.min, d3.max in the defer for the tsv, I get the min and max single numbers in the value. For example,

if the value is 26019, when I insert the d3.extent in the defer, I get

Array ["0", "9"]

which are the min and max numbers in the value. Please help.

This is my code so far:

var h = 960, w = 1000;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var path = d3.geoPath();

//For mapping of fields
var data = d3.map();

//The color ramp, display
var color = d3.scaleLinear()
.range(['#eff3ff', '#08519c']);


//Here comes the queue
d3.queue()
  .defer(d3.json, "https://d3js.org/us-10m.v1.json")
  .defer(d3.tsv, "PEP_2018_PEPANNRES.tsv",
      function(tsv) {

          //Alright, GEOID and the rate columns only
          data.set(tsv.GEOID, +tsv.rate);

          //Check that it works, let's see the rate field values
          console.log(tsv.rate)

         //NOW WHEN I DO THIS
         var xDomain = d3.extent(tsv.rate);

         //IT RETURNS THE MIN AND MAX WHOLE NUMBER OF EACH VALUE IN RATE FIELD
         //FOR EXAMPLE, IT RETURNS Array ["0", "9"], instead of the 26019
         console.log(xDomain)


    })
  .await(ready);


function ready(error, us, tsv) {

  //The topojson
  svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter()
    .append("path")
    .style("fill", function(d) {
        return color(data.get(d.id));
      } else {
        return "black";
      }

    })
    .attr("d", path);

Are you using D3 **v5**? As of v5 you cannot use d3-queue like that for loading multiple files anymore because the API for `d3.json` and `d3.tsv` has changed. The callback provided to `d3.tsv` via `.defer()` is now interpreted as a row conversion function which is executed per row. Since your string `"26019"` is iterable `d3.extent()` calculates the extreme values of that string which gives you the output you witnessed. Have a look at [*"Load multiple files using the d3-fetch module"*](/q/49239474) for an explanation of how to do this in v5. — altocumulus, Oct 04 '19 at 10:25

Using d2.queue to load a tsv, how do I get the max and min values from a column in the TSV?

0 Answers0