2b:null 2c:["$","title",null,{"children":"Plot World Map - % | Wzy6636's Workspace | Observable"}] 31:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1726293425171.694,"size":756420},{"id":"f55ded07b91841f6f55d68aefd2e376ceb5cfb7c2afec7e83a98acf8b0d21d1fb7c86ea0e6b1a97b854fe5565e4196d32c8921dd7992996f4bd9addf5f4d41fc","href":"https://static.observableusercontent.com/files/f55ded07b91841f6f55d68aefd2e376ceb5cfb7c2afec7e83a98acf8b0d21d1fb7c86ea0e6b1a97b854fe5565e4196d32c8921dd7992996f4bd9addf5f4d41fc","name":"WZY-n.csv","type":"text/csv","lastModified":1726293657440.691,"size":1317960},{"id":"c48d9b3f3aaf0cf1c8c391b17cc0842aa8ae67ce728ba08ebc1f3e568dbee7ec4c7fc2bbcbadd2adc3e31ee37ad17520a4c1d1715122f9ba0adfdf9212dc479c","href":"https://static.observableusercontent.com/files/c48d9b3f3aaf0cf1c8c391b17cc0842aa8ae67ce728ba08ebc1f3e568dbee7ec4c7fc2bbcbadd2adc3e31ee37ad17520a4c1d1715122f9ba0adfdf9212dc479c","name":"世界地图.csv","type":"text/csv","lastModified":1729240515605.544,"size":1532972},{"id":"80c894a985e9bb7ffbab9a41ab270f1d4e3de7d22c0f6eacc90318676e2cf50b541dd4122b7704c14eabc150e892aa435a0ea79b01f6de066a8f8f2c1ff0d93b","href":"https://static.observableusercontent.com/files/80c894a985e9bb7ffbab9a41ab270f1d4e3de7d22c0f6eacc90318676e2cf50b541dd4122b7704c14eabc150e892aa435a0ea79b01f6de066a8f8f2c1ff0d93b","name":"大地图.csv","type":"text/csv","lastModified":1733128989748.448,"size":250097}] 2f:{"id":"ee2d290e6f5125b0","slug":null,"title":"Plot World Map - %","thumbnail":"fa4fcde6126757ca42842d8b2c503cc25cd2ef76b270e581b25149cd845fc869","access_level":"public","create_time":"$D2024-09-14T05:56:18.825Z","update_time":"$D2025-01-07T07:56:25.083Z","view_time":null,"first_public_time":"$D2024-09-14T08:35:55.945Z","has_unpublished_edits":null,"fork":{"id":"19cbc978f7478a7b","slug":"plot-world-map","title":"Plot World Map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":204,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot World Map - %","cells":[{"id":0,"value":"# Plot World 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 定义地理投影，使用等面积的 Equal Earth 投影\nprojection = d3.geoEqualEarth()","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 = {\n // 根据投影和地图轮廓计算地图的边界\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline)\n \n // 计算地图的高度 dy\n const dy = Math.ceil(y1 - y0),\n l = Math.min(Math.ceil(x1 - x0), dy)\n \n // 动态调整投影的缩放比例\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2)\n \n // 返回计算得到的高度 dy，作为地图的高度\n return dy\n}","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":156,"value":"wzyN = await FileAttachment(\"WZY-n.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"wzyN","database":"$undefined"},{"id":57,"value":"// 2.1 加载数据文件 \"WZY-n.csv\"，并将数据类型自动转换\nDataFile = FileAttachment(\"WZY-n.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 \" Assimilatory Nitrate Reduction \",\n \" Denitrification \",\n \" Denitrification;Anammox \",\n \" Denitrification;Nitric Oxide Dismutation \",\n \" Dissimilatory Nitrate Reduction \",\n \" Dissimilatory Nitrate Reduction;Denitrification \",\n \" Nitrification \",\n \" Nitrogen Fixation \",\n ])\n .range([\n \"#C6E0B4\", \"#F8CBAD\", \"#B4C6E7\", \"#FFFFB9\", \"#E2EFDA\", \n \"#FADF7A\", \"#B3EDF3\", \"#F9A9EF\", \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, 30]) // 设置输出范围为饼图半径 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(10, 10)') // 设置图例的位置","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"\n// 为每个环境类型创建图例项\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(1100, 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 生成聚类后的数据表格\nclusteredTableData = clusteredData.flatMap(cluster => {\n return cluster.data.map(d => ({\n Reaction: d.Reaction,\n Hit: d.Hit,\n Latitude: cluster.latitude,\n Longitude: cluster.longitude\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"