myTable = {
const div = d3.select(html`<div></div<`);
const tableObject = div.append("table");
tableObject.append("tr")
.selectAll()
.data(tableHeaders[0])
.enter()
.append("th")
.text(d => d);
tableObject.selectAll("tr")
.data(tableHeaders)
.enter()
.append("tr")
.attr("class",function(d){return d[0]})
.each(function(d,i,e){
d3.select(this)
.selectAll("td")
.data(d => d)
.enter()
.append("td")
.attr("class", function(d){
return d3.select(this.parentNode).attr("class") + " " + d
})
.text(function(d,i){
if(i == 0){return d;}else{return "placeholder"}
})
.style("font-weight", function(d,i){ if(i == 0){return "bold";}});
})
/* So to recap here:
We have created the table above. In each cell, we added a combination of two class (ex: .teamA.MD)
*/
for (var i in sumstat3){
//console.log("." + sumstat3[i].team + "." + sumstat3[i].state)
//console.log("d1");console.log(sumstat3[i])
const plot = div
.select("." + sumstat3[i].team + "." + sumstat3[i].state)
.text("").style("color", "black")
//plot. not sure why when I added a plot. statement here the svg was empty...
.selectAll("uniqueChart")
.data([sumstat3[i]])
.enter()
.append("svg")
.attr("width", innerwidth + margin.left + margin.right)
.attr("height", innerheight + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
//.attr("fake", function(d){console.log("d2");console.log(d)})
plot
.append("g")
.attr("transform", "translate(0," + innerheight + ")")
.call(d3.axisBottom(x).ticks(3))
plot
.append("g")
.call(d3.axisLeft(y).ticks(5));
// Draw the line .selectAll("circle").data((d) => d.arr).enter().append("circle")
plot
.selectAll("uniqueChart")
.data([sumstat3[i]])
.enter()
.append("path")
.attr("fill", function(d){ return color(d.key) })
.attr("stroke", "none")
//.attr("fake", function(d){console.log("d3");console.log(d)})
.attr("d", function(d){
return d3.area()
.x(function(d) { return x(d.year) })
.y0(y(0))
.y1(function(d) { return y(+d.n) })
(d.values)
})
// Add titles
plot
.append("text")
.attr("text-anchor", "start")
.attr("y", -5)
.attr("x", 0)
.text(function(d){ return(d.key)})
.style("fill", function(d){ return color(d.key) })
}
return div.node()
}