2b:null 2c:["$","title",null,{"children":"Shiny... to Observable... to Quarto | Maya Gans | Observable"}] 31:[] 2f:{"id":"26f430fa190a3461","slug":"shiny-to-observable-to-quarto","title":"Shiny... to Observable... to Quarto","thumbnail":"9d0342773d257f97ad675102dc03ba239cb2bc1731e425b1abb375ae739373b0","access_level":"public","create_time":"$D2022-08-14T16:38:14.719Z","update_time":"$D2023-02-17T18:38:51.877Z","view_time":null,"first_public_time":"$D2022-08-14T17:41:31.246Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024"},"version":97,"publish_version":97,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Shiny... to Observable... to Quarto","cells":[{"id":0,"value":"# Shiny... to Observable... to Quarto","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"shinyinput","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof shinyinput = {\n\n// instantiate value\nlet shinyinput = 'NULL'\n\nvar svg = d3.select(DOM.svg(width, 100))\n .property(\"value\", shinyinput);\n\n///Create bars\nsvg.selectAll(\"circles\")\n .data(['red', 'blue', 'yellow'])\n .enter()\n .append(\"circle\")\n .attr(\"r\", 40)\n .attr(\"cx\", function(d,i) { return 60 + (i*100) })\n .attr(\"cy\", 50)\n .attr(\"fill\", d => colorScale(d))\n .attr('stroke', 'black')\n .attr('stroke-width', 3)\n .attr('data-value', d => d)\n .attr('cursor', 'pointer')\n // how do I set the dispatch to the value? \n // R people: this is like shny.SetInputvalue(\"shinyinput\", shinyInput)\n .on(\"click\", (event, d) => {\n shinyinput = d\n svg.property(\"value\", shinyinput).dispatch(\"input\");\n });\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"colorScale = d3.scaleOrdinal().domain(['red', 'blue', 'yellow']).range(['red', 'blue', 'yellow'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"