How to add labels to my scatterplot from data using d3.js

Question

I am learning d3.js for visualization and using titanic dataset

My aim is to add the names of the passengers to my visualization so that when one moves cursor over a point - the name of the person is displayed.

So far, I have achieved the goals:

1. plot the x axis and y axis on log scale and the data from the table which has age on x-axis and fare on y-axis
2. The female is circle and male is square
3. the survived has light color while the dead have brighter color.

Now I want to append text and I am not sure if it should be:

// Add Text Labels
            svg.selectAll("text")
                .data(data_scatter)
                .enter()
                .append("text")
                .text(function(d) {
                    return d.name;
                })
                
                .attr("font_family", "sans-serif")  // Font type
                .attr("font-size", "11px")  // Font size
                .attr("fill", "darkgreen");   // Font color

I am using this code for the visualization:

// set the dimensions and margins of the graph
var margin = {
    top: 10,
    right: 30,
    bottom: 30,
    left: 60
  },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .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 + ")");

//Read the data
d3.csv("https://gist.githubusercontent.com/michhar/2dfd2de0d4f8727f873422c5d959fff5/raw/fa71405126017e6a37bea592440b4bee94bf7b9e/titanic.csv", function(rawData) {
  // All values are strings here, so we need to parse some of them.
  // You can do that using `+x` or `Number(x)`, where `x = "123"`
  const data = rawData.map(function(d) {
    return {
      age: Number(d.Age),
      // cabin: d.Cabin,
      // embarked: e.Embarked,
      fare: Number(d.Fare),
      // name: d.Name,
      // parch: Number(d.Parch),
      // passengerId: Number(d.PassengerId)
      // pclass: Number(Pclass),
      sex: d.Sex,
      // sibSp: Number(d.SibSp),
      survived: d.Survived === "1"
      // ticket: d.Ticket,
    };
  });

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 80])
    .range([0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLog()
    .domain([1e+0, 1e+3])
    .range([height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots
  svg.append('g')
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr("transform", function(d) {
      return "translate(" + [x(d.age), y(d.fare)] + ")";
    })
    .attr("d", function(d) {
      const path = d3.path();
      const shape = d.sex == "female" ? d3.symbolCircle : d3.symbolSquare;
      shape.draw(path, 8);
      return path.toString();
    })
    .style("fill-opacity", function(d) {
      return d.survived ? "0.3" : "1";
    })

})

<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

I got so far:

Now I want to add labels of names to the points.

Can anyone please help me.

Answer 1

In order to solve what I wanted to do, I just needed to do the following:

1. using name: d.Name read the name column data and then in the final part: add

.append("svg:title")
          .text(function(d) { return d.name});

after the styling component.

That gets me to displaying names when I hover over the points.

Answer 2

To add a title attribute to each path, do something like this:

Remember to uncomment name: d.Name to make sure name is known. Also note that if you open the generated HTML in the DOM inspector, you can see that every path now has a title child node. The DOM inspector should - after the console - always be the first thing you check when debugging d3.js

// set the dimensions and margins of the graph
var margin = {
    top: 10,
    right: 30,
    bottom: 30,
    left: 60
  },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .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 + ")");

//Read the data
d3.csv("https://gist.githubusercontent.com/michhar/2dfd2de0d4f8727f873422c5d959fff5/raw/fa71405126017e6a37bea592440b4bee94bf7b9e/titanic.csv", function(rawData) {
  // All values are strings here, so we need to parse some of them.
  // You can do that using `+x` or `Number(x)`, where `x = "123"`
  const data = rawData.map(function(d) {
    return {
      age: Number(d.Age),
      // cabin: d.Cabin,
      // embarked: e.Embarked,
      fare: Number(d.Fare),
      name: d.Name,
      // parch: Number(d.Parch),
      // passengerId: Number(d.PassengerId)
      // pclass: Number(Pclass),
      sex: d.Sex,
      // sibSp: Number(d.SibSp),
      survived: d.Survived === "1"
      // ticket: d.Ticket,
    };
  });

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 80])
    .range([0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLog()
    .domain([1e+0, 1e+3])
    .range([height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots
  svg.append('g')
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr("transform", function(d) {
      return "translate(" + [x(d.age), y(d.fare)] + ")";
    })
    .attr("d", function(d) {
      const path = d3.path();
      const shape = d.sex == "female" ? d3.symbolCircle : d3.symbolSquare;
      shape.draw(path, 8);
      return path.toString();
    })
    .style("fill-opacity", function(d) {
      return d.survived ? "0.3" : "1";
    })
    .append("title")
    .text(function(d) {
      return d.name;
    });
})

<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>