2c:null 2d:["$","title",null,{"children":"HTML cell | Course Munk | Observable"}] 32:T40b,{ const svg = d3.create("svg") //create a detatched svg element. meaning that it's not on the page yet .attr("width", "500px") .attr("height", "100px") //this is how we set attributes with d3 const somedata = [ {radius: 10, color: "red"}, {radius: 10, color: "#00beef"}, {radius: 20, color: "peru"} ]; svg.selectAll("circle") //select all the existing circles inside svg, could be none of those, that's ok .data(somedata) // bind somedata to the existing circles we found .join("circle") //d3 magic: create as many circles as we need, remove as many as we don't need .attr("cx", (d,i) => (i + 1) * 50) //second argument is just a 0-based counter .attr("cy", 50) //"cy" is constant, so no need for accessor function here .attr("r", d => d.radius) //access radius from each data element .attr("fill", d => d.color) //access color from each data element return svg.node(); //at this point our svg will be handed over to observable, which will attach it as HTML above this code }33:[] 30:{"id":"16203d998e8f7059","slug":"html-cell","title":"HTML cell","thumbnail":"118c24ebb3a405e57188965cb94f71bbeb5b7dea4f445d83b6f8532a15655aa3","access_level":"public","create_time":"$D2023-05-01T17:56:11.055Z","update_time":"$D2023-05-01T18:17:47.398Z","view_time":null,"first_public_time":"$D2023-05-01T17:56:11.055Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"44d081517d552344","login":"course-munk2","name":"Course Munk","avatar_url":"https://avatars-next.observableusercontent.com/c0de06b44feb9fd5aca46933b2701c70245ebc2c8605481458e51b0d40725735","tier":"starter_2024"},"version":39,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"},{"type":"team","id":"44d081517d552344","login":"course-munk2","name":"Course Munk","avatar_url":"https://avatars-next.observableusercontent.com/c0de06b44feb9fd5aca46933b2701c70245ebc2c8605481458e51b0d40725735","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HTML cell","cells":[{"id":0,"value":"# HTML cell ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"notice the cell types below. first is a HTML cell:\n\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"

a paragraph piece of text

another piece of text with link

\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"the above picture is made manually with HTML. we can try drawing the same thing with some data, JavaScript and D3. for that we need a javascript cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"