31:[] 2f:{"title":"Structuring a Course with Observable","cells":[{"id":0,"value":"md`# Structuring a Course with Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"md`## Goals\nI'm excited to structure my upcoming Interactive Information Visualization course at the [University of Washington Information School](https://ischool.uw.edu/) using Observable. I was attracted to Observable as a tool, as I was seeking to:\n1. Use a platform that supports **interactive visualization development**\n2. Leverage a system that allows **templating** (e.g., starter code + data) for student work\n3. Provide the opportunity for **collaborative development** amongst students\n4. Lower the **barrier to entry** for working with already complex visualization tools like [d3.js](https://d3js.org/)\n5. Find a way to provide targeted **feedback** on student work\n\nBased on these, Observable seemed like a promising tool.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Tradeoffs\nThe folks at Observable were _super_ helpful in laying out the different affordances and limitations for organizing a course, which revolved around these considerations:\n- **Visibility**: are students able to see one another's work?\n- **Collaboration**: can students live-edit the same notebook?\n- **Feedback**: can an instructor comment on a student's notebook?\n- **Organization**: are the notebooks easy to share and access?\n\nAs I understand it, there are two options \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"render_table(course_options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`Between these options, I opted for the first -- to make **all students members of the same team**. This will allow easier collaboration and feedback, and is much more in the spirit of open-source visualization development. In doing so, I'll need to make adjustments to the assignment structure such that viewing one another's notebooks doesn't constitute \"cheating\" (more on how this goes later).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Upcoming Considerations\nAs I being to reorganize the course content to be driven using Observable, I'm thinking about the following:\n- **Using Collections**: How does it make sense to organize content across different _Collections_? Should each student have _their own_ collection? What about each assignment? And how does that intersect with tutorials and other class content?\n- **Private // Public Notebooks**: What are the reasons for keeping notebooks private or public? How can assignments be structured such that seeing other student work doesn't detract from someone's learning?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`I'll continue to share my insights and process so other folks can learn through my navigation of using this platform. I'm excited to be giving this a shot!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"course_options = [\n {\n description: 'Students are \"members\" of the a team',\n visibility: \"Everyone can see everything\",\n collaboration: \"Students can live-edit the same notebooks\",\n feedback: \"Can be provided directly via comments\",\n organization: \"Assignments can each be their own collection\"\n },\n {\n description: \"Students can view public team contents\",\n visibility: \"Students can view chosen content\",\n collaboration: \"Students can collaborate using forking method\",\n feedback: 'Can be provided via \"suggestions\"',\n organization:\n \"Students fork to their own (private) notebook, then share it with instructors.\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"render_table = options => html`\n ${Object.keys(options[0]).map((d, i) => {\n let label = i == 0 ? \"\" : d.toUpperCase();\n return ``;\n })}\n\n \n ${options.map(row => {\n return html`${Object.values(row).map(col => {\n return ``;\n })}`;\n })}\n \n

${label}
${col}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}