Dot Chart: 11-15 years data not appearing

[nhulz]

Can't figure out why the 11-15 years worth of data is not appearing on the dot chart. I have checked the wording of the domains and they are definitely correct.

var xScale = d3.scaleOrdinal()
.domain(["Immediately/ We've always slept in separate beds, Within the first 1-5 years of our relationship, Within 6-10 years of our relationship,  Within 11-15 years of our relationship, Within 16-20 years of our relationship, After 20 years of our relationship"])
.range([100, 300, 500, 700, 900, 1100]);

var yScale = d3.scaleOrdinal()
.domain(["Strongly disagree", "Somewhat disagree", "Neither agree nor disagree", "Somewhat agree", "Strongly agree"])
.range([100, 200, 300, 400, 500]);

All this being said, frankly I'm not even quite sure that the right data is being displayed. It's hard to tell since the circles are stacked up on each other.

Note that "stayingTogether" is what I am referring to when I say "relationship improved" and "sexImproved" is.. well yeah you get the idea. In this case, I wanted to draw the responses to "stayingTogether". Presumably to draw SexImproved I would just change this drawing function, correct?

var genderDraw = function(d, i){
  var svg = d3.select("#dotChartSVG").selectAll("g");
  var circles = svg.selectAll("circle").data(data);
  // var x = d3.extent(dotChartData, function(d, i){
  //   return d.values.length;
  // });
  var radius = d3.scaleLinear();
  //console.log(firstSeparateBedData);

  circles.enter().append("circle")
    .attr("cy", function(d, i){
      return yScale(d.stayingTogether);
    })
    .attr("cx", function(d, i){
      return xScale(d.firstSeparateBed);
    })
    .attr("r", function(d, i){
      return radius(d.stayingTogether.length);
      // console.log(d.stayingTogether + "HI!");

    });
};

[davelandry]

The array of your xScale domain is not formatted correctly! You're missing quotation marks separating the different string values. Here's what it should be:

var xScale = d3.scaleOrdinal()
.domain(["Immediately/ We've always slept in separate beds", "Within the first 1-5 years of our relationship", "Within 6-10 years of our relationship", "Within 11-15 years of our relationship", "Within 16-20 years of our relationship", "After 20 years of our relationship"])
.range([100, 300, 500, 700, 900, 1100]);

Let me know if that fixes it!

[nhulz]

So that definitely fixed the problem with getting all the data points to appear. However now the problem remains that I don't think the circles are actually representational of the data.

But I suppose we'll find out once the circles are all the same size and i can physically count them all when I'm packing the data.

The real question is should I pursue the toggle of the draw functions between the two keys in the data set. I started going down the rabbit hole with this:

function dotChartfunction(dotChartData, key){

var xScale = d3.scaleOrdinal()
.domain(["Immediately/ We've always slept in separate beds", "Within the first 1-5 years of our relationship", "Within 6-10 years of our relationship", "Within 11-15 years of our relationship", "Within 16-20 years of our relationship", "After 20 years of our relationship"])
.range([100, 300, 500, 700, 900, 1100]);

var yScale = d3.scaleOrdinal()
.domain(["Strongly disagree", "Somewhat disagree", "Neither agree nor disagree", "Somewhat agree", "Strongly agree"])
.range([100, 200, 300, 400, 500]);

  var margin = {top: 100, right: 100, bottom: 100, left: 250},
      DotChartWidth = 1500 - margin.left - margin.right,
      DotChartHeight = 1500 - margin.top - margin.bottom;

// add the graph canvas to the body of the webpage
var dotChartSVG = d3.select("#dotChartSVG")
    .attr("width", DotChartWidth + margin.left + margin.right)
    .attr("height", DotChartHeight + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svg = d3.select("#dotChartSVG").selectAll("g");
var circles = svg.selectAll("circle").data(dotChartData);
var radius = d3.scaleLinear();

circles.attr("r", function(d, i){
      return radius(i);
    });

// I'm not sure exactly what to do here to abstract the draw function so the data can be updated
circles.enter().append("circle")
  .attr("cy", function(d, i){
    return yScale(i);
  })
  .attr("cx", function(d, i){
    return xScale(i);
  })
  .transition()
  .duration(1000)
  .attr("r", function(d, i){
    return radius(key.length);
  });

circles.exit()
  .transition()
  .duration(1000)
  .ease("exp")
      .attr("r", 0)
      .remove()
};

function init(){

  var margin = {top: 100, right: 100, bottom: 100, left: 250},
      DotChartWidth = 1500 - margin.left - margin.right,
      DotChartHeight = 1500 - margin.top - margin.bottom;

  // add the graph canvas to the body of the webpage
  var dotChartSVG = d3.select("#dotChartSVG")
      .attr("width", DotChartWidth + margin.left + margin.right)
      .attr("height", DotChartHeight + margin.top + margin.bottom)
      .append("g")
      .attr("id", "dotChartGroup")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var sexBtn= d3.select('#sexBtn');
  var relationshipBtn = d3.select('#relationshipBtn');

  relationshipBtn.on('click', function(d, i) {
    dotChartfunction(d.sexImproved);
  });

  sexBtn.on('click', function(d, i) {
    dotChartfunction(d.stayingTogether);
  });

  dotChartfunction(d.stayingTogether);
}

[davelandry]

What about something like this? I removed the dynamic radius... because aren't we just drawing equal sized circles for each participant?

var margin = {top: 100, right: 100, bottom: 100, left: 250},
    DotChartWidth = 1500 - margin.left - margin.right,
    DotChartHeight = 1500 - margin.top - margin.bottom;

// add the graph canvas to the body of the webpage
var dotChartSVG = d3.select("#dotChartSVG")
    .attr("width", DotChartWidth + margin.left + margin.right)
    .attr("height", DotChartHeight + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var yScale = d3.scaleOrdinal()
  .domain(["Strongly disagree", "Somewhat disagree", "Neither agree nor disagree", "Somewhat agree", "Strongly agree"])
  .range([100, 200, 300, 400, 500]);

var xScale = d3.scaleOrdinal()
  .domain(["Immediately/ We've always slept in separate beds", "Within the first 1-5 years of our relationship", "Within 6-10 years of our relationship", "Within 11-15 years of our relationship", "Within 16-20 years of our relationship", "After 20 years of our relationship"])
  .range([100, 300, 500, 700, 900, 1100]);

function dotChartfunction(key){

  var circles = dotChartSVG.selectAll("circle").data(dotChartData);

  // enter animation for the first time this function is run
  circles.enter().append("circle")
    .attr("cy", function(d){
      return yScale(d[key]);
    })
    .attr("cx", function(d){
      return xScale(d.firstSeparateBed);
    })
    .attr("r", 0)
    .transition().duration(1000)
    .attr("r", 5);

  // update the x and y coordinates when running this function after the first time
  circles
    .transition().duration(1000)
    .attr("cy", function(d){
      return yScale(d[key]);
    })
    .attr("cx", function(d){
      return xScale(d.firstSeparateBed);
    });

  // ...technically, as is, this exit animation will never run, because the data does not change (only the key used to position the circles)
  circles.exit()
    .transition().duration(1000).ease("exp")
    .attr("r", 0)
    .remove();

}

// simply pass the key to be used to the function as a string
d3.select('#sexBtn').on('click', function(d, i) {
  dotChartfunction("sexImproved");
})

d3.select('#relationshipBtn').on('click', function(d, i) {
  dotChartfunction("stayingTogether");
});

dotChartfunction("stayingTogether");