Public
Edited
Apr 8, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
myTable = {
/*
Let's start by generating the table
*/
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]})
//.attr("fake",function(d){console.log(d)})
.each(function(d,i,e){
d3.select(this)
.selectAll("td")
.data(d => d)
.enter()
.append("td")
/*I struggled to find that one. Basically I wanted to have access to the parent node
so I can have a unique class attribute per cell. I intend to use these unique attributes in
the downstream D3 plot code to place the plots appropriately*/
.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()
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//Original chart:
/*
chart = {
//Here instead of calling a DOM.svg, call a DOM.div
//const svg = d3.select(DOM.svg(width - 0, height))
const svg = d3.create("div")
.attr("viewBox", [0, 0, width - 0, height])
const groups = svg
.selectAll("uniqueChart")
.data(sumstat3)
.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("d0");console.log(d)})
groups
.append("g")
.attr("transform", "translate(0," + innerheight + ")")
.call(d3.axisBottom(x).ticks(3))
groups
.append("g")
.call(d3.axisLeft(y).ticks(5));
// Draw the line .selectAll("circle").data((d) => d.arr).enter().append("circle")
groups
.append("path")
.attr("fill", function(d){ return color(d.key) })
.attr("stroke", "none")
//.attr("fake", function(d){console.log("d1");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
groups
.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 svg.node()

}
*/
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more