31:[] 2f:{"title":"Shiny... to Observable... to Quarto","cells":[{"id":0,"value":"# Shiny... to Observable... to Quarto","pinned":true,"hidden":false,"mode":"md"},{"id":77,"value":"shinyinput","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":14,"value":"colorScale = d3.scaleOrdinal().domain(['red', 'blue', 'yellow']).range(['red', 'blue', 'yellow'])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}