2b:null 2c:["$","title",null,{"children":"Antarctic Map - % | Wzy6636's Workspace | Observable"}] 31:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1736241078447.277,"size":756420},{"id":"16ba4d0fbbaee4b57958349b93a0eb3f28b39dd9e5e63462beb03cb72cf3fc14ba01915bba63fb7877cd6f43cd3d0fcf1707c90e16b4be5ac85329d2e21379cf","href":"https://static.observableusercontent.com/files/16ba4d0fbbaee4b57958349b93a0eb3f28b39dd9e5e63462beb03cb72cf3fc14ba01915bba63fb7877cd6f43cd3d0fcf1707c90e16b4be5ac85329d2e21379cf","name":"globle_map2.csv","type":"text/csv","lastModified":1736241078447.277,"size":35006},{"id":"93f0dc835a3cff992099d46477d84ab6c6c5e391638b19c16531426d54c3b3e057556a5544b9ea1852ae7a0cfe42a366af2108850b7fe0afdc1d411373a5425f","href":"https://static.observableusercontent.com/files/93f0dc835a3cff992099d46477d84ab6c6c5e391638b19c16531426d54c3b3e057556a5544b9ea1852ae7a0cfe42a366af2108850b7fe0afdc1d411373a5425f","name":"The southern Hemisphere-wzy.csv","type":"text/csv","lastModified":1736241079125.009,"size":28196}] 2f:{"id":"0ff7b30ea4e15df9","slug":null,"title":"Antarctic Map - %","thumbnail":"34e243c07942f4078ecba79869d042ec108452dd8d9a29bfad70224c5353222d","access_level":"public","create_time":"$D2025-01-07T09:11:18.447Z","update_time":"$D2025-01-07T10:08:37.569Z","view_time":null,"first_public_time":"$D2025-01-07T09:11:18.447Z","has_unpublished_edits":null,"fork":{"id":"3c5820543f5c82fb","slug":null,"title":"Plot World Map - %","owner":{"id":"103cde234fec6d1a","login":"ssj2","name":"SSJ"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f4ff5a963b294e5d","login":"wzy6636-ws","name":"Wzy6636's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/db5efdba1b2fce63a6e8526ed69281fd55be399e1a975e9445d4a2a7c4ac0cb8","tier":"starter_2024","bio":""},"version":268,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9fa56752895aa2","login":"wzy6636","name":"Wzy6636","avatar_url":"https://avatars-next.observableusercontent.com/08a6f50752ac1fe4490b8882ad797e8f71e45268971bdca6f27729bc5021cd07","tier":null,"bio":""}],"members":[{"type":"individual","id":"cc9fa56752895aa2","login":"wzy6636","name":"Wzy6636","avatar_url":"https://avatars-next.observableusercontent.com/08a6f50752ac1fe4490b8882ad797e8f71e45268971bdca6f27729bc5021cd07","tier":null,"role":"editor"},{"type":"team","id":"f4ff5a963b294e5d","login":"wzy6636-ws","name":"Wzy6636's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/db5efdba1b2fce63a6e8526ed69281fd55be399e1a975e9445d4a2a7c4ac0cb8","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Antarctic Map - %","cells":[{"id":0,"value":"# Antarctic Map - %","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"// 1.9 创建初始的 SVG 元素，绘制基础地图\nmap_origin = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Part 1: 绘制地图","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"// 1.1 加载地理数据文件 \"countries-50m.json\"，并解析为 JSON 对象\nworld = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// 1.2 定义地理投影，使用正射投影（Orthographic），并中心旋转到南极\nprojection = d3.geoOrthographic()\n .scale(250) // 根据需要调整缩放比例\n .translate([width / 2, height / 2]) // 将地图居中\n .rotate([0, 90]) // 旋转投影中心到南极\n .clipAngle(90); // 仅显示南半球","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// 1.3 定义地理路径生成器，应用前面定义的投影\npath = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// 1.4 定义地球的外轮廓\noutline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// 1.5 提取国家边界线数据\nborders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// 1.6 定义经纬度网格线（辅助性地理参考线）\ngraticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// 1.7 提取陆地形状数据\nland = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"// 1.8 设定地图的固定宽度和高度\nheight = 600 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"width = 600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"// 1.10 使用 D3 选择刚刚创建的 SVG 元素，准备在其上添加内容\nsvg = d3.select(map_origin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"Part 2: 引入表格及参数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"untitled = await FileAttachment(\"The southern Hemisphere-wzy.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"untitled","database":"$undefined"},{"id":57,"value":"// 2.1 加载数据文件 \"The southern Hemisphere-wzy.csv\"，并自动转换数据类型\nDataFile = FileAttachment(\"The southern Hemisphere-wzy.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":59,"value":"// 2.2 定义聚类容差参数，控制聚类时允许的经纬度差值\nclusterTolerance = 15 // 可以根据需要调整容差值","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// 2.3 自定义聚类函数，根据经纬度对数据进行聚类\nfunction clusterByLocation(data, tolerance) {\n const clusters = []\n\n data.forEach(d => {\n const longitude = +d.Longitude\n const latitude = +d.Latitude\n\n // 查找是否有现有的簇，满足经纬度差异在容差范围内\n let foundCluster = clusters.find(cluster =>\n Math.abs(cluster.longitude - longitude) <= tolerance &&\n Math.abs(cluster.latitude - latitude) <= tolerance\n )\n\n if (foundCluster) {\n // 如果找到符合条件的簇，将数据添加到该簇中\n foundCluster.data.push(d)\n } else {\n // 否则，创建一个新的簇\n clusters.push({ longitude, latitude, data: [d] })\n }\n })\n\n return clusters\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// 2.4 对数据进行聚类处理，使用定义的容差参数 clusterTolerance\nclusteredData = clusterByLocation(DataFile, clusterTolerance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// 2.5 定义一个离散的颜色比例尺，用于不同的环境类型\ncolor = d3.scaleOrdinal() //颜色对应关系\n .domain([\n \" Algavirales \",\n \" Crassvirales \",\n \" Cremevirales \",\n \" Geplafuvirales \",\n \" Gredzevirales \",\n \" Imitervirales \",\n \" Jormunvirales \",\n \" Magrovirales \",\n \" Methanobavirales \",\n \" Ortervirales \",\n \" Petitvirales \",\n \" Saturnivirales \",\n \" Tubulavirales \",\n \" Vinavirales \"\n ])\n .range([\n \"#C6E0B4\", \"#F8CBAD\", \"#B4C6E7\", \"#FFFFB9\", \"#E2EFDA\", \n \"#FADF7A\", \"#B3EDF3\", \"#F9A9EF\", \"#a6cee3\", \"#b2df8a\", \"#cab2d6\", \"#ffff99\", \"#b15928\", \"#33a02c\"\n ]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"Part 3: 绘制饼图","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"// 3.1 计算聚类后每个簇中 Hit 值的总和，并获取最大值\nmaxClusterHit = d3.max(clusteredData, d => d3.sum(d.data, v => v.Hit))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// 3.2 定义一个平方根比例尺，根据聚类后 Hit 值的总和调整饼图的大小\nradius = d3.scaleSqrt()\n .domain([0, maxClusterHit]) // 设置输入域为聚类后 Hit 值总和的范围\n .range([10, 25]) // 设置输出范围为饼图半径 5 到 30 像素","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// 3.3 定义饼图生成器，指定每个数据项的值\npie = d3.pie().value(d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"// 3.4 定义弧形生成器函数，根据给定的半径生成饼图的弧形路径\nfunction arcGenerator(pieRadius) {\n return d3.arc()\n .innerRadius(0) // 内半径为 0，生成实心饼图\n .outerRadius(pieRadius) // 外半径为指定的 pieRadius\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"// 3.5 在地图上为每个聚类的数据添加一个元素，用于存放饼图\npies = svg.append('g')\n .selectAll('g')\n .data(clusteredData)\n .join('g')\n .attr('transform', d => {\n // 使用投影将经纬度转换为平面坐标\n const [x, y] = projection([d.longitude, d.latitude])\n return `translate(${x}, ${y})` // 将饼图定位到对应的地理位置\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// 3.6 为每个聚类的数据绘制饼图\npies.each(function(d) {\n const group = d3.select(this) // 当前的容器\n\n // 计算当前聚类中数据的 Hit 值总和，用于确定饼图的大小\n const hitValue = d3.sum(d.data, v => v.Hit) // 使用总和\n const pieRadius = radius(hitValue) // 根据比例尺计算饼图半径\n\n // 创建弧形生成器\n const arc = arcGenerator(pieRadius)\n\n// 计算每个 Reaction 类型的 Hit 值总和，生成饼图的数据\nconst pieData = d3.rollup(\n d.data,\n v => d3.sum(v, d => d.Hit), // 计算每个 Reaction 类型的 Hit 值总和\n d => d.Reaction // 按 Reaction 分组\n)\n // 将 Map 转换为数组形式，便于后续处理\n const pieChart = pie([...pieData].map(([key, value]) => ({key, value})))\n\n // 绘制饼图的每个弧形\n group.selectAll('path')\n .data(pieChart)\n .join('path')\n .attr('d', arc) // 使用弧形生成器绘制路径\n .attr('fill', d => color(d.data.key)) // 根据环境类型设置颜色\n .attr('stroke', '#fff') // 设置弧形之间的分隔线颜色\n .attr('stroke-width', 0.3) // 设置分隔线宽度\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"Part 4: 绘制图例","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"// 4.1 生成用于绘制大小图例的 Hit 值数组\nhitValues = d3.ticks(\n 0,\n maxClusterHit,\n 3 // 生成 3 个代表性值（可以根据需要调整）\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"// 4.2 添加环境类型的颜色图例\n// 在 SVG 中添加一个新的元素，用于存放颜色图例\nlegendColorSet = svg.append('g')\n .attr('transform', 'translate(0, 0)') // 设置图例的位置","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// 为每个环境类型创建图例项\nlegendColorSet.selectAll('g')\n .data(color.domain())\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 20})`) // 垂直排列\n .each(function(d) {\n const legend = d3.select(this) // 当前的容器\n\n // 添加颜色矩形\n legend.append('rect')\n .attr('x', 0) // 矩形的 x 坐标\n .attr('y', 0) // 矩形的 y 坐标\n .attr('width', 18) // 矩形的宽度\n .attr('height', 18) // 矩形的高度\n .attr('fill', color(d)) // 矩形的填充颜色\n\n // 添加对应的文本标签\n legend.append('text')\n .attr('x', 24) // 文本的 x 坐标，矩形右侧\n .attr('y', 9) // 文本的 y 坐标\n .attr('dy', '0.35em') // 垂直居中对齐\n .text(d) // 显示环境类型的名称\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// 4.3 添加 Hit 值大小的图例\n// 在 SVG 中添加一个新的元素，用于存放 Hit 值大小的图例\nlegendHit = svg.append('g')\n .attr('transform', 'translate(550, 450)') // 设置图例的位置","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"// 为每个代表性 Hit 值创建图例项\nlegendHit.selectAll('g')\n .data(hitValues)\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 35})`) // 垂直排列\n .each(function(d) {\n const legend = d3.select(this) // 当前的容器\n\n // 添加表示 Hit 值的圆形\n legend.append('circle')\n .attr('cx', 10) // 圆心的 x 坐标\n .attr('cy', 10) // 圆心的 y 坐标\n .attr('r', radius(d)) // 根据 Hit 值计算半径\n .attr('fill', 'none') // 无填充色\n .attr('stroke', '#000') // 描边颜色\n\n // 添加对应的文本标签\n legend.append('text')\n .attr('x', 30) // 文本的 x 坐标，圆形右侧\n .attr('y', 10) // 文本的 y 坐标\n .attr('dy', '0.35em') // 垂直居中对齐\n .text(Math.round(d)) // 显示 Hit 值（取整）\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"// 2.6 生成聚类后的数据表格，包含每个饼图中各个 Reaction 类型的 Hit 值总和\nclusteredTableData = clusteredData.flatMap(cluster => {\n // 按 Reaction 类型聚合数据，计算每个 Reaction 类型的 Hit 总和\n const reactionData = d3.rollup(\n cluster.data, \n v => d3.sum(v, d => d.Hit), // 对每个 Reaction 类型的 Hit 值求和\n d => d.Reaction // 按 Reaction 类型分组\n )\n\n // 将 Map 转换为数组格式，方便显示\n return [...reactionData].map(([reaction, totalHit]) => ({\n Reaction: reaction, // 环境类型\n Hit: totalHit, // 对应 Reaction 类型的 Hit 总和\n Latitude: cluster.latitude, // 当前聚类的纬度\n Longitude: cluster.longitude // 当前聚类的经度\n }))\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"// 2.7 显示聚类后的数据表格\ntable = Inputs.table(clusteredTableData, {\n columns: [\n \"Reaction\",\n \"Hit\",\n \"Latitude\",\n \"Longitude\"\n ],\n rows: 10, // 每页显示的行数，可根据需要调整\n sort: \"Hit\" // 默认按照 Hit 值排序\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"// 4.4 添加一些样式，确保图例和地图的视觉效果\nsvg {\n font-family: sans-serif;\n font-size: 12px;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"