25:["$","title",null,{"children":"In-class Observable Demo | BioVis-Pract | Observable"}] 49:[] 29:{"id":"0d88350e91c3a47c","slug":null,"title":"In-class Observable Demo","thumbnail":"66582e3a2aa61113f4039091b5d516ad6412d1d23916599ff57f3f7a52ca2500","access_level":"public","create_time":"$D2023-08-10T06:32:00.480Z","update_time":"$D2023-08-10T06:34:22.393Z","view_time":null,"first_public_time":"$D2023-08-10T06:32:00.480Z","has_unpublished_edits":null,"fork":{"id":"8d5668a126103639","slug":null,"title":"Introduction","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"70b8a8bf6af1277c","login":"biovis-pract","name":"BioVis-Pract","avatar_url":"https://avatars-next.observableusercontent.com/768d4bd935920ecca6dfbcafd1037f69d4ccfe5d04817716850a39eea0bca6a5","tier":"starter_2024","bio":"","following":false},"version":190,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c54fddce61cc9ab3","login":"mathias-witte-paz","name":"Mathias Witte Paz","avatar_url":"https://avatars-next.observableusercontent.com/3edf7c33fafdbb0a93c6c58c5840659baaf8f17efa3ccc1386138202b4838a58","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"70b8a8bf6af1277c","login":"biovis-pract","name":"BioVis-Pract","avatar_url":"https://avatars-next.observableusercontent.com/768d4bd935920ecca6dfbcafd1037f69d4ccfe5d04817716850a39eea0bca6a5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c54fddce61cc9ab3","login":"mathias-witte-paz","name":"Mathias Witte Paz","avatar_url":"https://avatars-next.observableusercontent.com/3edf7c33fafdbb0a93c6c58c5840659baaf8f17efa3ccc1386138202b4838a58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"In-class Observable Demo","cells":[{"id":0,"value":"md`# In-class Observable Demo\n\nObservable is a notebook programming environment geared towards developing visualizations. We will use Observable in this course to share examples and tutorials that we have prepared for you and also for the homework assignments and mini-projects. It's a great environment for you to learn how to develop visualizations using D3. Seeing the output of each cell will make it easier for you to debug and iteratively build your visualizations. It will also make it easy for us to help you with your assignments, since you can simply send us a link.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## Simple variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"1 + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"num = 1 + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"num * 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"newNum = {\n const a = 5;\n const b = 6;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"newNum * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"## Different types of outputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"html`

This is HTML

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`This **Markdown**`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"html`This is just bold text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"a = b * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"b = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 200);\n \n svg.append('circle')\n .attr('cx', 100)\n .attr('cy', 100)\n .attr('r', radius)\n .attr('fill', color);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof radius = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"radius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof color = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null