title: d3JS v5 specifying domains from nested data for grouped bar charts
body: <p>I am using d3JS v5 (can include lodash as well). 
  I have data which comes as a variable:</p>
  
  <pre><code> var groupeddata =    [{Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
                         {Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"}, 
                         {Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},  
                         {Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"},
                         {Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"},
                         {Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}];
  </code></pre>
  
  <p>Eventually I would like to group the data as per the ID (i.e. have the x axis ticks be the ids), and have bars for each Title as the second layer. The RFU is the height of the bars and the bars be colored as per the barcolor. 
  I was playing around with the nest function to group the data as per IDs. I am not sure if this is required or not but I was able to create a new array as:</p>
  
  <pre><code>var databyID =  d3.nest()
  .key(function(d) {  return d.ID;})
  .entries(groupeddata);
   console.log(databyID);
  </code></pre>
  
  <p>Outputs:</p>
  
  <pre><code>       [{key: "46", values:[
             {Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
             {Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"}] 
          },
         {key: "50", values:[
             {Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"},
             {Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"}]
          },
         {key: "56", values:[
                 {Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},
             {Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}]
          }]
  </code></pre>
  
  <p>I am not able to generate a grouped bar with the code below. It only makes the axis, without the ticks or bars. 
  I believe it is mainly because I am not specifying the correct way to reach to the values in the arrays to specify the x0domain, x1domain and the ydomain. Although I could be completely wrong :). Any help is appreciated. 
  If this question is silly, please forgive me as I am new to D3js and still learning. If more information is needed, please let me know.</p>
  
  <p><strong>Update 1:</strong> The RFU data comes as integers and not strings (removed the "").</p>
  
  <p>Thanks. </p>
  
  <pre><code> var groupeddata =   [{Title: "Dummy Data", ID: "46", RFU:"20291", barcolor: "#ff7f00"},
             {Title: "Dummy Data", ID: "50", RFU:"63", barcolor: "#ff7f00"}, 
             {Title: "Dummy Data", ID: "56", RFU:"6", barcolor: "#ff7f00"},  
             {Title: "Dummy Data2", ID: "46", RFU:"21", barcolor: "#ff7f00"},
             {Title: "Dummy Data2", ID: "50", RFU:"18095", barcolor: "#ff7f00"},
             {Title: "Dummy Data2", ID: "56", RFU:"27278", barcolor: "#ff7f00"}];
  
    console.log(groupeddata);
  
    var databyID = d3.nest()
      .key(function(d) {
        return d.ID;
      })
      .entries(groupeddata);
    console.log(databyID);
  
   divWidth = 700;
    var margin = {top: 30,   right: 100,   bottom: 50,    left: 100,    },
      width = divWidth - margin.left - margin.right,
      height = 250 - margin.top - margin.bottom,
  
  x0 = d3.scaleBand()
  .range([0, width - 20], 0.1)
  .domain(databyID.map(function(d) {
    d.values.map(function(c) {
      return c.ID;
    }); })),
  x1 = d3.scaleBand()
  .domain(databyID.map(function(d) {
    d.values.map(function(c) {
      return c.Title;
    }); })),
  y = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(databyID, function(d) {
    d.values.map(function(c) {
      return c.RFU;
    }); })]);
  
  
    //setup the axis
    var xAxis = d3.axisBottom(x0);
    var yAxis = d3.axisLeft(y);
  
    var groupedbardiv = d3.select("#groupedBars")
      .append("svg")
      .attr("width", width + margin.left + margin.right - 100)
      .attr("height", height + margin.top + margin.bottom - 10)
      .append("g")
      .attr("transform", "translate (" + margin.left + "," + margin.top + ")");
  
   //create the x-axis
      groupedbardiv.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate (0, " + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "middle")
        .attr("dx", "0em")
        .attr("dy", "-0.55em")
        .attr("y", 30)
        .attr("class", "x-axisticks");
      groupedbardiv.append("text")
        .attr("tranform", "rotate(0)")
        .attr("class", "x axis")
        .attr("x", width)
        .attr("y", height)
        .attr("dy", "0.5em")
        .attr("text-anchor", "end")
        .text("ID")
        .attr("transform", "rotate(0)");
  
    //create the y-axis
      groupedbardiv.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("class", "y axis")
        .attr("tranform", "rotate(-90)")
        .attr("y", -10)
        .attr("dy", "0.8em")
        .attr("dx", "3em")
        .attr("text-anchor", "end")
        .text("RFU")
        .attr("transform", "rotate(-90)");
  
   var bar = groupedbardiv.selectAll("bar")
        .data(databyID)
        .enter()
        .append("rect")
        .style("fill", barcolors)
        .attr("x", function(d) {
          return x0(d.ID);
        })
        .attr("width", x0.bandwidth() - 0.1)
        .attr("y", function(d) {
          return y(d.values.RFU);
        })
        .attr("height", function(d) {
          return height - y(d.values.RFU);
        })
        .attr("fill-opacity", "1.0")
        .attr("class", "y-data");
  </code></pre>