Data and Digital Storytelling Lead @ 360info.org, hosted by Monash University. ❤️ making things for fun and for social good!
Public
Edited
Jul 1, 2024
1 star
data = [
{ year: 1995, a_mean: 23, a_sd: 0.5, b_mean: 32, b_sd: 0.6 },
{ year: 1996, a_mean: 24, a_sd: 0.6, b_mean: 31, b_sd: 0.65 },
{ year: 1997, a_mean: 24.5, a_sd: 0.4, b_mean: 30.5, b_sd: 0.6 },
{ year: 1998, a_mean: 22, a_sd: 0.6, b_mean: 30, b_sd: 0.6 },
{ year: 1999, a_mean: 26, a_sd: 0.5, b_mean: 39.5, b_sd: 0.6 },
]
htl.html`<table>
<caption>One great table</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Year</th>
<th scope="col" colspan="2">Group A</th>
<th scope="col" colspan="2">Group B</th>
</tr>
<tr>
<th scope="col">Mean</th>
<th scope="col">SD</th>
<th scope="col">Mean</th>
<th scope="col">SD</th>
<tr>
</thead>
<tbody>
${data.map(d => html`
<tr>
<td scope="row">${d.year}</td>
<td scope="row">${d.a_mean}</td>
<td scope="row">${d.a_sd}</td>
<td scope="row">${d.b_mean}</td>
<td scope="row">${d.b_sd}</td>
`)}
</tbody>
</table>`
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.
