29:null 2a:["$","title",null,{"children":"Structuring a Course with Observable | Mike Freeman | Observable"}] 2f:[] 2d:{"id":"a566018005654872","slug":"structuring-a-course-with-observable","title":"Structuring a Course with Observable","thumbnail":"d765d7131a2ee5b4dcb6c87b485f308670a2757af5185b3cef099d5a8476230d","access_level":"public","create_time":"$D2020-03-06T23:56:55.813Z","update_time":"$D2020-03-09T05:38:19.891Z","view_time":null,"first_public_time":"$D2020-03-09T05:28:51.206Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":"starter_2024"},"version":264,"publish_version":264,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"91224afcbf710f0b","slug":"teaching","title":"teaching","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"type":"notebook","body":{"title":"Structuring a Course with Observable","cells":[{"id":0,"value":"md`# Structuring a Course with Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"render_table(course_options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"