Published
Edited
Jan 19, 2021
Fork of Utilities
Importers
4 stars
Insert cell
Insert cell
Insert cell
check_answer = attemptObj => {
let [key, attempt] = Object.entries(attemptObj)[0];
let result;
if (attempt === undefined) {
return html`${incorrect(key)}`;
}
let answer = answers[key];
// Convert arquero tables to arrays of objects
if (typeof attempt.objects === "function") attempt = attempt.objects();

// Convert dates to strings for checking
if (attempt instanceof Date) attempt = attempt.toISOString();
if (answer instanceof Date) answer = answer.toISOString();
// Check arrays
if (Array.isArray(answer)) {
// Convert dates to strings for checking
if (attempt[0] instanceof Date) {
attempt = attempt.map(d => d.toISOString());
}
if (answer[0] instanceof Date) {
answer = answer.map(d => d.toISOString());
}
result = arrays_are_equal(attempt, answer);
} else {
result = attempt === answer;
}
return html`${result ? correct(key) : incorrect(key)}`;
}
Insert cell
answers = []
Insert cell
correct = key =>
`<div style="background-color:#b6f7d7;padding:5px;border-radius:5px">Correct 🎉! Nice work calculating <strong><code style="color:purple">${key}</code></strong></div>`
Insert cell
incorrect = key =>
`<div style="background-color:#fff3b5;padding:5px;border-radius:5px">Not yet 🤔... you'll get <code style="color:purple">${key}</code> eventually!</div>`
Insert cell
arrays_are_equal = (array1, array2) =>
array1.length === array2.length &&
array1.every((value, index) => _.isEqual(value, array2[index]))
Insert cell
md`## Styles, common components`
Insert cell
Insert cell
Insert cell
Insert cell
group_notebook_instructions = (name = "Notebook name") => {
return md`## Set up
To create a notebook for your group:
- One group member fork this notebook (make sure it is to the \`@uw-info474\` account)
- That group member should _rename_ the notebook by changing the title cell above from _${name}_ to *${name} LAST_NAME*
- That group member should then click the **Share** button, and share it with the other members of the group so that the other group members can edit the notebook at the same time
- All group members should open the notebook because everyone can edit simultaneously!
`;
}
Insert cell
assignment_instructions = (name = "Assignment name") => {
return md`## Set up
To create a notebook for your assignment:
<li>**Fork Notebook**: You should fork the assignment (make sure to fork it _within_ the Team)</li>
<li>**Rename Notebook**: Add your last name to the assignment name by changing the header cell value (e.g., "_${name} Freeman_")</li>
<li>**Share Notebook**: Share the assignment with the instructor and TAs so they can view and edit it</li>`;
}
Insert cell
observable_challenges = md`## Observable Challenges
In the cells below, please document any issues that you encountered working with Observable (e.g, frustrating errors, areas of confusion, issues with navigation, etc.). We'll use this to guide instruction, construct better tutorials, and provide feedback to the folks at Observable.`
Insert cell
assignment_instructions()
Insert cell
md`## Table`
Insert cell
// Function to render a table
render_data_table = (options, n_rows = 20) => {
const table_data = options.filter((d, i) => i <= n_rows);
return html`<table>
<thead>
<tr>${Object.keys(options[0]).map((d, i) => {
let label = d;
return `<th>${label}</th>`;
})}
</tr>
<thead>
<tbody>
${table_data.map(row => {
return html`<tr>${Object.values(row).map(col => {
return `<td>${col}</td>`;
})}</tr>`;
})}
</tbody>
</table>`;
}
Insert cell
Insert cell
downloadButton = (pdf, filename = 'paper') => {
const button = DOM.download(pdf, filename, `Download ${filename}`);
return button;
}
Insert cell
code_styles = html`<style>
p code, li code, pre code{color: #c30771;}
</style>`
Insert cell
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>`
Insert cell
md`## Appendix`
Insert cell
_ = require("lodash")
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