2b:null 2c:["$","title",null,{"children":"[class] 2022-11-11のノートブック | 2022 TMU DataViz | Observable"}] 31:T5d1,{ const dataset = d3.shuffle(d3.range(40, 200, 10)); const width = 400; const height = 200; const margin = { top: 20, right: 10, bottom: 20, left: 30 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const barPadding = 1; // barの間隔を指定 const rects = svg.selectAll("rect").data(dataset).join("rect"); const yScale = d3.scaleLinear( [0, d3.max(dataset) + 10], [height - margin.bottom, margin.top] ); const xScale = d3 .scaleBand(dataset, [margin.left, width - margin.right]) .padding(0.05); rects .attr("x", xScale) .attr("y", yScale) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d)) .attr("fill", (d) => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`); svg .append("g") .selectAll("text") .data(dataset) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => xScale(d) + xScale.bandwidth() / 2) .attr("y", (d) => yScale(d) + 13) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "white") .text((d) => d); const xAxis = d3.axisBottom().scale(xScale); const yAxis = d3.axisLeft().scale(yScale).ticks(5); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom().scale(xScale)); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); return svg.node(); }32:T405,svg = { const width = 200; const height = 200; const margin = { top: 10, right: 10, bottom: 20, left: 30 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const xScale = d3.scaleLinear( [0, d3.max(tsvdata, (d) => d.x) + 10], [margin.left, width - margin.right] ); const yScale = d3.scaleLinear( [0, d3.max(tsvdata, (d) => d.y) + 10], [height - margin.bottom, margin.top] ); const zScale = d3.scaleLinear([0, d3.max(tsvdata, (d) => d.z)], [1, 7]); const points = svg.selectAll("circle").data(tsvdata).join("circle"); points .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", (d) => zScale(d.z)); const xAxis = d3.axisBottom().scale(xScale); const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom().scale(xScale)); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); return svg.node(); }33:[] 2f:{"id":"a635e91490e477ec","slug":null,"title":"[class] 2022-11-11のノートブック","thumbnail":"48fb77540f2a90b40c44945a3c5879eb798b2f8994599b80068d9e038354ac5e","access_level":"public","create_time":"$D2022-11-11T06:42:49.655Z","update_time":"$D2022-11-18T08:25:17.993Z","view_time":null,"first_public_time":"$D2022-11-11T06:42:49.655Z","has_unpublished_edits":null,"fork":{"id":"fb83057ee58c6548","slug":null,"title":"[class] 2022-11-11のノートブック","owner":{"id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024"},"version":194,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4369327ee7d4e99","login":"y-horita1111","name":"Yu Horita","avatar_url":"https://avatars-next.observableusercontent.com/725fd1fb3ad415036dcd9f4f880090cb8e886f32908c01e0ad3b37ec007aa9eb","tier":null}],"members":[{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e4369327ee7d4e99","login":"y-horita1111","name":"Yu Horita","avatar_url":"https://avatars-next.observableusercontent.com/725fd1fb3ad415036dcd9f4f880090cb8e886f32908c01e0ad3b37ec007aa9eb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"[class] 2022-11-11のノートブック","cells":[{"id":0,"value":"# [class] 2022-11-11のノートブック\n\nこのノートブックをフォークしてはじめてください。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .attr(\"viewBox\", [0, 0, 50, 50]);\n\n svg\n .append(\"circle\")\n .attr(\"cx\", 25)\n .attr(\"cy\", 25)\n .attr(\"r\", 20)\n .attr(\"fill\", \"yellow\")\n .attr(\"stroke\", \"orange\")\n .attr(\"stroke-width\", 2);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dataset = [5, 25, 45, 65, 85]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"chart = {\n const width = 400;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const rects = svg.selectAll(\"rect\").data(dataset).join(\"rect\");\n\n rects\n .attr(\"x\", (d, i) => i * 50)\n .attr(\"y\", 0)\n .attr(\"width\", 40)\n .attr(\"height\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"chart2 = {\n const width = 400;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const rects = svg.selectAll(\"rect\").data(dataset).join(\"rect\");\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\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"{\n const width = 400;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\n\n // 背景\n const backrect = svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#004\"); // 背景の色を濃い青に\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\", \"#8cc\"); // 棒の色を水色に\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"{\n const dataset = d3.shuffle(d3.range(40, 200, 2));\n\n const barPadding = 1; // barの間隔を指定\n\n const width = 400;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\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 * (width / dataset.length))\n .attr(\"y\", (d) => height - (d / d3.max(dataset)) * height)\n .attr(\"width\", width / dataset.length - barPadding)\n .attr(\"height\", (d) => (d / d3.max(dataset)) * height)\n .attr(\"fill\", \"#800\");\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"barChart = (dataset) => {\n const width = 400;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const barPadding = 1; // barの間隔を指定\n\n const rects = svg.selectAll(\"rect\").data(dataset).join(\"rect\");\n\n rects\n .attr(\"x\", (d, i) => i * (width / dataset.length))\n .attr(\"y\", (d) => height - d)\n .attr(\"width\", width / dataset.length - barPadding)\n .attr(\"height\", (d) => d)\n .attr(\"fill\", \"#800\")\n .on(\"mouseenter\", function (event) {\n d3.select(this).attr(\"fill\", \"yellow\");\n })\n .on(\"mouseleave\", function (event) {\n d3.select(this).attr(\"fill\", \"#800\");\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"},{"id":64,"value":"Plot.plot({\n width: 400,\n height: 100,\n marks: [\n Plot.barY(dataset, {\n x: (d, i) => i,\n y: (d) => d\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"barChart([50, 100, 75])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"# 11/18","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"{\n const dataset = d3.shuffle(d3.range(40, 200, 10));\n const width = 400;\n const height = 100;\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n const barPadding = 1; // barの間隔を指定\n\n const rects = svg.selectAll(\"rect\").data(dataset).join(\"rect\");\n\n const yScale = d3.scaleLinear([0, d3.max(dataset)], [height, 0]);\n\n const xScale = d3.scaleBand(dataset, [0, width]).padding(0.05);\n\n rects\n .attr(\"x\", xScale)\n .attr(\"y\", yScale)\n .attr(\"width\", xScale.bandwidth())\n .attr(\"height\", (d) => yScale(0) - yScale(d))\n .attr(\"fill\", (d) => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRgABhzZkXwZihskMCzNWKcL5lqRwyHRF-bygd7uxZ1rq7DbgcZXpSLClyh9FPJlw_JroNhDK73QUq-/pub?gid=0&single=true&output=tsv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"tsvdata = d3.tsv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"