2b:null 2c:["$","title",null,{"children":"HW4 Strong | 北科大-王俞喬's Workspace | Observable"}] 31:Tbb9,createSVG = { // 定義邊界大小，以及圖形的寬度和高度 const margin = { top: 20, right: 30, bottom: 30, left: 40 }; const width = 500 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; // X 軸的比例尺 const xScale = d3 .scaleLinear() .domain([0, d3.max(finalData, (d) => +d.x) ]) // 根據 x 的值設定範圍 .range([0, width]); // Y 軸的比例尺 const yScale = d3 .scaleLinear() .domain([0, d3.max(finalData, (d) => +d.y) ]) // 根據 y 的值設定範圍 .range([height, 0]); // 創建 SVG 元素 const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 20); // 在 SVG 中添加一個包含所有內容的 g 元素 const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // 定義半徑的比例尺 const radiusScale = d3 .scaleLinear() .domain([1, 10, 20, 30, 40, 50, 51]) // 根據 count 的區間設定 .range([2, 4, 6, 8, 10, 12, 14]); // 對應的半徑值 // 繪製點 g.selectAll("circle") .data(finalData) .enter() .append("circle") .attr("cx", (d) => xScale(+d.x)) .attr("cy", (d) => yScale(+d.y)) .attr("r", (d) => radiusScale(d.count)) .attr("fill", "#E98B2A") .on("mouseover", (event, d) => { // 添加滑鼠移入事件 const tooltip = d3.select("#tooltip") .style("display", "block") .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 25) + "px"); tooltip.html(`X: ${d.x}
Y: ${d.y}
Count: ${d.count}`); // 在 tooltip 中顯示更多資訊 }) .on("mouseout", () => { // 添加滑鼠移出事件 d3.select("#tooltip").style("display", "none"); }) .append("title") .text((d) => `Count: ${d.count}`); // 創建 tooltip 元素 const tooltipDiv = d3.select("body") .append("div") .attr("id", "tooltip") .style("display", "none") .style("position", "absolute") .style("background-color", "white") .style("padding", "5px") .style("border", "1px solid #ddd") .style("border-radius", "3px") .style("pointer-events", "none"); // 避免 tooltip 影響滑鼠事件 // X 軸 g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale).ticks(5)); // 設定刻度數量 // X 軸標籤 g.append("text") .attr("transform", `translate(${width / 2}, ${height + margin.top + 20})`) .style("text-anchor", "middle") .text("從1到5級距，您認為藝術產業的碳排放量在那個相對位置？"); // Y 軸 g.append("g").call(d3.axisLeft(yScale).ticks(5)); // 設定刻度數量 // Y 軸標籤 g.append("text") .attr("transform", "rotate(-90)") .attr("y", -margin.left) .attr("x", -height / 2) .attr("dy", "1em") .style("text-anchor", "middle") .text("您認為藝術跟台灣 2050 淨零排放政策的相關度為何？"); // 顯示 SVG return svg.node(); }32:[{"id":"50c5f49fe0be94803e1d055aaca895517461971b40fc91cc553044dee88321c73843858f823684904e961847c7cc5d3bb60f8ecd7cdfde293dd65a61d08e1e2d","href":"https://static.observableusercontent.com/files/50c5f49fe0be94803e1d055aaca895517461971b40fc91cc553044dee88321c73843858f823684904e961847c7cc5d3bb60f8ecd7cdfde293dd65a61d08e1e2d","name":"artist-1.csv","type":"text/csv","lastModified":1704443295568.381,"size":66430}] 2f:{"id":"5188d917ad920963","slug":null,"title":"HW4 Strong","thumbnail":"edd0c03ad416a11537f586a13b0080c033ad7a620c6a4507fceb3595a23f8607","access_level":"public","create_time":"$D2024-01-05T08:28:15.568Z","update_time":"$D2024-01-05T11:00:08.079Z","view_time":null,"first_public_time":"$D2024-01-05T08:28:15.568Z","has_unpublished_edits":null,"fork":{"id":"1b483f4324025981","slug":null,"title":"HW4 Sunburst","owner":{"id":"84a6ed85bb55ec94","login":"bei-ke-da-wang-yu-qiao-ws","name":"北科大-王俞喬's Workspace"}},"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","bio":""},"version":130,"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,"bio":""}],"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HW4 Strong","cells":[{"id":0,"value":"# HW4 Strong","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"artist = FileAttachment(\"artist-1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"ARTIST = artist","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ARTIST","database":"$undefined"},{"id":17,"value":"C1key = Object.keys(artist[0])[3];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"C2key = Object.keys(artist[0])[10];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"C1 = artist.map(row => row[C1key]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"C2 = artist.map(row => row[C2key]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"scatterplotData = C1.map((value, index) => {\n return { x: value, y: C2[index] };\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"scatterplotData_counts = scatterplotData.reduce((counts, point) => {\n const key = `${point.x}-${point.y}`;\n counts[key] = (counts[key] || 0) + 1;\n return counts;\n}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"finalData = Object.keys(scatterplotData_counts).map((key) => {\n const [x, y] = key.split('-');\n return { x, y, count: scatterplotData_counts[key] };\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"

結論

從上圖中，我們可以看出：\n
\n
大多數人都覺得藝術產業跟政策並沒有太大的關聯性
\n
大多數人都認為藝術產業排放量高且跟政策無關，覺得跟政策相關的人也認為排放量低，我覺得了解政策的人也相對了解真正的碳排放量。
\n
\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"