3e:null 3f:["$","title",null,{"children":"D3 playGround | othsueh's Workspace | Observable"}] 45:T8ad,canva4 = { const width = 600; const height = 400; const margin = 60; const svg = SimpleSvg({ width: 200, height: 100 }); const mmseExtent = d3.extent(patientGroup.map(d=>(d.mmse))); const HbA1CExtent = d3.extent(patientGroup.map(d=>(d.avgHbA1C))); const patientExtent = d3.extent(patientGroup.map(d=>(d.patients))); const x = d3.scaleSequential().domain([0,100]).range([0,width]); const y = d3.scaleSequential().domain(mmseExtent).range([height,0]); const radius = d3.scaleSequential().domain(patientExtent).range([2,10]); const color = d3.scaleQuantile(HbA1CExtent,d3.schemeSpectral[8].reverse()); const xaxis = d3.axisBottom(x); const yaxis = d3.axisLeft(y); const legend = d.legendColor() .scale(color) .shapePadding(20) .labelOffset(40) svg .append("g") .attr("transform",`translate(${margin},${height+margin})`) .call(xaxis) svg.append("text") .attr("transform", `translate(${margin+width/2},${height+2*margin})`) .style("text-anchor", "middle") .attr("fill", "black") .style("font-size","15px") .text("AGE"); svg .append("g") .attr("transform",`translate(${margin},${margin})`) .call(yaxis) svg.append("text") .attr("transform", `translate(${margin/2},${margin+height/2})rotate(-90)`) .attr("fill", "black") .style("text-anchor", "middle") .style("font-size","15px") .text("MMSE"); svg.append("text") .attr("transform", `translate(${margin+width/2},${margin/2})`) .attr("fill", "black") .attr("font-size","20px") .attr("text-anchor","middle") .text("Age-MMSE-HbA1C (Size: patient count)"); svg .append("g") .attr("transform", `translate(${width+2*margin},${margin+height/2})`) .call(legend) svg .append("text") .attr("transform", `translate(${width+2*margin},${margin/2+height/2})`) .style("font-size","15px") .text("Hb-A1C") svg .append("g") .attr("transform",`translate(${margin},${margin})`) .selectAll("circle") .data(patientGroup) .join("circle") .attr("cx",e=>x(e.age)) .attr("cy",e=>y(e.mmse)) .attr("r",e=>radius(e.patients)) .attr("fill",e=>color(e.avgHbA1C)) return svg.node(); }46:[{"id":"ad2fe0db15af84db0c2f3ef5e14ae15b987d9f1fea0fa7824b205c12d7be881471a9596a15a6c7cd11067155479852ba297cffbdbe42984f39b12c1f7e18cb9b","href":"https://static.observableusercontent.com/files/ad2fe0db15af84db0c2f3ef5e14ae15b987d9f1fea0fa7824b205c12d7be881471a9596a15a6c7cd11067155479852ba297cffbdbe42984f39b12c1f7e18cb9b","name":"data_loc.csv","type":"text/csv","lastModified":1700725663156.055,"size":53687},{"id":"968fdb84935bf0e734afb8c5258682fa4d7488bc74aae9ce512827f18b4fc354d1b2b1f2f46a63bd4daa576fe4cc46d171601c38b7b753fd00a8e0e0d34eaf0a","href":"https://static.observableusercontent.com/files/968fdb84935bf0e734afb8c5258682fa4d7488bc74aae9ce512827f18b4fc354d1b2b1f2f46a63bd4daa576fe4cc46d171601c38b7b753fd00a8e0e0d34eaf0a","name":"taiwan.json","type":"application/json","lastModified":1700725665880.428,"size":9242449}] 43:{"id":"97376f41d8924520","slug":null,"title":"D3 playGround","thumbnail":"fefe3a911622131a9896c1d21455720cf8becdcbb17a5669675d3695b7aff2c1","access_level":"public","create_time":"$D2023-11-20T01:36:17.359Z","update_time":"$D2023-12-14T08:00:04.054Z","view_time":null,"first_public_time":"$D2023-11-20T01:36:17.359Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3d4c9a6e07767495","login":"othsueh-ws","name":"othsueh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a08e3f15759b90a5d6e884b6a3c12940fd01e07ae774a824117ab30e7dbfde0b","tier":"starter_2024","bio":"","following":false},"version":712,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"da28203bf4a33713","login":"othsueh","name":"othsueh","avatar_url":"https://avatars-next.observableusercontent.com/783ba76c54657d8a80c42763eea2506840e79eaef5d084f4b34e401cd0521fd8","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"da28203bf4a33713","login":"othsueh","name":"othsueh","avatar_url":"https://avatars-next.observableusercontent.com/783ba76c54657d8a80c42763eea2506840e79eaef5d084f4b34e401cd0521fd8","tier":null,"role":"editor"},{"type":"team","id":"3d4c9a6e07767495","login":"othsueh-ws","name":"othsueh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a08e3f15759b90a5d6e884b6a3c12940fd01e07ae774a824117ab30e7dbfde0b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 playGround","cells":[{"id":0,"value":"# D3 playGround\n一個拿來練習跟整理 d3 筆記的地方","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":628,"value":"## D3 基礎 SVG 與 Data Binding\n### 基礎 SVG\nsvg 是創建所有圖形的基礎，在初始化時跟其他元件一樣，都必須要給預設值(width,height,~~fill~~) \n除了以上設定外，還要記得設定 `viewbox([中心x,中心y,寬,高])` 讓你不用再用 `` tag 把視窗範圍畫成一個群組，方便許多。 \n\n\n### 基礎圖形\n- ``: 並不是圖形，而是群組(group)，用來包住範圍內的圖形\n- ``: 線，通常用來繪製 line chart\n- ``: 圓，通常用來繪製 scatter chart\n- ``: 矩形，通常用來繪製 bar chart, stack chart\n- ``: 路徑，是除了以上提到圖形之外最常被使用的，可以用來做很多事情，像是畫地圖、pie chart 等等\n\n### select\n`d3.select` 傳回特定元件的選擇集，讓你對選擇集裡做資料操作，有點類似 `querySelector`\n### 設定屬性\n在選定元素後，我們通常會使用 `attr()` 來給予那個元素本身具有的屬性值。 \n然後可再選用 `style()` 來給予更多 CSS 屬性 \n\n#### 一次設定多個屬性\n`.call(function)` 對要進行操作的 DOM 對象進行函式操作，讓 code 可以不用複製貼上來重複使用。較詳細的範例 [ref1][2]。\n### Data Binding\n原始的 Data Bindging 由 (待補) 組成。但現在新版本有更好的方法 `join()` \n使用`data(d)`加`join(\"graph\")`可以直接綁定資料創造圖形，用起來跟魔法沒什麼兩樣，勘稱 d3 最大黑盒子 [ref2][1]。不過前面記得要加 `select(\"element\")`.\n\n---\n[1]: https://observablehq.com/d/97376f41d8924520#cell-109\n[2]: http://using-d3js.com/01_05_selection_call.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"## 圖表基礎\n### Scale\n在 d3 裡要轉換原始資料成圖表上的顯示資料，就要靠 **Scale**。 \nScale 的目的就是將定義域(原始資料的值)轉成對應域(圖表上的值)，針對不同的資料類型，就會有 [不同的 scale][1]。\n#### Color Scale\n要在 d3 中製作 colorScale, 要先定義他，由於同樣是 scale, 所以建置方式同樣是用 scale function, 只是將值域換成了 color 而已。最後只要在 fill 這個 attribute 中使用他就好。\n> [!TIP] \n> interpolate 是一組函式，用於在兩個給定的值之間創建平滑的過渡，使得可以平滑地從一個值變化到另一個值。常用於 color scale。\n\n### Axis\naxis 的組成是由一個 `` 與好幾個 `` 所組成，第一個代表的是主要軸線，第二個則代表每個 tick (`+`) \n想要招喚 axis 非常簡單，不需要另外設 range 有多少, 交給我們前面講的 scale 做就好。我們唯一要做的兩件事就是將 scale 丟入 [axis][2] 中，然後再創一個 `` 來使用`.call()` 把 axis 放進裡面。另外 axis 裡面也有其他方法，可以參考 [ref3][2]。\n### Legend\n在 d3 中並沒有原生支持 legend, 所以有兩種方式產生 legend。一種是直接使用 [Mike Bostock 寫好的][3], 但只支援橫式格式。或者是使用 [這份文章作者][4] 提到的，就可以產生直式的 legend。\n\n---\n\n[1]: http://using-d3js.com/04_01_scaling_functions.html\n[2]: http://using-d3js.com/04_03_axis.html\n[3]: https://observablehq.com/@d3/color-legend\n[4]: http://using-d3js.com/04_08_legends.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"## 各種常見圖表\n### 圓餅圖\n要產生圓餅圖，就需要兩個函式 `arc()` 以及 `pie()` \n`arc()` 跟 `pie()` 是攣生兄弟，一個負責產生弧形(整個圓)，另外一個負責切(各個區塊的起始角度、終點角度)缺一不可，有更多 [玩法][1]。\n#### 產生資料\n因為前面 `pie()` 已經將資料化成角度了，所以丟給 path 的是用 `.pie()` 產生的物件陣列，不是資料本身。\n### 地圖\n要產生地圖，首先需要選定 [投影法][2],在描繪台灣平面地圖時，都是都是使圓柱投影法，像是以下兩種：\n- `geoEquirectangular()`\n- `geoMercator()`\n\n然後為了要顯示台灣，必須設定中心以及放大效果\n```js\nprojection = d3.geoEquirectangular().center([121.07, 23.9]).scale(8500)\n```\n#### 產生資料\n使用 `.geoPath().projection(projection)` 來生成地圖的路徑(給 `` 用)\n\n#### 套用\n使用 `.append(\"path\")`, 然後將 `geojson` 資料放進 `.datum(geojson)`。最後再加入我們前面產生的路徑 `.attr(\"d\",path)` 就完成了。\n\n---\n[1]: http://using-d3js.com/05_07_arcs_pie_charts.html\n[2]: https://d3js.org/d3-geo/projectionhttps://d3js.org/d3-geo/projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"## Man of my function\n### SimpleSvg\n#### 目的\n簡化一開始宣告 `svg` 物件的流程，只需要輸入寬度以及高度還有 id(選用), 就能直接產生 `svg` 物件，且含有設定好的 `viewbox`(中心為(0,0),長寬都一樣)。 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"## Append & Insert canva","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"canva = {\n const svg = SimpleSvg({id: \"addElement\"})\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"AppendRect(\"addElement\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"InsertRect(\"addElement\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function AppendRect(element,{\n width = 20,\n height = 10,\n color = \"pink\"\n}={}){\n d3.select(`#${element}`)\n .append(\"rect\")\n .attr(\"x\", (d,i,nodes) => {\n return +nodes[i].previousElementSibling.getAttribute(\"x\") + 75;\n })\n .attr(\"y\",50)\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"fill\",color)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function InsertRect(element,{\n width = 20,\n height = 10,\n color = \"blue\"\n}={}){\n d3.select(`#${element}`)\n .insert(\"rect\",\":first-child\")\n .attr(\"y\",50)\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"fill\",color)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"## Add country","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"taiwan = FileAttachment(\"taiwan.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"projection = d3.geoEquirectangular().center([121.07, 23.9]).scale(8500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"canva2 = {\n const svg = SimpleSvg({\n width: 200,\n height: 130\n });\n svg\n .append(\"path\")\n .datum(taiwan)\n .attr(\"fill\", \"#ed87c8\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n svg\n .append(\"path\")\n .datum(taiwan)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ff0\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"locations = [\n { name: 'ILA', id: 1 },\n { name: 'HSQ', id: 2 },\n { name: 'MIA', id: 3 },\n { name: 'CHA', id: 4 },\n { name: 'NAN', id: 5 },\n { name: 'YUN', id: 6 },\n { name: 'CYQ', id: 7 },\n { name: 'PIF', id: 8 },\n { name: 'TTT', id: 9 },\n { name: 'HUA', id: 10 },\n { name: 'KEE', id: 11 },\n { name: 'HSZ', id: 12 },\n { name: 'CYI', id: 13 },\n { name: 'TPE', id: 14 },\n { name: 'KHH', id: 15 },\n { name: 'TPQ', id: 16 },\n { name: 'TXG', id: 17 },\n { name: 'TNN', id: 18 },\n { name: 'TAO', id: 19 } // Corrected the quotation mark at the end\n];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"locationCounts = {\n const lc = locations.map(d => ({ location: d.name, counts: 0 }));\n const location = data.map(d=>(locations.find(e => e.id === d.location).name))\n location.forEach(name=>{\n const locateunit = lc.find(d=>(d.location === name));\n locateunit.counts++;\n })\n return lc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"canva3 = {\n const svg = SimpleSvg({\n width: 200,\n height: 200\n });\n const extent = d3.extent(locationCounts.map(d=>d.counts))\n const legend = Legend(d3.scaleSequential(extent, d3.interpolateViridis), {\n title: \"Population\"\n })\n const color = d3.scaleSequential(extent, d3.interpolateViridis);\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(taiwan.features)\n .join(\"path\")\n .attr(\"fill\", d => {\n const locationData = locationCounts.find(e => e.location === d.properties.ISO3166);\n return locationData ? color(locationData.counts) : \"none\";\n}).attr(\"d\", path);\n svg\n .append(\"path\")\n .datum(taiwan)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#a9def9\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n \n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(500,600)\")\n .append(()=>legend)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"patientGroup = {\n let groupData = {};\n\ndata.forEach(item => {\n let key = `${item.Age}-${item.MMSE}`;\n if (!groupData[key]) {\n groupData[key] = { age: item.Age, mmse: item.MMSE, patients: 0, totalHbA1C: 0 };\n }\n groupData[key].patients++;\n groupData[key].totalHbA1C += item['Hb-A1C'];\n});\n\nlet result = Object.values(groupData).map(item => ({\n age: item.age,\n mmse: item.mmse,\n patients: item.patients,\n avgHbA1C: item.totalHbA1C / item.patients\n}));\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"## ref[1]\n在您提供的D3.js代碼片段中，雖然起初的SVG元素 `` 中確實沒有任何 `` 元素，但之後的D3代碼創建了這些元素。這是由D3的數據綁定和元素生成機制所致。以下是代碼的工作原理：\n\n1. **選擇SVG元素**：\n - `d3.select('#dataSVG')` 選擇了具有ID `dataSVG` 的SVG元素。\n\n2. **選擇所有``元素**：\n - `.selectAll('g')` 這個調用會選擇SVG內的所有``元素。由於SVG一開始沒有任何``元素，所以這會選擇一個空的選擇集。\n\n3. **綁定數據**：\n - `.data(arr2)` 這一部分將一個數據數組 `arr2` 綁定到之前選擇的元素（此時為空選擇集）。\n\n4. **加入``元素**：\n - `.join('g')` 是D3.js中的一個強大功能，它基於綁定到選擇集的數據來創建、更新或刪除元素。在這種情況下，由於一開始沒有任何``元素，`join('g')`會為`arr2`數組中的每個元素創建一個新的``元素。\n\n結果是，對於`arr2`數組中的每個數據項，都會在SVG內創建一個對應的``元素。這就是為什麼即使原始的SVG元素中沒有``元素，之後也會有的原因。這種數據驅動的方法是D3.js處理文檔元素的核心特性之一，允許動態地基於數據來創建和操作DOM元素。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"data = FileAttachment(\"data_loc.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"import { Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"d = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function SimpleSvg({\n width = 200,\n height = 40,\n id,\n}={}){\n const svg = d3.create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"id\",id)\n .attr(\"viewbox\",[-width/2,-height/2,width,height])\n .attr(\"style\", \"width: 100%; height: auto;font: 10px sans-serif;\");\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"