为 Titanic 可视化加载数据时遇到问题

Question

Having some massive trouble getting my D3 scatter plot visualization running. Didnt know how to reference the data, so its available from adropbox link here .

There are a few problems.

1. I am a bit confused about loading my data.

   • I cannot seem to get the data loaded. I have been successful before, but I am trying to load the data without having to reference a function (ie, global). However, as you will see - I am getting nothing - [].
   • Do I need to load it at the bottom of my script and then reference the function within the d3.csv(function(d) {...}, FUNCTION);? Why cant I simple load it to a variable (as I am trying to) at the top of my script. Such that its the first object available?

2. I also felt like I had a good handle on the Mike Bostock tutorial about .enter(), update(), .exit(). But I know that I have an issue in the comment section of "//ENTER + UPDATE" where I have circle.circle(function(d) {return d;});. I dont understand this.

Overall, I am looking to create a scatter plot with fare as my x-axis, age as my y-axis, then loop through the options of "Female Only", "Male Only", "Children Only" and "All" (starting and ending with All).

I plan to add more to this as I get a better understanding of where I am currently stumbling.

 d3.csv("titanic_full.csv", function(d) { return { fare: +d.fare, age: d.age == '' ? NaN : +d.age, sibsp: +d.sibsp, pclass: +d.pclass, sex: d.sex, name: d.name, survived: d.survived }; }, function(error, d) { //Filter out erroneous age values (263 rows are removed) var dataset = d.filter(function(d) { if (d['age'] >= 0) { return d; } }); //*Main Elements Setup* //Width and height var w = 650; var h = 650; var padding = 20; //Create scale functions var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.fare; })]) .range([padding, w - padding * 2]); // introduced this to make sure values are not cut off var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.age; })]) .range([h - padding, padding]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Show Axes svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + (h - padding) + ')') .call(xAxis); svg.append('g') .attr('class', 'y axis') .attr('transform', 'translate(' + padding + ',0)') .call(yAxis); function update(dataset) { //DATA JOIN //Join new data with old elements, if any. var circle = svg.selectAll('circle') .data(dataset); //UPDATE //Update old elements as needed. circle.attr('class', 'update'); //ENTER //Create new elements as needed. circle.enter().append('circle') .attr('class', 'enter') .transition() .duration(1000) .attr("cx", function(d) { return xScale(d.fare); }) .attr("cy", function(d) { return yScale(d.age); }) .attr("r", 6) .attr('fill', function(d) { if (d.survived === '0') { return 'green'; } else { return 'red'; } }) //ENTER + UPDATE //Appending to the enter selection expands the update selection to include //entering elements; so, operations on the update selection after appending to //the enter selection will apply to both entering and updating nodes. circle.circle(function(d) { return d; }); //EXIT //Remove old elements as needed. circle.exit().remove(); }; //The initial display. update(dataset); //Work through each selection var options = ['Female Only', 'Male Only', 'Children Only', 'All'] var option_idx = 0; console.log('next') var option_interval = setInterval(function(options) { if (options == 'Female Only') { var filteredData = dataset.filter(function(d) { if (d['sex'] == 'female') { return d; } }) } else if (options == 'Male Only') { var filteredData = dataset.filter(function(d) { if (d['sex'] == 'male') { return d; } }) } else if (options == 'Children Only') { var filteredData = dataset.filter(function(d) { if (d['age'] <= 13) { return d; } }) } else if (options == 'All') { var filteredData = dataset.filter(function(d) { return d; }) }; console.log('interval') option_idx++; // increment by one update(filteredData); if (option_idx >= options.length) { clearInterval(option_interval); }; }, 1500); });

 .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 8px; }

 <title>Titanic Visualization - Fare and Age Survival</title>

Answer 1

You should write the whole code inside the d3.csv callback function. Try this way.

d3.csv("titanic_full.csv", function(d) {
  return {
    fare: +d[fare],
    age: d.age == '' ? NaN : +d.age,
    sibsp: +d.sibsp,
    pclass: +d.pclass
  };
}, function(error, dataset) {
  //Filter out erroneous age values (263 rows are removed)
  var dataset = dataset.filter(function(d) {
    if (d['age'] >= 0) {
      return d;
    }
  });
  //Remaining code
});

Refer here for more details.

Answer 2

Okay, so I have an answer, but I probably will not explain this as well.

1. I am a bit confused about loading my data.

With the help of @Gilsha, I was able to reconfigure my script to load the data first, with the rest of my script being the 'callback' portion of the d3.csv function. That worked smoothly. I also was able to filter my data to remove the blanks right away. Here is that first part:

d3.csv("titanic_full.csv", function(d) {
          return {
            fare: +d.fare,
            age: d.age == '' ? NaN : +d.age,
            sibsp: +d.sibsp,
            pclass: +d.pclass,
            sex: d.sex,
            name: d.name,
            survived: d.survived

          };
        }, function(error, d) {
          //Filter out erroneous age values (263 rows are removed)
          var dataset = d.filter(function(d) {
            if (d['age'] >= 0) {
              return d;
            }
          });

            //Rest of script here.

**2. I also felt like I had a good handle on the Mike Bostock tutorial about .enter(), update(), .exit(). Link to Bostock Tutorial I was following **

Couple things that I did wrong here that was holding me up. The main item that I was stuck on was this portion:

//ENTER + UPDATE
                //Appending to the enter selection expands the update selection to include
                //entering elements; so, operations on the update selection after appending to
                //the enter selection will apply to both entering and updating nodes.
                circle.circle(function(d) {return d;});

Basically, I was following the tutorial too closely and didnt realize that when he was using "text.text(function(d) {return d;});", he was setting the text attribute (?) to something. This is where I believe I should be setting any changes to my ENTER and UPDATE selections (all the items that I expect to be in the DOM). So, when Mike was doing text.text and I replicated with circle.circle, I should have had circle.text(.....). Or whatever I want there. Anyone care to comment or explain that better??

PS - I had many other errors... throughout, especially in the section of establishing my interval!