title: D3.js. Grouping data in bar chart using d3.nest()
body: <p><em>I am just learning d3.js and my javascript level is basic.
  Thanks for the help, much appreciated.</em></p>
  
  <h2>Total number of clicks pr. Campaign.</h2>
  
  <p>I have a csv file with colums: "Campaign" and "Clicked". 
  "Clicked" column consist of values: Clicked / No Click.
  I want to display total Clicked per Campaign. I don't care about No Click.
  I have made a function to count clicked and store the count in each data member. I use d.count to set y domain.
  The y axis and x axis are displayed correct.
  But the values in the bars does not show. 
  I assume these two lines of code are incorrect:</p>
  
  <p>.attr("y", f</p>
  
  <pre><code>unction(d) { return y(d.key); })
  .attr("height"
  , function(d) { return height - y(d.key); });
  </code></pre>
  
  <p>In the console I get this error:</p>
  
  <p>d3.v4.min</p>
  
  <blockquote>
    <p>.js:2 Error:  attribute height: Expected length, "NaN".
    d3.v4.min.j</p>
    
    <p>s:2 Error:  attribute height: Expected length, "NaN"</p>
  </blockquote>
  
  <p>As I have two values for column Clicked: "Clicked" and "No Click", I assume I have to exclude value "No Click" in my d3.nest() function?</p>
  
  <p>How do I display the values of Clicked per Campaign? What am I missing?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;barChart&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt; /* set the CSS */
  
  .bar { fill: steelblue; }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;!-- load the d3.js library --&gt;   
  &lt;script src="d3.v4.js"&gt;&lt;/script&gt;    
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src="d3.min.js"&gt;&lt;/script&gt;--&gt;
  
  &lt;script&gt;
  
  // set the dimensions and margins of the graph
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  // set the ranges
  var x = d3.scaleBand()
            .range([0, width])
            .padding(0.1);
  var y = d3.scaleLinear()
            .range([height, 0]);
  
  // append the svg object to the body of the page
  // append a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");
  
  // get the data 
      d3.csv("EmailMarketingCampaign_Data.csv")
      .row(function(d){ return {Campaign: (d.Campaign), Clicked: (d.Clicked)}; })
      .get(function(error,data){
      console.log(data[0]);
  
   // format all data from strings
    data.forEach(function(d) {
      d.data = +d.data;   
    });
  
  // Array [ Object, Object ] Key: Clicked, Key: No Clicked
       var nested_data = d3.nest()
       .key(function(d) { return d.Clicked; })
      .rollup(function(values) {
       return values.length; 
       })
       .entries(data);        
       console.log(nested_data);
  
  // count all clicked to set range for y axis
  
        var countObj = {};
  
          // count Clicked 
          data.forEach(function(d) {
          var Clicked = d.Clicked;
          if(countObj[Clicked] === undefined) {
          countObj[Clicked] = 0;
          } else {
          countObj[Clicked] = countObj[Clicked] + 1;
          }
          });
          // now store the count in each data member
          data.forEach(function(d) {
          var Clicked = d.Clicked;
          d.count = countObj[Clicked];
          });
          console.log(countObj);
  
  
    // Scale the range of the data in the domains
    x.domain(data.map(function(d) { return d.Campaign; }));
    y.domain([0, d3.max(data, function(d) { return d.count; })]);
  
    // append the rectangles for the bar chart
    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
  
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.Campaign); })
        .attr("width", x.bandwidth())
  
        .attr("y", function(d) { return y(d.key); })
        .attr("height", function(d) { return height - y(d.key); });
  
  
  
    // add the x Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
  
    // add the y Axis
    svg.append("g")
        .call(d3.axisLeft(y));
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h3>EmailMarketingCampaign_Data.csv</h3>
  
  <p>Ca</p>
  
  <blockquote>
    <p>mpaign,Click_Date,Start,End,Clicked,clickedFlag,Customer
    ID,weekDay,Age,Country,Demographic,Gender JAN
    SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male
    JAN
    SALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female
    JAN
    SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male
    JAN
    SALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male
    JAN
    SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female
    JAN SALES,04/01/2013,30/12/2012,29/01/2013,No
    Click,0,15,Fri,39,UK,Adult,Male JAN
    SALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male
    JAN SALES,07/01/2013,30/12/2012,29/01/2013,No
    Click,0,18,Mon,25,UK,Adult,Male JAN
    SALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male
    JAN
    SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female
    JAN
    SALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male
    JAN SALES,11/01/2013,30/12/2012,29/01/2013,No
    Click,0,22,Fri,32,UK,Adult,Male JAN
    SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female
    JAN
    SALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male
    JAN
    SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female
    JAN
    SALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male
    JAN
    SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male
    JAN SALES,02/01/2013,30/12/2012,29/01/2013,No
    Click,0,35,Wed,3,France,Child,Female JAN
    SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male
    JAN
    SALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male
    JAN
    SALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female
    JAN
    SALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male
    JAN
    SALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male
    JAN SALES,08/01/2013,30/12/2012,29/01/2013,No
    Click,0,41,Tue,33,France,Adult,Female JAN
    SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male
    JAN
    SALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male
    JAN SALES,11/01/2013,30/12/2012,29/01/2013,No
    Click,0,44,Fri,13,France,Teen,Female JAN
    SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male
    JAN
    SALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male
    JAN
    SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male
    JAN
    SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male
    JAN
    SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female
    JAN SALES,11/01/2013,30/12/2012,29/01/2013,No
    Click,0,57,Fri,19,France,Adult,Male JAN
    SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male
    JAN
    SALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female
    JAN SALES,05/01/2013,30/12/2012,29/01/2013,No
    Click,0,60,Sat,56,USA,Adult,Male JAN
    SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male
    JAN
    SALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female
    JAN
    SALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male
    JAN
    SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male
    JAN
    SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male
    JAN
    SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male
    JAN
    SALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female
    JAN SALES,14/01/2013,30/12/2012,29/01/2013,No
    Click,0,69,Mon,49,USA,Adult,Male Unknown,01/02/2013,,,No
    Click,0,2,Fri,33,France,Adult,Female
    Unknown,01/03/2013,,,Clicked,1,3,Fri,17,Germany,Teen,Male
    Unknown,06/03/2013,,,Clicked,1,17,Wed,1,UK,Child,Female
    Unknown,13/02/2013,,,Clicked,1,24,Wed,5,UK,Child,Male
    Unknown,14/03/2013,,,Clicked,1,47,Thu,22,France,Adult,Female
    Unknown,10/04/2013,,,Clicked,1,65,Wed,11,USA,Child,Female
    XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,1,Fri,24,UK,Adult,Male
    XMAS,24/12/2012,23/12/2012,29/12/2012,Clicked,1,4,Mon,18,UK,Adult,Male
    XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,5,Tue,19,UK,Adult,Female
    XMAS,26/12/2012,23/12/2012,29/12/2012,No
    Click,0,6,Wed,58,UK,Adult,Male
    XMAS,27/12/2012,23/12/2012,29/12/2012,Clicked,1,7,Thu,16,Germany,Teen,Male
    XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,8,Fri,26,UK,Adult,Female
    XMAS,29/12/2012,23/12/2012,29/12/2012,No
    Click,0,9,Sat,37,UK,Adult,Male
    XMAS,24/12/2012,23/12/2012,29/12/2012,Clicked,1,26,Mon,19,Germany,Adult,Female
    XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,27,Tue,43,UK,Adult,Male
    XMAS,26/12/2012,23/12/2012,29/12/2012,No
    Click,0,28,Wed,20,UK,Adult,Male
    XMAS,27/12/2012,23/12/2012,29/12/2012,Clicked,1,29,Thu,19,France,Adult,Female
    XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,30,Fri,58,France,Adult,Male
    XMAS,29/12/2012,23/12/2012,29/12/2012,No
    Click,0,31,Sat,7,France,Child,Male
    XMAS,24/12/2012,23/12/2012,29/12/2012,No
    Click,0,48,Mon,3,France,Child,Male
    XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,49,Tue,25,France,Adult,Male
    XMAS,26/12/2012,23/12/2012,29/12/2012,Clicked,1,50,Wed,18,France,Adult,Female
    XMAS,27/12/2012,23/12/2012,29/12/2012,No
    Click,0,51,Thu,5,France,Child,Male
    XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,52,Fri,1,UK,Child,Male
    XMAS,29/12/2012,23/12/2012,29/12/2012,Clicked,1,53,Sat,0,France,Child,Female</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/V1ohn.png" rel="nofollow noreferrer">screenshot</a></p>