2c:null 2d:["$","title",null,{"children":"circle and rect -sh | Shutaro Masuoka | Observable"}] 32:[] 30:{"id":"31fc1d9203d0e42c","slug":"circle1","title":"circle and rect -sh","thumbnail":"6f357ba913321de0100672b28c2dc0a706d3b77c72e96bc39e641bf2eed67c7a","access_level":"unlisted","create_time":"$D2021-11-12T04:01:14.054Z","update_time":"$D2021-11-12T04:39:31.960Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2b05c66ac1a80e3","login":"sh-masuoka","name":"Shutaro Masuoka","avatar_url":"https://avatars-next.observableusercontent.com/ef8edd516a775b89ce4b40134abdb60a7f0fa7f41c548650fa1bde7321b961e4","tier":"starter_2024"},"version":72,"publish_version":72,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e9c27c7cba6adc9","login":"sh-masuoka","name":"Shutaro Masuoka","avatar_url":"https://avatars-next.observableusercontent.com/ef8edd516a775b89ce4b40134abdb60a7f0fa7f41c548650fa1bde7321b961e4","tier":null}],"members":[{"type":"individual","id":"8e9c27c7cba6adc9","login":"sh-masuoka","name":"Shutaro Masuoka","avatar_url":"https://avatars-next.observableusercontent.com/ef8edd516a775b89ce4b40134abdb60a7f0fa7f41c548650fa1bde7321b961e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"circle and rect -sh","cells":[{"id":0,"value":"# circle and rect -sh","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"dataset = [5, 25, 45, 65, 85,105,125,145]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n const width = 400;\n const height = 200;\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n // 背景\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#007\");\n\n const rects = svg\n .selectAll(\"rect.bar\")\n .data(dataset)\n .join(\"rect\")\n .attr(\"class\", \"bar\");\n\n rects\n .attr(\"x\", (d, i) => i * 50)\n .attr(\"y\", (d) => height - d)\n .attr(\"width\", 40)\n .attr(\"height\", (d) => d)\n .attr(\"fill\", (d) =>{\n if(d <=100){\n return \"green\";\n }else{\n return \"red\";\n }\n });\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"