title: d3 v5 use nested values when scaling axis
body: <p>I have the following code that nests my data based on region and date. The problem I am having is that I don't know how to define yScale to dynamically draw the axis so that the max sum from the nested data is returned (the max val of the nested data is higher than the max val in the dataset bc it is aggregated). Thus my yAxis is truncated and the chart doesn't show all the data. </p>
  
  <p>In the code, if I hardcode the domain to .domain([0, 3500]) then the axis is correct, but otherwise it is not correct.  I don't want to hardcode the domain.  How do I reference the nested values? </p>
  
  <p>EDITED to show code provided in comments, which helps but doesn't entirely fix when the script is run on the entire dataset. Please see pic at bottom.</p>
  
  <pre><code>      var yScale = d3.scaleLinear()
                 .domain([0, d3.max(dataset, function(d) {
                    return parseInt(d.count,10); 
                  })])
                 .range([h - padding, padding])
  
        // var yScale = d3.scaleLinear()
        //   .domain([0, 3500])
        //   .range([h - padding, padding]) //not supposed to hard code the scale but it is not working 
  </code></pre>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Nested Chart&lt;/title&gt;
      &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
        .pagebreak {
          page-break-before: always;
        }
  
        .axis path,
        .axis line {
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
        }
  
        .axis text {
          font-family: sans-serif;
          font-size: 11px;
        }
  
        .point {
          fill: none;
          size: 2px
        }
  
        .dot {
          fill: #ffab00;
          stroke: #fff;
          }
  
  
  
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;div style="width:800px; margin:0 auto;" class='body'&gt;&lt;/div&gt;
    &lt;div class="pagebreak"&gt; &lt;/div&gt;
  
    &lt;body&gt;
  
      &lt;script type="text/javascript"&gt;
        var parseTime = d3.timeParse("%Y");
  
  
        var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 50
          },
          w = 960 - margin.left - margin.right,
          h = 500 - margin.top - margin.bottom;
  
        var padding = 20;
  
  
  /////////////////get the data//////////////////               
        const csv = `state,region,year,count
          Alabama,South,2010,1
          Alabama,South,2011,1
          Alabama,South,2012,0
          Alabama,South,2013,0
          Alabama,South,2014,2
          Alabama,South,2015,6
          Alaska,West,2010,2245
          Alaska,West,2011,1409
          Alaska,West,2012,1166
          Alaska,West,2013,1329
          Alaska,West,2014,1296
          Alaska,West,2015,1575
          Connecticut,Northeast,2010,0
          Connecticut,Northeast,2011,0
          Connecticut,Northeast,2012,0
          Connecticut,Northeast,2013,0
          Connecticut,Northeast,2014,0
          Connecticut,Northeast,2015,1
          Missouri,Midwest,2010,2
          Missouri,Midwest,2011,3
          Missouri,Midwest,2012,2
          Missouri,Midwest,2013,0
          Missouri,Midwest,2014,1
          Missouri,Midwest,2015,5
          California,West,2010,546
          California,West,2012,243
          California,West,2013,240
          Wyoming,West,2015,198
          California,West,2011,195
          California,West,2014,191`;
  
        const dataset = d3.csvParse(csv);
  
        dataset.forEach(function(d) {
          d.date = parseTime(d.year);
          d.region = d['region'];
          d.state = d['state'];
          d.count = d['count'];
          //console.log(d)
        });
  
        /////////////////scales the data//////////////////
        var xScale = d3.scaleTime()
          .domain([d3.min(dataset, function(d) {
            return d.date
          }), d3.max(dataset, function(d) {
            return d.date
          })]).range([padding, w - padding * 2])
  
        var yScale = d3.scaleLinear()
          .domain([0, d3.max(dataset, function(d) {
            console.log(d.count)
            return d.count ///ERROR HERE
          })]).range([h - padding, padding])
  
        // var yScale = d3.scaleLinear()
        //   .domain([0, 3500])
        //   .range([h - padding, padding]) //not supposed to hard code the scale but it is not working otherwise...commented out above
  
        var xAxis = d3.axisBottom().scale(xScale);
  
        var yAxis = d3.axisLeft().scale(yScale);
  
  
        /////////////////charts start here//////////////////
  
        var svg = d3.select("body").append("svg")
          .attr("width", w + margin.left + margin.right)
          .attr("height", h + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");
  
        var svg1 = d3.select("body").append("svg")
          .attr("width", w + margin.left + margin.right)
          .attr("height", h + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");
  
        //Define the line
        var valueLine = d3.line()
          .x(function(d) {
            return xScale(new Date(d.key));
          })
          .y(function(d) {
            return yScale(d.value);
          })
  
  
        var nest = d3.nest()
          .key(function(d) {
            return d.region;
          })
          .key(function(d) {
            return d.date;
          })
          .rollup(function(leaves) {
            return d3.sum(leaves, function(d) {
              return (d.count)
            });
          })
          .entries(dataset)
  
          console.log(nest)
  
  
        // Set the color scheme
          var colors = d3.scaleOrdinal()
            .domain(["South", "West", "Northeast","Midwest"])
            .range(["#EF5285", "#88F284" , "#5965A3","#900C3F"]);
  
  
        var regYear = svg.selectAll(".regYear")
          .data(nest)
          .enter()
          .append("g")
          .attr("stroke", function(d){ return colors(d.key)}); // Adding color!
  
        // console.log(regYear)
  
        var paths = regYear.selectAll(".line")
          .data(function(d) {
            return [d.values]
          })
          .enter()
          .append("path");
  
        // Draw the line
        paths
          .attr("d", function(d) {
            return valueLine(d)
          })
          .attr("class", "line")
          .style("fill", "none");
  
  
  
      svg.selectAll(".dot")
          .data(dataset)
          .enter().append("circle") // Uses the enter().append() method
          .attr("class", "dot") // Assign a class for styling
          .attr("cx", function(d, i) { return xScale(i) })
          .attr("cy", function(d) { return yScale(d.count) })//this is not working
          .attr("r", 5);
  
  
        svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);
        //draw Y axis
        svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);
        // add label
        svg.append("text").attr("x", (w / 2)).attr("y", h + 30).attr("text-anchor", "middle").text("Year");
        svg.append("text").attr("x", padding).attr("y", padding - 20).attr("text-anchor", "middle").text("# of Events");
        //add title
        svg.append("text").attr("x", (w / 2)).attr("y", padding).attr("text-anchor", "middle").text("Events per Year by Category");
        // add legend   
        var legend = svg.append("g")
          .attr("class", "legend")
          .attr("x", w - 65)
          .attr("y", 25)
          .attr("height", 100)
          .attr("width", 100);
  
  
  
  
        ////////////////////////////////////END///////////////////////////
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/AkvTW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AkvTW.png" alt="enter image description here"></a></p>