30:[] 2e:{"title":"Fitted Symbols","cells":[{"id":0,"value":"# Fitted Symbols","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"chart = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"{\n const path = d3.select(chart).select(\"#symbol\"),\n collection = d3.select(chart).select(\"#collection\").selectAll(\"path\"),\n rect = d3.select(chart).select(\"rect\"),\n width = +rect.attr(\"width\"),\n height = +rect.attr(\"height\"),\n symbol = d3.symbol(),\n symbolTypes = d3.symbols,\n symbolNames = \"circle cross diamond square star triangle wye\".split(/ /);\n\n let symbolIndex = -1;\n\n do {\n symbolIndex = (symbolIndex + 1) % symbolTypes.length;\n symbol.type(symbolTypes[symbolIndex]);\n\n yield symbolNames[symbolIndex];\n\n path.attr(\"d\", symbol.size(64));\n collection.transition().style(\"fill\", (_,i) => i === symbolIndex ? \"#000\" : \"#999\")\n\n var box = path.node().getBBox(),\n error = Math.min(width / box.width, height / box.height);\n\n path\n .transition()\n .duration(1500)\n .attr(\"d\", symbol.size(error * error * 64));\n } while (await Promise.race([invalidation, Promises.delay(2000, true)]));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}