d3.js CSV to HTML Table - Header, Average & chart

Question

This is the main code: https://gist.github.com/ndarville/7075823

<script src="d3.min.js?v=3.2.8"></script>

<script type="text/javascript"charset="utf-8">
    d3.text("data.csv", function(data) {
        var parsedCSV = d3.csv.parseRows(data);
        var container = d3.select("body")
            .append("table")
            .selectAll("tr")
                .data(parsedCSV).enter()
                .append("tr")
            .selectAll("td")
                .data(function(d) { return d; }).enter()
                .append("td")
                .text(function(d) { return d; });
    });
</script>

There are some things I want you to add. If possible.

Is it possible to use the tbody, thead and tfoot labels? /important!
can we add an average line that can calculate automatically under each column?
Can we add a simple chart under each column?

Thank you.

Content of the CSV:

car name,miles/gallon,cylinders,displacement,horsepower,weight,acceleration,model year,origin
"chevrolet chevelle malibu",18,8,307,130,3504,12,70,1
"buick skylark 320",15,8,350,165,3693,11.5,70,1
"plymouth satellite",18,8,318,150,3436,11,70,1

These are three questions. You should split them into three posts! — yunzen
– yunzen, Commented Apr 12, 2019 at 11:22
Is there any reason, why you are using version 3.2.8 of d3.js? Current version is 5.9.2! 3.2.8 is from August 2013 — yunzen
– yunzen, Commented Apr 12, 2019 at 11:37

yunzen · Accepted Answer · 2019-04-12 12:31:23Z

1

This is partial solution for Question 1 (important)

d3.text("https://gist.githubusercontent.com/ndarville/7075823/raw/415c00487a86fe6b85e667ece35160b8d8ad7efb/data.csv", function(
  data
) {

  
  var parsedCSV = d3.csv.parseRows(data);
  var headers = [parsedCSV.shift()]
  
  var table = d3.select("body")
    .append("table")
  var thead = table.append("thead")
  var tbody = table.append("tbody")
  var tfoot = table.append("tfoot")
    
  thead.selectAll("tr")
    .data(headers).enter()
    .append("tr")
    .selectAll("th")
    .data(d => d).enter()
    .append("th")
    .text(d => d)

  tbody.selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => d)
});

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px sans-serif;
}
td,th {
  border: 1px black solid;
  padding: 5px;
}

th {
  background-color: black;
  color: white;
  border-color: white;
}

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

And here is the average solution

console.clear()

d3.text("https://gist.githubusercontent.com/ndarville/7075823/raw/415c00487a86fe6b85e667ece35160b8d8ad7efb/data.csv", function(
  data
) {

  
  var parsedCSV = d3.csv.parseRows(data);
  var headers = [parsedCSV.shift()]
  
  var table = d3.select("body")
    .append("table")
  var thead = table.append("thead")
  var tbody = table.append("tbody")
  var tfoot = table.append("tfoot")
  
  var results = []
  
  var sums = [parsedCSV.reduce((accu, item, index, source) => {
    item.reduce((accu1, item1, index1, source1) => {
      if (isNaN(item1)) {
        accu1[index1] = 'Average'
      } else {
        accu1[index1] = accu1[index1] ? accu1[index1] + parseFloat(item1) : parseFloat(item1)        
      }
      return accu1
    }, accu)
    return accu
  }, [])]
  
  thead.selectAll("tr")
    .data(headers).enter()
    .append("tr")
    .selectAll("th")
    .data(d => d).enter()
    .append("th")
    .text(d => d)

  tbody.selectAll("tr")
    .data(parsedCSV).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => d)

  tfoot.selectAll("tr")
    .data(sums).enter()
    .append("tr")
    .selectAll("td")
    .data(d => d).enter()
    .append("td")
    .text(d => 
      isNaN(d) ? d : Math.round((d / parsedCSV.length) * 100) / 100
    )
});

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px sans-serif;
}
td,th {
  border: 1px black solid;
  padding: 5px;
}

th {
  background-color: black;
  color: white;
  border-color: white;
}
tfoot {
  border-top: 3px double black;
}

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

edited Apr 12, 2019 at 12:31

answered Apr 12, 2019 at 11:59

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spaksu Over a year ago

Avarage and other works fine. Thank you. Should I open a new question for Chart?

yunzen Over a year ago

I think so. 1 Post, 1 Question. Especially the chart thing is a d3 specific answer, while the others were more a JS question

Spaksu Over a year ago

Ok. I'll post another question. But in this post can you help me about change background color based on value. For example = 0 to 20 blue, 20 to 50 orange.....

Collectives™ on Stack Overflow

d3.js CSV to HTML Table - Header, Average & chart

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related