D3.js - Not all columns of json file displaying in html table

JavaScript
1

Hi everyone,

I recently started learning D3.js and would like to create an html table returning the columns & values of a json file (1000 rows, 7 columns). The table return data in html table except the last two column names which are not displaying although the values do.
Here is my attempt:

<body>
      <section class="container">
    <h2>Data exploration</h2>
    <table id="table_data" cellspacing="2"  cellpadding="2">
    </table>
</section>
</body>
<!-- Create table with D3.js -->
<script type="text/javascript">
          d3.json("/files/ny_cause_death.json").then(ShowData)
          function ShowData(data) {
          const table = d3.select("#table_data")
          const thead = table.append("thead")
          .append("tr")       
          .selectAll("th")
          .data( d3.keys(data[0]) )   // Without [0] || d3.map(data).keys() retuns rows index e.g 1.2.3.4 etc
          
          const tbody = table.append("tbody").selectAll("td").data(data.slice(1)).enter().append("tr")
          
          thead.enter().append("th").text(function(k) { return k} )
          
          tbody.append("td").text(function(v) { return v['year']})
          tbody.append("td").text(function(k) { return k["leading_cause"] })
          tbody.append("td").text(function(k) { return k["sex"] })
          tbody.append("td").text(function(k) { return k["race_ethnicity"] })
          tbody.append("td").text(function(k) { return k["deaths"] })
          tbody.append("td").text(function(k) { return k["death_rate"] })
         tbody.append("td").text(function(k) { return k["age_adjusted_death_rate"] })
          }
</script>

Link to the dataset I am using: https://data.cityofnewyork.us/resource/jb7j-dtam.json
And here is a screenshot of missing columns:

Missing column names
Missing column names1344×243 18.1 KB

Can someone tell me what is the root cause for this?

Thanks in advance.

Kind regards,
Kanatbek

2

This code

which is using the first item in the JSON which is

{
year: "2019",
leading_cause: "Malignant Neoplasms (Cancer: C00-C97)",
sex: "Male",
race_ethnicity: "Other Race/ Ethnicity",
deaths: "32"
}

which has 5 key-value pairs, which gives the five headings you are seeing.

D3 just iterates over data to transform representation of the data; you have to do the data processing, which in this case means finding appropriate headers manually or ensuring that every json entry has the same fields.

3

Hi Jeremy,

Thanks for your reply and pointing to the codeline that is returning only 5 column names.
I did not know that in D3.keys(data[0]) returns limited 5 keys of object dictionary. I thought it will take all keys with values.
I think manually defining the column names is a bad practice, then if you have a dataset with more than 15 columns is time consuming.
I am wondering which d3.js built-in function I may use in this case so that the object automatically returns all keys of dictionary .

4

Thanks again Jeremy, I just itereated the json file and stored it in a new object dictionary to call all keys. It now works perfectly:
Sample:

const dct = {}; 
original code here......
      for (let=0; i< data.length; ++i) {
      dct.test = data[i]
      }
      // return console.log(dct)
      const thead = table.append("thead")
                .append("tr")       
                .selectAll("th")
                .data( d3.keys(dct.test )
the rest original code  a small change in tbody  .....data(data).enter().etc