Make a specific column bold in an html table

Question

I have created a table and I would like to style one specific column to be bold, but not all of them. Right now my table is set up like so:

 d3.csv('all-ages.csv')
    .then(function(data) {
         function tabulate(data, columns) {
             var table = d3.select('body').append('table')
             var thead = table.append('thead')
             var tbody = table.append('tbody');

             // append the header row
            thead.append('tr')
                .selectAll('th')
                .data(columns).enter()
                .append('th')
                .text(function (column) { return column; });

            // create a row for each object in the data
            var rows = tbody.selectAll('tr')
                .data(data)
                .enter()
                .append('tr');

            // create a cell in each row for each column
            var cells = rows.selectAll('td')
               .data(function (row) {
                    return columns.map(function (column) {
                       return {column: column, value: row[column]};
            });
          })
          .enter()
          .append('td')
            .text(function (d) { return d.value; });

      return table;
    }

    // render the table(s)
    tabulate(data, ['Major', 'Major_category', 'Employed', 'Unemployed', 'Unemployment_rate']); //
  })
  .catch(function(error){
     console.log(error);  
  })

Can anyone help me with this? I have tried looking online and so far have not been fruitful. For the record, the column that I would like to be bold is "Unemployment_rate"

Answer 1

Given your code, the cells selection's data contains a property named column , which you can use to select that specific column. For instance, using font-weight :

.style("font-weight", function(d) {
  return d.column === "Unemployment_rate" ? 700 : 300;
})

Here is a demo with bogus data:

 var csv = `Major,Major_category,Employed,Unemployed,Unemployment_rate 12,13,14,16,18 43,22,33,54,66 76,22,121,54,77 88,22,33,11,10 17,88,21,17,42`; var data = d3.csvParse(csv); function tabulate(data, columns) { var table = d3.select('body').append('table') var thead = table.append('thead') var tbody = table.append('tbody'); // append the header row thead.append('tr') .selectAll('th') .data(columns).enter() .append('th') .text(function(column) { return column; }); // create a row for each object in the data var rows = tbody.selectAll('tr') .data(data) .enter() .append('tr'); // create a cell in each row for each column var cells = rows.selectAll('td') .data(function(row) { return columns.map(function(column) { return { column: column, value: row[column] }; }); }) .enter() .append('td') .style("font-weight", function(d) { return d.column === "Unemployment_rate" ? 700 : 300; }) .text(function(d) { return d.value; }); return table; } // render the table(s) tabulate(data, ['Major', 'Major_category', 'Employed', 'Unemployed', 'Unemployment_rate']); //

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

PS : You don't need to hardcode the columns, d3.csv automatically creates a property in the data array named columns . Check this:

 var csv = `Major,Major_category,Employed,Unemployed,Unemployment_rate 12,13,14,16,18 43,22,33,54,66 76,22,121,54,77 88,22,33,11,10 17,88,21,17,42`; var data = d3.csvParse(csv); console.log(data.columns)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>