${d.date} - ${d.close}

28:null 29:["$","title",null,{"children":"学习D3.js | MiaTakeshi | Observable"}] 2e:T563,viewof timeframe = { const form = html``; form.onchange = () => form.dispatchEvent(new CustomEvent("input")); // Safari form.oninput = event => { switch (form.radio.value) { case "2009": form.value = [new Date("2009-01-01"), new Date("2010-01-01")]; break; case "2010": form.value = [new Date("2010-01-01"), new Date("2011-01-01")]; break; case "2011": form.value = [new Date("2011-01-01"), new Date("2012-01-01")]; break; default: form.value = d3.extent(shape_data, d => d.date); break; } }; form.oninput(); return form; }2f:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1586241061595.377,"size":48822},{"id":"e3d2fa179165d4b106205887bcb6daba1dd42d989e96af71e07121a05def8afde610674968e5af37ffc30c7b47f8f933eb21802d408f7e164ffdda6390423c40","href":"https://static.observableusercontent.com/files/e3d2fa179165d4b106205887bcb6daba1dd42d989e96af71e07121a05def8afde610674968e5af37ffc30c7b47f8f933eb21802d408f7e164ffdda6390423c40","name":"values-.json","type":"application/json","lastModified":1586229608030.857,"size":28181},{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1586230880362.988,"size":5873}] 2c:{"id":"b7ff74060689e8bf","slug":"d3-js","title":"学习D3.js","thumbnail":"98543ee79c224d1f9b7e0c53f0830b4ab32d97637a5139c4dfd00368335b0f71","access_level":"public","create_time":"$D2020-04-07T03:12:06.149Z","update_time":"$D2020-04-07T13:44:41.089Z","view_time":null,"first_public_time":"$D2020-04-07T09:32:11.444Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"de9a584b19fc8d48","login":"gongbaodd","name":"MiaTakeshi","avatar_url":"https://avatars-next.observableusercontent.com/2b296f3a5acefd86d88acb782f236b66bca26054c729ac3a853dfbac6e33e640","tier":"starter_2024"},"version":362,"publish_version":362,"role":null,"authored":false,"authors":[{"type":"individual","id":"9773bcf078e6ed4d","login":"gongbaodd","name":"MiaTakeshi","avatar_url":"https://avatars-next.observableusercontent.com/2b296f3a5acefd86d88acb782f236b66bca26054c729ac3a853dfbac6e33e640","tier":null}],"members":[{"type":"individual","id":"9773bcf078e6ed4d","login":"gongbaodd","name":"MiaTakeshi","avatar_url":"https://avatars-next.observableusercontent.com/2b296f3a5acefd86d88acb782f236b66bca26054c729ac3a853dfbac6e33e640","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"学习D3.js","cells":[{"id":0,"value":"md`# 学习D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## 跟着例子学`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"values = FileAttachment(\"values-.json\").json();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"[d3.min(values), d3.median(values), d3.max(values)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import {chart as chart1} with {values as data} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"chart1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height=200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {chart as chart2} with {values as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"chart2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof mu = Scrubber(d3.ticks(-5, 5, 200), {\n format: x => `mu = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n alternate: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"values3 = Float64Array.from({length: 2000}, d3.randomNormal(mu, 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`使用D3的比例尺函数，保持x轴固定`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"x = d3.scaleLinear([-10, 10], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {chart as chart3, margin, width} with {x, values3 as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chart3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## 数据`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"FileAttachment(\"temperature.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"FileAttachment(\"temperature.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"d3.csvParse(await FileAttachment(\"temperature.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"d3.csvParse(await FileAttachment(\"temperature.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"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 date: parseDate(date),\n temperature: +temperature,\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`计算数据的范围`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3.extent(data, ({ date }) => date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3.extent(data, ({ temperature }) => temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"temperatures = data.map(({ temperature }) => temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"import {chart as temperatureHistogram} with {temperatures as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"temperatureHistogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`## 坐标系`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"fruits_x = d3.scaleLinear()\n .domain([0, d3.max(fruits, ({ count }) => count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"fruits_y = d3.scaleBand()\n .domain(fruits.map(({ name }) => name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"fruits_x.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"fruits_x.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"fruits_y.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"fruits_y.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"fruits_y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, ({ count }) => count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## 形状`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"shape_data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"shape_x = d3.scaleUtc()\n .domain(d3.extent(shape_data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"shape_y = d3.scaleLinear()\n .domain([0, d3.max(shape_data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"{\n let path = `M${shape_x(shape_data[0].date)},${shape_y(shape_data[0].close)}`;\n for (let i = 1; i < shape_data.length; ++i) {\n path += `L${shape_x(shape_data[i].date)},${shape_y(shape_data[i].close)}`;\n }\n \n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"line = d3.line()\n .x(d => shape_x(d.date))\n .y(d => shape_y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"line(shape_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"shape_xAxis = g => g\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(shape_x).ticks(width/80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"shape_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(shape_y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"shape_area = d3.area()\n .x(d => shape_x(d.date))\n .y0(shape_y(0))\n .y1(d => shape_y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"shape_band = d3.area()\n .x(d => shape_x(d.date))\n .y0(d => shape_y(d.lower))\n .y1(d => shape_y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"shape_middle = d3.line()\n .x(d => shape_x(d.date))\n .y(d => shape_y(d.middle))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle]) => startAngle)\n .endAngle(([_, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"arc([Math.PI / 2, Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof n = {\n const form = html`\n\n`;\n form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`## 动画`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"reveal = path => path.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"viewof replay = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"replay, html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof t = Scrubber(d3.ticks(0, 1, 200), {\n autoplay: true,\n loop: false,\n initial: 50,\n format: x => `t = ${x.toFixed(3)}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"lineLength = svg``.getTotalLength();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"viewof replay2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"{\n replay2;\n const path = svg`\n \n \n `;\n \n const chart = svg`\n\n `;\n \n for(let i = 0, n = 300; i < n; ++i) {\n const t = (i+1)/n;\n path.setAttribute(\"stroke-dasharray\", `${t*lineLength},${lineLength}`);\n yield chart;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0,0, width, height]);\n const zx = shape_x.copy();\n const line = d3.line()\n .x(d => zx(d.date))\n .y(d => shape_y(d.close));\n const path = svg.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(shape_data));\n const gx = svg.append(\"g\")\n .call(shape_xAxis, zx);\n const gy = svg.append(\"g\")\n .call(shape_yAxis, shape_y);\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(shape_xAxis, zx);\n path.transition(t).attr(\"d\", line(shape_data))\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"chart4.update(timeframe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`## 连接点`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`这里API是join，用于链接每一次状态更新新状态的进入(enter)很旧状态的退出(exit)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"chart5 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0,0,width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .attr(\"display\", \"block\");\n \n svg.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"randomLetters = {\n while (true) {\n yield d3.shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"chart6 = {\n const svg = d3.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 const t = svg.transition().duration(750);\n\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.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 => exit\n .call(text => text.transition(t).remove()\n .attr(\"y\", 41))\n )\n .call(text => text.transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"chart6.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## 交互`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"voronoi = d3.Delaunay\n .from(shape_data, d => shape_x(d.date), d => shape_y(d.close))\n .voronoi([0,0,width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"{\n const tooltip = new Tooltip()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"