Cannot properly draw a scatterplot over a grouped bar chart in D3

Question

I have a set of nested json data:

var data = [{"time":"2016-03-01","values":[{"specimen_count":1,"trap":"S0024", "species":1},{"specimen_count":2,"trap":"S0025", "species":2},{"specimen_count":2,"trap":"S0026", "species":2}]},{"time":"2016-03-15","values":[{"specimen_count":6,"trap":"S0024", "species":6},{"specimen_count":5,"trap":"S0025", "species":4},{"specimen_count":7,"trap":"S0026", "species":6}]}];

And I want to draw a set of grouped bar charts each group representing a time interval and each group with 3 bars, each representing a trap, and the height of the bar is the specimen_count field.

Now I want to add a scatterplot, one dot for each bar and the height of the dot is the species field, using the same scales. But I am having trouble successfully placing the dots on top the the grouped bar chart. I did manage to add a line with the species data, but I can't add the dots using the same logic.

Here is my code:

    var margin = {top: 100, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x0 = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .tickSize(0)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var color = d3.scale.ordinal()
        .range(["#ca0020","#f4a582","#92c5de"]);

    var svg = d3.select('#chart').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 + ")");

var categoriesNames = data.map(function(d) { return d.time; }); // the 5 time periods
  var trapNames = data[0].values.map(function(d) { return d.trap; }); // the name of the traps
    console.log(trapNames);

  x0.domain(categoriesNames); 
  x1.domain(trapNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(category) { return d3.max(category.values, function(d) { return d.specimen_count; }); })]);


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
  .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style('font-weight','bold')
      .text("Value");

  svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');



  var slice = svg.selectAll(".slice")
      .data(data)
      .enter().append("g")
      .attr("class", "slice")
      .attr("transform",function(d) { return "translate(" + x0(d.time) + ",0)"; });

  slice.selectAll("rect")
      .data(function(d) { return d.values; })
  .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.trap); })
      .style("fill", function(d) { return color(d.trap) })
      .attr("y", function(d) { return y(0); })
      .attr("height", function(d) { return height - y(0); })
      .on("mouseover", function(d) {
          d3.select(this).style("fill", d3.rgb(color(d.trap)).darker(2));
      })
      .on("mouseout", function(d) {
          d3.select(this).style("fill", color(d.trap));
      });

  slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.specimen_count); })
      .attr("height", function(d) { return height - y(d.specimen_count); });


   var valueline = d3.svg.line()
            .x(function (d) { return x1(d.trap) + x1.rangeBand()/2; })
            .y(function (d) { return y(d.species); });

   slice.enter()
    .append('path')
    .attr('class','line')
    .style('stroke', "#0571b0")
    .style('stroke-width', "3px")
    .attr('fill', 'none')
    .attr('d', function(d) { return valueline(d.values); });



    slice.selectAll('.dot').data(data,function(d){return d.time;})
    .enter()
    .append("circle")
     .attr("class", "dot")
    .attr("r",5)
    .attr("cx", function(d){
        return x1(d.trap) + x1.rangeBand()/2;
    })
    .attr("cy",function(d){
        return y(d.species);
    })
    .attr("fill","#0571b0");

There error I'm getting from the circle-related code is: d3.min.js:1 Error: attribute cx: Expected length, "NaN".

I think the nested data and the ordinal scale for the bar chart is throwing me off a bit, so it could be that I am not understanding fulling data access in these cases.

Also here is the screenshot of the current graph

NicolaeS · Accepted Answer

If you need the dots on every bar chart, then the data() callback must return a list of bars not a single item. Did you try replacing it with:

slice.selectAll('.dot')
    .data(function(d) {
        return d.values;
    })
    .enter()
    .append("circle") //... and so on

Doing this will use the existing data object (with 5 bar groups), but render a dot for each bar.

Here it is running:

Cannot properly draw a scatterplot over a grouped bar chart in D3

Answers (1)

Related Questions