29:null 2a:["$","title",null,{"children":"HW4 Sunburst | 北科大-王俞喬's Workspace | Observable"}] 2f: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(); }30:T42ba,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; }31: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; }32:[{"id":"50c5f49fe0be94803e1d055aaca895517461971b40fc91cc553044dee88321c73843858f823684904e961847c7cc5d3bb60f8ecd7cdfde293dd65a61d08e1e2d","href":"https://static.observableusercontent.com/files/50c5f49fe0be94803e1d055aaca895517461971b40fc91cc553044dee88321c73843858f823684904e961847c7cc5d3bb60f8ecd7cdfde293dd65a61d08e1e2d","name":"artist-1.csv","type":"text/csv","lastModified":1700841837240.351,"size":66430}] 2d:{"id":"1b483f4324025981","slug":null,"title":"HW4 Sunburst","thumbnail":"6671eefeb2ca34831224474b1b645b3af6809f34d690ed458a276aa30dfda81a","access_level":"public","create_time":"$D2023-11-24T16:02:01.049Z","update_time":"$D2023-11-24T16:19:32.848Z","view_time":null,"first_public_time":"$D2023-11-24T16:02:01.049Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84a6ed85bb55ec94","login":"bei-ke-da-wang-yu-qiao-ws","name":"北科大-王俞喬's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/48937f761e943375643af80d5d3d4db4b48d6331494b6319ba0671f939cfca7e","tier":"starter_2024"},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f49df9cf6bffaf0","login":"bei-ke-da-wang-yu-qiao","name":"北科大-王俞喬","avatar_url":"https://avatars-next.observableusercontent.com/b6b792389e3fa44eabbb1a1902b48c68ee8f8cd0c5fabaa3d0edf9d26329faf0","tier":null}],"members":[{"type":"individual","id":"3f49df9cf6bffaf0","login":"bei-ke-da-wang-yu-qiao","name":"北科大-王俞喬","avatar_url":"https://avatars-next.observableusercontent.com/b6b792389e3fa44eabbb1a1902b48c68ee8f8cd0c5fabaa3d0edf9d26329faf0","tier":null,"role":"editor"},{"type":"team","id":"84a6ed85bb55ec94","login":"bei-ke-da-wang-yu-qiao-ws","name":"北科大-王俞喬's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/48937f761e943375643af80d5d3d4db4b48d6331494b6319ba0671f939cfca7e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"HW4 Sunburst","cells":[{"id":0,"value":"# HW4 Sunburst","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"artist = FileAttachment(\"artist-1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"innerCircleQuestion = Object.keys(artist[0])[1];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"outerCircleQuestion = Object.keys(artist[0])[16];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"

結論

從上圖中，我們可以看出：\n
\n
工作室能減少碳排放量的方式比較少
\n
教育相關機構會較積極的推廣減碳
\n
節約能源看來是大家共有的減碳方法
\n
\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"radius = 320","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = d3\n .scaleOrdinal()\n .domain([\"工作室\", \"替代空間\", \"美術館\", \"減少包裝材及文宣印製\", \"使用無毒媒材、再生材料、廢物利用素材等\", \"工作場所、活動展場的節約能源\"])\n //.range(d3.schemePaired)\n .range([\"#8E354A\",\"#E16B8C\",\"#DC9FB4\",\"#0D5661\",\"#33A6B8\",\"#81C7D4\"])\n .unknown(\"#BEBEBE\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"breadcrumbWidth = 75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"breadcrumbHeight = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

結論

從上圖中，我們可以看出：\n \n 工作室能減少碳排放量的方式比較少\n 教育相關機構會較積極的推廣減碳\n 節約能源看來是大家共有的減碳方法\n \n

從上圖中，我們可以看出：\n
\n
工作室能減少碳排放量的方式比較少
\n
教育相關機構會較積極的推廣減碳
\n
節約能源看來是大家共有的減碳方法
\n
\n