2f:T592,chart = (data) => { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f8f8f8"); svg .append("g") .attr("transform", `translate(0, ${margin.top})`) .call(d3.axisTop(x).tickSizeOuter(0)); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()); const bars = svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("y", (d) => y(d.name)) .attr("x", x(0)) .attr("width", (d) => x(d.count) - x(0)) .attr("height", y.bandwidth()) .attr("fill", (d) => color(d.count)); const text = svg .append("g") .selectAll("text") .data(data) .join("text") .text((d) => d.count) .attr("fill", (d) => (d.count < 10 ? "red" : "white")) .attr("y", (d) => y(d.name) + y.bandwidth() / 2) // バーの中央に配置 .attr("x", (d) => x(d.count) - margin.right) // 右端からのマージンを調整 .attr("dy", "0.35em") // テキストを垂直方向に微調整 .attr("font-size", "14px") // フォントサイズの指定 .attr("text-anchor", "middle"); // テキストの水平方向の基準点を中央に return svg.node(); }30:T55f,chartAge = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, margin.top + 20 * 10]); const agedata = viewof agedata.value; const x = d3 .scaleLinear() .domain([0, d3.max(agedata, (d) => d.value)]) .rangeRound([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(agedata.map((d) => d.name)) .rangeRound([margin.top, margin.top + 20 * dataAge.names.length]); let bar = svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(agedata, (d) => d.name) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", x(0)) .attr("y", (d) => y(d.name)) .attr("width", (d) => x(d.value) - x(0)) .attr("height", y.bandwidth() - 1); const gx = svg.append("g").call(xAxis2, x); const gy = svg.append("g").call(yAxis2, y); return Object.assign(svg.node(), { update(agedata) { const t = svg.transition().duration(750); gx.transition(t).call( xAxis2, x.domain([0, d3.max(agedata, (d) => d.value)]) ); gy.transition(t).call(yAxis2, y.domain(agedata.map((d) => d.name))); bar = bar .data(agedata, (d) => d.name) .call((bar) => bar .transition(t) .attr("width", (d) => x(d.value) - x(0)) .attr("y", (d) => y(d.name)) ); } }); }31:[{"id":"a21ff7fb292405b03c061ed727536b823b3ba126070da1758fad67d525da60141f177c62a76a6df451a3dd19ddf0f54256abfc457d54d19b46a1a81aaacf884b","href":"https://static.observableusercontent.com/files/a21ff7fb292405b03c061ed727536b823b3ba126070da1758fad67d525da60141f177c62a76a6df451a3dd19ddf0f54256abfc457d54d19b46a1a81aaacf884b","name":"temperature.csv","type":"text/csv","lastModified":1739769985016.661,"size":5873},{"id":"974c433d807128a001502e9a4d1f7a68aa0f0d1d0b64811b6440d049514cbed441f6a01cae321cadf169cdf0c5ff724778396d7466ce0aba151b52add0fac0c0","href":"https://static.observableusercontent.com/files/974c433d807128a001502e9a4d1f7a68aa0f0d1d0b64811b6440d049514cbed441f6a01cae321cadf169cdf0c5ff724778396d7466ce0aba151b52add0fac0c0","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1739773648640.853,"size":48822},{"id":"3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","href":"https://static.observableusercontent.com/files/3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","name":"us-population-state-age.csv","type":"text/csv","lastModified":1739889059018.597,"size":3516}] 2d:{"title":"Visualization","cells":[{"id":0,"value":"# Visualization\n","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"## Selecting elements","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR_a8mD7I3cNHg0oVtckTZ9H1S-Hcn9q3msHOELP1sj-hoHXSveFF1v2cyegk5Bi49wYtIRIgXmh11B/pub?gid=0&single=true&output=tsv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"dataset = d3.tsv(url2, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"titles = Array.from(dataset, (d) => d.Video_title)","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"...はスプレッド構文を示す。これは、配列や文字列などのイテラブルオブジェクトを個別の要素に展開してくれる。","pinned":false,"hidden":false,"mode":"md"},{"id":799,"value":"[...titles[0]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"{\n const numIterator = dataset[Symbol.iterator]();\n return numIterator.next();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"values = {\n const sorted = [];\n do {\n const x = Math.random();\n const y = Math.random() - 1;\n const i = d3.bisect(sorted, x);\n sorted.splice(i, 0, x, y); //splice(start, deleteCount, item1,)start:インデックス、deleteCount: 減らす要素の数、挿入するアイテム\n yield sorted;\n } while (sorted.length < 255);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"doTest = {\n const sorted = [];\n let x = 0;\n do {\n x += Math.random();\n const i = d3.bisect(sorted, -x);\n sorted.splice(i, 0, x);\n yield sorted;\n } while (sorted.length < 10);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof mu = Scrubber(d3.ticks(-0, 1, 20), {\n format: (x) => `mu = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n loop: false,\n alternate: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"randomNormalガウス分布を持つ乱数を生成する。乱数の期待値はmuで、標準偏差はシグマで指定する。","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"randoms = Float64Array.from({length:200}, d3.randomNormal(0, mu))","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"Histogram(randoms)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"FileAttachment(\"temperature.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"FileAttachment(\"temperature.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"FileAttachment(\"temperature.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"sum = {\n let s = 0;\n for (let i = 0; i < 10; i++) {\n s += i;\n }\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"data = {\n const text = await FileAttachment(\"temperature.csv\").text();\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n return d3.csvParse(text, ({ date, temperature }) => ({\n data: parseDate(date),\n temperature: +temperature\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"Histogram(data, { value: (d) => d.temperature, width, height: 200 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"data2 = Array.from(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"fruits = [\n { name: \"🍊\", count: 21 },\n { name: \"🍇\", count: 13 },\n { name: \"🍏\", count: 8 },\n { name: \"🍌\", count: 5 },\n { name: \"🍐\", count: 3 },\n { name: \"🍋\", count: 2 },\n { name: \"🍎\", count: 1 },\n { name: \"🍉\", count: 1 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"Array.from(fruits, (d) => d.count)","pinned":true,"hidden":false,"mode":"ojs"},{"id":897,"value":"fruits.map((d) => d.count) ==[...fruits]??? ","pinned":false,"hidden":false,"mode":"md"},{"id":889,"value":"fruits.map((d) => d.count).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"y = d3\n .scaleBand()\n .domain(fruits.map((d) => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(fruits, (d) => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"Legend(color, { title: \"Number of fruit\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"chart(fruits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"color = d3\n .scaleSequential()\n .domain([0, d3.max(fruits, (d) => d.count)])\n .interpolator(d3.interpolateTurbo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"color(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"## Shape","pinned":false,"hidden":false,"mode":"md"},{"id":386,"value":"dataShape = FileAttachment(\"aapl-bollinger.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"x2 = d3\n .scaleUtc()\n .domain(d3.extent(dataShape, (d) => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"y2 = d3\n .scaleLinear()\n .domain([0, d3.max(dataShape, (d) => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"{\n let path = `M${x2(dataShape[0].date)},${y2(dataShape[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x2(dataShape[i].date)},${y2(dataShape[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"lineMiddle = d3\n .line()\n .x((d) => x2(d.date))\n .y((d) => y2(d.middle))","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"line = d3\n .line()\n .x((d) => x2(d.date))\n .y((d) => y2(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"line(dataShape)","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"lineMiddle(dataShape)","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"xAxis = (g, scale = x2) =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(scale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"yAxis = (g, scale = y2) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(scale).tickSizeOuter(0))\n .call((g) => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`);\n\n // 線のパスを追加\n svg\n .append(\"path\")\n .datum(dataShape)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line)\n .attr(\"stroke\", \"steelblue\");\n\n svg\n .append(\"path\")\n .datum(dataShape)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"stroke\", \"red\")\n .attr(\"d\", lineMiddle);\n\n // X軸を追加\n svg.append(\"g\").call(xAxis);\n\n // Y軸を追加\n svg.append(\"g\").call(yAxis);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"area = d3\n .area()\n .x((d) => x2(d.date))\n .y0(y2(0))\n .y1((d) => y2(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`);\n\n svg.append(\"path\").datum(dataShape).attr(\"d\", area).attr(\"fill\", \"steelblue\");\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"## Animation","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"reveal = (path) =>\n path\n .transition()\n .duration(5000)\n .ease(d3.easeLinear)\n .attrTween(\"stroke-dasharray\", function () {\n const length = this.getTotalLength();\n return d3.interpolate(`0,${length}`, `${length},${length}`);\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"chartAnime(replay)","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"chartAnime = (func) => {\n const svg = d3.create(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`);\n\n // 線のパスを追加\n func;\n svg\n .append(\"path\")\n .datum(dataShape)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line)\n .attr(\"stroke\", \"steelblue\")\n .call(reveal);\n\n svg\n .append(\"path\")\n .datum(dataShape)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"stroke\", \"red\")\n .attr(\"d\", lineMiddle);\n\n // X軸を追加\n svg.append(\"g\").call(xAxis);\n\n // Y軸を追加\n svg.append(\"g\").call(yAxis);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"viewof t = Scrubber(d3.ticks(0, 1, 200), {\n autoplay: false,\n loop: false,\n initial: 0,\n format: (x) => `t = ${x.toFixed(3)}`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"svg = d3.create(\"svg\").attr(\"viewBox\", `0 0 ${width} ${height}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"lineLength = svg\n .append(\"path\")\n .attr(\"d\", line(dataShape))\n .node()\n .getTotalLength()","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"strokeDasharray = d3.interpolate(\n `0,${lineLength}`,\n `${lineLength},${lineLength}`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"strokeDasharray(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof timeframe = Inputs.radio(\n new Map([\n [\"All\", d3.extent(dataShape, (d) => d.date)],\n [\"2009\", [new Date(\"2009-01-01\"), new Date(\"2010-01-01\")]],\n [\"2010\", [new Date(\"2010-01-01\"), new Date(\"2011-01-01\")]],\n [\"2011\", [new Date(\"2011-01-01\"), new Date(\"2012-01-01\")]]\n ]),\n { key: \"All\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"chartWithZoom = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width:100%; height: auto;height: intrinsic\");\n\n const zx = x2.copy();\n\n const line = d3\n .line()\n .x((d) => zx(d.date))\n .y((d) => y2(d.close));\n\n const path = svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(dataShape));\n\n const gx = svg.append(\"g\").call(xAxis, zx);\n\n const gy = svg.append(\"g\").call(yAxis, y2);\n\n return Object.assign(svg.node(), {\n update(domain) {\n const t = svg.transition().duration(750);\n zx.domain(domain);\n gx.transition(t).call(xAxis, zx);\n path.transition(t).attr(\"d\", line(dataShape));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"update = chartWithZoom.update(timeframe)","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"## Joins","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"chartAlphabet = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n svg\n .selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text((d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"randomLetters = {\n while (true) {\n yield d3\n .shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(1000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"chartAlphabet2 = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"chartAlphabet2.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"chartAlphabet3 = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"ヒラギノ角ゴシック ProN\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, (d) => d)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text((d) => d),\n (update) => update,\n (exit) => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"chartAlphabet3.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"chartAlphabet4 = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"ヒラギノ角ゴシック ProN\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n const t = svg.transition().duration(750);\n\n text = text\n .data(letters, (d) => d)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n .attr(\"y\", -7)\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", (d, i) => i * 17)\n .text((d) => d),\n (update) => update,\n (exit) =>\n exit.call((text) => text.transition(t).remove().attr(\"y\", 41))\n )\n .call((text) =>\n text\n .transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17)\n );\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"chartAlphabet4.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"viewof agedata = Inputs.select(\n new Map(\n dataAge.ages.map((age) => [\n age,\n dataAge\n .filter((d) => d.age === age)\n .sort((a, b) => d3.descending(a.value, b.value))\n ])\n ),\n { label: \"Age group\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"xAxis2 = (g, x) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call((g) => (g.selection ? g.selection() : g).select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"chartAge.update(agedata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"yAxis2 = (g, y) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"dataAge = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv();\n const ages = data.columns.slice(1);\n const totals = new Map(\n data.map((d) => [d.name, d3.sum(ages, (age) => d[age])])\n );\n return Object.assign(\n d3.cross(data, ages).map(([d, age]) => ({\n name: d.name,\n age,\n value: +d[age] / totals.get(d.name)\n })),\n { names: data.map((d) => d.name), ages }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"class Tooltip {\n constructor() {\n this._date = htl.svg``;\n this._close = htl.svg``;\n this.node = htl.svg`\n \n ${this._date}\n ${this._close}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\n \"transform\",\n `translate(${x2(d.date)},${y2(d.close)})`\n );\n this._date.textContent = formateDate(d.date);\n this._close.textContent = formateDate(d.close);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"{\n const tooltip = new Tooltip();\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(dataShape));\n\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(xAxis);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(d3.pairs(dataShape))\n .join(\"rect\")\n .attr(\"x\", ([a, b]) => x2(a.date))\n .attr(\"height\", height)\n .attr(\"width\", ([a, b]) => x2(b.date) - x2(a.date))\n .on(\"mouseover\", (event, [a]) => tooltip.show(a))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"formateDate = d3.utcFormat(\"%b %-d, '%y\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}