25:["$","title",null,{"children":"HW04 Sunburst | 吳泳霈's Workspace | Observable"}] 49:T5c4,breadcrumb = { const svg = d3 .create("svg") .attr("viewBox", `0 0 ${breadcrumbWidth * 10} ${breadcrumbHeight}`) .style("font", "12px sans-serif") .style("margin", "5px"); const g = svg .selectAll("g") .data(sunburst.sequence) .join("g") .attr("transform", (d, i) => `translate(${i * breadcrumbWidth}, 0)`); g.append("polygon") .attr("points", breadcrumbPoints) .attr("fill", d => color(d.data.name)) .attr("stroke", "white"); g.append("text") .attr("x", (breadcrumbWidth + 10) / 2) .attr("y", 15) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", "white") .text(d => { if(d.data.name === "減少包裝材及文宣印製") { return "減少包裝"; } else if(d.data.name === "使用無毒媒材、再生材料、廢物利用素材等") { return "使用再生材料"; } else if(d.data.name === "工作場所、活動展場的節約能源") { return "節約能源"; } else if(d.data.name.length > 6) { return "其他答案"; } return d.data.name; }); svg .append("text") .text(sunburst.percentage > 0 ? sunburst.percentage + "%" : "") .attr("x", (sunburst.sequence.length + 0.5) * breadcrumbWidth) .attr("y", breadcrumbHeight / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle"); return svg.node(); }4a:T8985,viewof sunburst = { const root = partition(data); const svg = d3.create("svg"); // Make this into a view, so that the currently hovered sequence is available to the breadcrumb const element = svg.node(); element.value = { sequence: [], percentage: 0.0 }; // 使用foreignObject插入HTML const fo = svg .append("foreignObject") .attr("x", `${radius+50}px`) .attr("y", -10) .attr("width", radius*2) .attr("height", 350); const div = fo .append("xhtml:div") .style("color","#555") .style("font-size", "25px") .style("font-family", "Arial"); d3.selectAll("div.tooltip").remove(); // clear tooltips from before const tooltip = d3 .select("body") .append("div") .attr("class", `tooltip`) .style("position", "absolute") .style("opacity", 0) const label = svg .append("text") .attr("text-anchor", "middle"); //.style("visibility", "hidden"); label//內圈問題 .append("tspan") .attr("class", "question1") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-6em") .attr("font-size", "2.5em") .attr("fill", "#BBB") .text(innerCircleQuestion); label//外圈問題 .append("tspan") .attr("class", "question2") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-4em") .attr("font-size", "2.5em") .attr("fill", "#BBB") .text(outerCircleQuestion); label//答案 .append("tspan") .attr("class", "sequence") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-1em") .attr("font-size", "2.5em") .text(""); label//占比%數 .append("tspan") .attr("class", "percentage") .attr("x", 0) .attr("y", 0) .attr("dx", 0) .attr("dy", "0em") .attr("font-size", "5em") .attr("fill", "#555") .text(""); label//數量 .append("tspan") .attr("class", "dataValue") .attr("x", 0) .attr("y", 0) .attr("dx", 0) .attr("dy", "2em") .attr("font-size", "2em") .attr("fill", "#555") .text(""); svg .attr("viewBox", `${-radius} ${-radius} ${width*2.2} ${width}`) .style("max-width", `${width*2}px`) .style("font", "12px sans-serif"); const path = svg .append("g") .selectAll("path") .data( root.descendants().filter(d => { // Don't draw the root node, and for efficiency, filter out nodes that would be too small to see return d.depth && d.x1 - d.x0 > 0.001; }) ) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc); svg .append("g") .attr("fill", "none") .attr("pointer-events", "all") .on("mouseleave", () => { path.attr("fill-opacity", 1); //tooltip.text(""); //label.style("visibility", null); // Update the value of this view element.value = { sequence: [], percentage: 0.0 }; element.dispatchEvent(new CustomEvent("input")); }) .selectAll("path") .data( root.descendants().filter(d => { // Don't draw the root node, and for efficiency, filter out nodes that would be too small to see return d.depth && d.x1 - d.x0 > 0.001; }) ) .join("path") .attr("d", mousearc) .on("mouseover", (_evt, d) => { if(d.data.name === "減少包裝材及文宣印製") { tooltip .style("opacity", 1) .html(`減少包裝
`) .style("border-color", color(d.data.name)); } else if(d.data.name === "使用無毒媒材、再生材料、廢物利用素材等") { tooltip .style("opacity", 1) .html(`再生材料
`) .style("border-color", color(d.data.name)); } else if(d.data.name === "工作場所、活動展場的節約能源") { tooltip .style("opacity", 1) .html(`節約能源
`) .style("border-color", color(d.data.name)); } else { tooltip .style("opacity", 1) .html(`${d.data.name}`) .style("border-color", color(d.data.name)); } }) .on("mousemove", (evt, d) => { tooltip .style("top", evt.pageY - 10 + "px") .style("left", evt.pageX + 10 + "px"); }) .on("mouseout", () => { tooltip.style("opacity", 0); }) .on("mouseenter", (event, d) => { // Get the ancestors of the current segment, minus the root //introduce if(d.data.name === "工作室") { div .html("

定義：藝術家創作藝術品的私人空間。它可以是一個房間、一棟建築或任何專為藝術製作而設的場所。
功能：用於藝術家進行創作，例如繪畫、雕塑或任何其他形式的藝術。
特色：它是一個私密的空間，藝術家可以在這裡自由地實驗、嘗試並發展他們的技巧和創意。

"); } else if(d.data.name === "替代空間") { div .html("

定義：非傳統和非商業的展示空間。可以是臨時或長期的存在，但不同於傳統的美術館和畫廊。
功能：提供一個展示非主流、實驗性或邊緣藝術的場所。這些空間通常更加開放、靈活，能夠接受更多風格和形式的藝術品。
特色：是藝術家、策展人或社群自組、自發的，對於藝術家來說，這樣的空間提供了更多的自由和可能性。

"); } else if(d.data.name === "美術館") { div .html("

定義：為了展示、保護和研究藝術品而設立的公共或私人機構。
功能：除了展示藝術品，美術館也負責藝術品的保護、修復、研究和教育等功能。
特色：通常有較為正式和嚴謹的運作模式。它們可能有長期或特定主題的展覽，且會對藝術品有一定的選擇和評價標準。

"); } else { div.html(""); } //dataValue label .style("visibility", null) .select(".dataValue") .text("計數："+d.value); //question if(d.depth-1 === 0) { label .style("visibility", null) .select(".question1") .attr("fill", "#000"); label .style("visibility", null) .select(".question2") .attr("fill", "#BBB"); } else if(d.depth-1 === 1) { label .style("visibility", null) .select(".question1") .attr("fill", "#BBB"); label .style("visibility", null) .select(".question2") .attr("fill", "#000"); } const sequence = d .ancestors() .reverse() .slice(1); // Highlight the ancestors path.attr("fill-opacity", node => sequence.indexOf(node) >= 0 ? 1.0 : 0.3 ); label .style("visibility", null) .select(".sequence") //.style("visibility", "visible") .attr("fill", sequence => color(d.data.name)) .text(d.data.name); const percentage = ((100 * d.value) / root.value).toPrecision(3); label .style("visibility", null) .select(".percentage") .text(percentage + "%"); /*tooltip .text(d.data.name);*/ // Update the value of this view with the currently hovered sequence and percentage element.value = { sequence, percentage }; element.dispatchEvent(new CustomEvent("input")); }); return element; }4b:T541,function buildHierarchy(csv) { // Helper function that transforms the given CSV into a hierarchical format. const root = { name: "root", children: [] }; for (let i = 0; i < csv.length; i++) { const sequence = csv[i][0]; const size = +csv[i][1]; if (isNaN(size)) { // e.g. if this is a header row continue; } const parts = sequence.split("-"); let currentNode = root; for (let j = 0; j < parts.length; j++) { const children = currentNode["children"]; const nodeName = parts[j]; let childNode = null; if (j + 1 < parts.length) { // Not yet at the end of the sequence; move down the tree. let foundChild = false; for (let k = 0; k < children.length; k++) { if (children[k]["name"] == nodeName) { childNode = children[k]; foundChild = true; break; } } // If we don't already have a child node for this branch, create it. if (!foundChild) { childNode = { name: nodeName, children: [] }; children.push(childNode); } currentNode = childNode; } else { // Reached the end of the sequence; create a leaf node. childNode = { name: nodeName, value: size }; children.push(childNode); } } } return root; }4c:[{"id":"2dd4c491cf7e957248d1caf65a08e2bc0868d56f3569b8b379a7b67489d9faff9a54a4d2a5c4ab4642b340abb13e9abb5ca6d35acbdfcfedf3055009fdd893fc","href":"https://static.observableusercontent.com/files/2dd4c491cf7e957248d1caf65a08e2bc0868d56f3569b8b379a7b67489d9faff9a54a4d2a5c4ab4642b340abb13e9abb5ca6d35acbdfcfedf3055009fdd893fc","name":"artist.csv","type":"text/csv","lastModified":1700206039961.653,"size":66179}] 29:{"id":"a0d284f041f1d54c","slug":null,"title":"HW04 Sunburst","thumbnail":"fae8769e2782bd4360fa6f337a888d1763225ae0d2971f1b4653ca470ce84af5","access_level":"public","create_time":"$D2023-11-17T07:24:44.674Z","update_time":"$D2023-11-22T14:37:50.074Z","view_time":null,"first_public_time":"$D2023-11-17T07:24:44.674Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","tier":"starter_2024","bio":"Hi","followed_by_you":false,"follows_you":false},"version":103,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"role":"editor"},{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","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":"HW04 Sunburst","cells":[{"id":0,"value":"# HW04 Sunburst","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Simple baseline (3pt)\n- 完成旭日圖 (2pt)\n- 完成頁面路徑 (1pt)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Medium baseline (4pt)\n- 加入Tooltip (2pt)\n- 完成結論 (2pt)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"### 結論：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"1. 從Sunburst中，我們可以看出有38.8%來自工作室的人員填寫表單，且其中12.1%使用減少包裝材及文宣印製來減少碳排放。\n2. 其中令我感到意外的是，有7.99%來自美術館，其中有1.75%是使用工作場所、活動展場的節約能源來減少碳排放，畢竟美術館十分需要冷氣及燈光的使用，但能做到節約能源也是滿厲害的！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"### Requirements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"artist = FileAttachment(\"artist.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"innerCircleQuestion = Object.keys(artist[0])[1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"outerCircleQuestion = Object.keys(artist[0])[16];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"data = {\n // 提取內外圈問題的答案\n var innerCircleAnswer = artist.map(row => row[innerCircleQuestion]);\n var outerCircleAnswer = artist.map(row => row[outerCircleQuestion]);\n\n // 將內外圈答案結合，形成新的答案陣列\n var combinedAnswers = innerCircleAnswer.map((innerAns, index) => innerAns + '-' + outerCircleAnswer[index]);\n\n // 重新格式化答案，將其轉換為符合特定模式的陣列\n var reformattedAnswers = combinedAnswers.map(item => {\n const [prefix, values] = item.split('-');\n const splitValues = values.split(';').map(value => value.trim());\n return splitValues.map(value => `${prefix}-${value}`);\n }).reduce((acc, curr) => acc.concat(curr), []);\n\n // 計算每個重新格式化答案的出現次數\n var answerCounts = {};\n reformattedAnswers.forEach(reformattedAns => {\n answerCounts[reformattedAns] = (answerCounts[reformattedAns] || 0) + 1;\n });\n\n // 轉換為CSV格式的數據\n var csvData = Object.entries(answerCounts).map(([answer, count]) => [answer, String(count)]);\n \n // 建立包含層次結構的數據\n return buildHierarchy(csvData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"partition = data =>\n d3.partition().size([2 * Math.PI, radius * radius])(\n d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"mousearc = d3\n .arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .innerRadius(d => Math.sqrt(d.y0))\n .outerRadius(radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"color = d3\n .scaleOrdinal()\n .domain([\"工作室\", \"替代空間\", \"美術館\", \"減少包裝材及文宣印製\", \"使用無毒媒材、再生材料、廢物利用素材等\", \"工作場所、活動展場的節約能源\"])\n //.range(d3.schemePaired)\n .range([\"#8080C0\",\"#6A6AFF\",\"#930093\",\"#97CBFF\",\"#66B3FF\",\"#A6A6D2\"])\n .unknown(\"#BEBEBE\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"arc = d3\n .arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .padAngle(1 / radius)\n .padRadius(radius)\n .innerRadius(d => Math.sqrt(d.y0))\n .outerRadius(d => Math.sqrt(d.y1) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"breadcrumbWidth = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"breadcrumbHeight = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Generate a string that describes the points of a breadcrumb SVG polygon.\nfunction breadcrumbPoints(d, i) {\n const tipWidth = 10;\n const points = [];\n points.push(\"0,0\");\n points.push(`${breadcrumbWidth},0`);\n points.push(`${breadcrumbWidth + tipWidth},${breadcrumbHeight / 2}`);\n points.push(`${breadcrumbWidth},${breadcrumbHeight}`);\n points.push(`0,${breadcrumbHeight}`);\n if (i > 0) {\n // Leftmost breadcrumb; don't include 6th vertex.\n points.push(`${tipWidth},${breadcrumbHeight / 2}`);\n }\n return points.join(\" \");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null