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

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:

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

Thanks in advance.

Kind regards,
Kanatbek

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.

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 .

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.