UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Jan 6, 2021
1 fork
Importers
8 stars
// Function to render a table
render_data_table = options => html`<table>
<thead>
<tr>${Object.keys(options[0]).map((d, i) => {
let label = d;
return `<th>${label}</th>`;
})}
</tr>
<thead>
<tbody>
${options
.filter((d, i) => i < 100)
.map(row => {
return html`<tr>${Object.values(row).map(col => {
return `<td>${col}</td>`;
})}</tr>`;
})}
</tbody>
</table>
`
downloadButton = (pdf, filename = 'paper') => {
const button = DOM.download(pdf, filename, `Download ${filename}`);
return button;
}
code_styles = html`<style>
p code, li code {color: #c30771;}
</style>`
table_styles = html`<style>
p code, li code {color: #c30771;}
code.error {
color:red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
display: block;
overflow: auto;
white-space: nowrap;
width:${width}px;
min-width:${width}px;
height:300px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td:first-of-type {
font-style: italic;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #d3d3d359;
}
</style>`
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.
