CODEWITHSUNDEEP
javascripthtmlcsvd3.js
Spaksu
Spaksu

Reputation: 53

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

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.

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

Upvotes: 1

Views: 626

Answers (1)

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 1

Related Questions