html`<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 1em;
}
</style>`
table = {
const table = d3.create("table");
table.append("tbody")
.selectAll("tr")
.data(dataset1)
.join("tr")
.selectAll("td")
.data(row => row)
.join("td")
.text(d => d)
.style("text-align", "center")
return table.node();
}
dataset2 = [
{"prefecture":"茨城", "県庁所在地":"水戸"},
{"prefecture":"栃木", "県庁所在地":"宇 宮"},
{"prefecture":"群馬", "県庁所在地":"前橋"},
{"prefecture":"埼玉", "県庁所在地":"さいたま"},
{"prefecture":"千葉", "県庁所在地":"千葉"},
{"prefecture":"東京", "県庁所在地":"新宿"},
{"prefecture":"神奈川", "県庁所在地":"横浜"}
]
table2 = {
const names = Object.keys(dataset2[0]);
const table = d3.create("table");
table.append("thead")
.join("tr")
.selectAll("th")
.data(names)
.join("th")
.text(d => d)
.style("background-color", "#aaa")
.style("color", "#fff")
table.append("tbody")
.selectAll("tr")
.data(dataset2)
.join("tr")
.selectAll("td")
.data(row => Object.entries(row))
.join("td")
.text(d => d[1]);
return table.node()
}
Object.entries({prefecture: "IBARAKI", prefectural_capital: "MITO"});
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.
