2b:null 2c:["$","title",null,{"children":"Buble world map - Shape | SSJ | Observable"}] 31:T6f3,// 3.1 绘制气泡图，基于经纬度绘制位置 bubbles = svg.append('g') // 创建 g 元素容器用于绘制气泡 .selectAll('g') .data(DataFile) // 使用 DataFile 数据 .join('g') // 使用 Longitude 和 Latitude 来定位气泡 .attr('transform', (d, i) => `translate(${projection([Longitude[i], Latitude[i]])})`) .each(function(d, i) { const bubble = d3.select(this) const r = radius(Hit[i]) // 动态计算半径，基于 Hit 值 const shapeType = SHAPE_MAP[SHAPE[i]] // 从 SHAPE_MAP 获取形状类型 let shape // 根据形状类型来绘制不同的图形 if (shapeType === 'circle') { shape = bubble.append('circle').attr('r', r) } else if (shapeType === 'rect') { shape = bubble.append('rect') .attr('x', -r) .attr('y', -r) .attr('width', r * 2) .attr('height', r * 2) } else if (shapeType === 'upTriangle') { shape = bubble.append('polygon') .attr('points', `${-r}, ${r} ${r}, ${r} 0, ${-r}`) } else if (shapeType === 'downTriangle') { shape = bubble.append('polygon') .attr('points', `${-r}, ${-r} ${r}, ${-r} 0, ${r}`) } else if (shapeType === 'diamond') { shape = bubble.append('polygon') .attr('points', `0, ${-r} ${r}, 0 0, ${r} ${-r}, 0`) } // 统一设置填充颜色、透明度、描边颜色和粗细 if (shape) { shape .attr('fill', color_1(ColorSet[i])) // 根据 ColorSet 设置填充颜色 .attr('fill-opacity', 0.5) // 设置不透明度 .attr('stroke', '#777') // 设置描边颜色 .attr('stroke-width', '1px') // 设置描边粗细 } })32:Ta4d,// 设置形状图例，并添加对应的文本说明 legendSHAPE.selectAll('g') .data(FormShapes) // 绑定 FormShapes 数据，每个数据项包含形状类型和对应的环境类型 .join('g') .attr('transform', (d, i) => `translate(0, ${i * 22})`) // 将每个图例项垂直排列，间隔 22 像素 .each(function(d, i) { const legend = d3.select(this); // 当前的容器 let shape; // 用于存储每个形状的元素 const r = 9.5; // 定义图例中形状的大小 // 根据不同的形状类型创建图形 switch (d.shape) { case 'circle': // 圆形 shape = legend.append('circle') .attr('cx', r) // 设置圆心的 x 坐标 .attr('cy', r) // 设置圆心的 y 坐标 .attr('r', r); // 设置圆的半径 break; case 'rect': // 矩形 shape = legend.append('rect') .attr('x', 0) // 设置矩形的左上角 x 坐标 .attr('y', 0) // 设置矩形的左上角 y 坐标 .attr('width', r * 2) // 设置矩形的宽度 .attr('height', r * 2); // 设置矩形的高度 break; case 'upTriangle': // 上三角形 shape = legend.append('polygon') .attr('points', `${0}, ${r * 2} ${r * 2}, ${r * 2} ${r}, 0`); // 三角形顶点的坐标 break; case 'downTriangle': // 下三角形 shape = legend.append('polygon') .attr('points', `${0}, 0 ${r * 2}, 0 ${r}, ${r * 2}`); // 三角形顶点的坐标 break; case 'diamond': // 菱形 shape = legend.append('polygon') .attr('points', `${r}, 0 ${r * 2}, ${r} ${r}, ${r * 2} 0, ${r}`); // 菱形顶点的坐标 break; } // 统一设置填充颜色、透明度、描边颜色和描边宽度 if (shape) { shape .attr('fill', '#000') // 设置形状的填充颜色为黑色 .attr('fill-opacity', 0.7) // 设置填充颜色的不透明度为 0.7 .attr('stroke', '#333') // 设置描边颜色为深灰色 .attr('stroke-width', '0px'); // 设置描边宽度为 0，表示没有描边 } // 添加对应的文本标签 legend.append("text") .attr("x", r * 2 + 6) // 设置文本的 x 坐标，形状右侧 .attr("y", r) // 设置文本的 y 坐标，居中对齐 .attr("dy", "0.35em") // 调整文本的垂直对齐 .text(d.Form); // 显示对应的环境类型名称 });33:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1736235383197.353,"size":756420},{"id":"f55ded07b91841f6f55d68aefd2e376ceb5cfb7c2afec7e83a98acf8b0d21d1fb7c86ea0e6b1a97b854fe5565e4196d32c8921dd7992996f4bd9addf5f4d41fc","href":"https://static.observableusercontent.com/files/f55ded07b91841f6f55d68aefd2e376ceb5cfb7c2afec7e83a98acf8b0d21d1fb7c86ea0e6b1a97b854fe5565e4196d32c8921dd7992996f4bd9addf5f4d41fc","name":"WZY-n.csv","type":"text/csv","lastModified":1736235383197.353,"size":1317960},{"id":"4ee2e2b901c56daf211c35aec3e4eac88a7f40c345ff441c946951ff9bcbfc8194b219f0bbdf2be2a20c543584e4b75fc166dbfe4799ad6a9d8dfbdf4e7b6d53","href":"https://static.observableusercontent.com/files/4ee2e2b901c56daf211c35aec3e4eac88a7f40c345ff441c946951ff9bcbfc8194b219f0bbdf2be2a20c543584e4b75fc166dbfe4799ad6a9d8dfbdf4e7b6d53","name":"globle_map@1.csv","type":"text/csv","lastModified":1736235622760.55,"size":47276}] 2f:{"id":"e9525685f40c699f","slug":null,"title":"Buble world map - Shape","thumbnail":"b42d371a3c60f2702ae8314b938affdfea1a9098fb15696a50153eaf840ba9f2","access_level":"public","create_time":"$D2025-01-07T07:36:23.197Z","update_time":"$D2025-01-07T07:40:49.960Z","view_time":null,"first_public_time":"$D2025-01-07T07:36:23.197Z","has_unpublished_edits":null,"fork":{"id":"e11ea1d445801bea","slug":null,"title":"Buble world map - Shape","owner":{"id":"f4ff5a963b294e5d","login":"wzy6636-ws","name":"Wzy6636's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"103cde234fec6d1a","login":"ssj2","name":"SSJ","avatar_url":"https://avatars-next.observableusercontent.com/81ef8e869416321675e3d7967fb63715b41f7bf15ef388b6e03626fca4977ddf","tier":"starter_2024","bio":""},"version":842,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"145e4c76f81a29ff","login":"shujuansun","name":"shujuansun","avatar_url":"https://avatars-next.observableusercontent.com/d9cf6979534c38d1c59e86dee6903764391acaa4709d7842c889c2d84edd7fbf","tier":null,"bio":""}],"members":[{"type":"individual","id":"145e4c76f81a29ff","login":"shujuansun","name":"shujuansun","avatar_url":"https://avatars-next.observableusercontent.com/d9cf6979534c38d1c59e86dee6903764391acaa4709d7842c889c2d84edd7fbf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Buble world map - Shape","cells":[{"id":0,"value":"# Buble world map - Shape","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"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":788,"value":"第一部分：绘制地图","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"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":84,"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":75,"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":719,"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":801,"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":79,"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":803,"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":88,"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":30,"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":805,"value":"第二部分：引入表格及参数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"SSJ = await FileAttachment(\"globle_map@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"SSJ","database":"$undefined"},{"id":504,"value":"// 2.1 加载数据文件 \"WZY-n.csv\"，并将数据类型自动转换\nDataFile = FileAttachment(\"globle_map@1.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":618,"value":"// 2.2 提取经度和纬度数据\nLongitude = DataFile.map(d => d.Longitude)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"// $$0. 设置输入文件的Latitude来源\nLatitude = DataFile.map(d => d.Latitude)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"// 2.3 提取用于点大小的 Hit 列数据\nHit = DataFile.map(d => d.Hit)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// 2.4 定义用于设置颜色的 Reaction 列数据\nColorSet = DataFile.map(d => d.Reaction)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"// 2.5 定义用于设置形状的 Environment 列数据\nSHAPE = DataFile.map(d => d.Environment)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"// 2.6 定义参数：颜色比例尺、形状映射和点大小比例尺\n\n// 定义颜色比例尺 color_1，基于 Reaction 分类\ncolor_1 = 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 \"Organic\"\n ])\n .range([\n \"#C6E0B4\", \"#F8CBAD\", \"#B4C6E7\", \"#FFFFB9\", \"#E2EFDA\", \n \"#FADF7A\", \"#B3EDF3\", \"#F9A9EF\", \"#D0CECE\"\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"// 定义形状映射 SHAPE_MAP\nSHAPE_MAP = ({\n 'Aquatic': 'circle', // 圆形代表水生环境\n 'Terrestrial': 'rect', // 矩形代表陆地环境\n 'Host-associated': 'upTriangle', // 上三角形代表宿主相关环境\n 'Engineered': 'downTriangle', // 下三角形代表工程环境\n 'Unclassified': 'diamond' // 菱形代表未分类环境\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"// 自动生成形状列表 FormShapes，用于绘制图例\nFormShapes = Object.keys(SHAPE_MAP).map(element => ({\n Form: element, // 环境类型名称\n shape: SHAPE_MAP[element] // 对应的形状类型\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"// 定义点大小比例尺 radius，根据 Hit 值调整大小\nradius = d3.scaleSqrt()\n .domain([0, d3.max(Hit)])\n .range([5, 15]) // 圈的大小，最小为5，最大为15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"第三部分：绘制气泡","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":698,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"第四部分：绘制图例","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"// 4.1 添加颜色关系图例\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":232,"value":"// 设置颜色图例的矩形和对应的文本说明\nlegendColorSet.selectAll('g')\n .data(color_1.domain()) // 绑定 color_1 的 domain 数据，每个数据项表示颜色类别\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 20})`) // 将每个图例项垂直排列，间隔 20 像素\n .each(function(d, i) {\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_1(d)); // 使用 color_1 颜色比例尺设置填充颜色\n\n // 添加对应的文本标签\n legend.append(\"text\")\n .attr(\"x\", 24) // 设置文本的 x 坐标，使其与矩形稍微分开\n .attr(\"y\", 9) // 设置文本的 y 坐标，使其与矩形对齐\n .attr(\"dy\", \"0.35em\") // 调整文本的垂直对齐，保证居中效果\n .text(d); // 显示颜色类别的名称（对应 color_1 的 domain 值）\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"// 4.2 添加形状图例\n// 在 svg 中添加一个新的元素，用于保存形状图例的内容\nlegendSHAPE = svg.append('g')\n .attr(\"transform\", \"translate(30, 450)\"); // 设置图例容器的位置","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"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":326,"value":"// 定义用于绘制大小图例的 Hit 值数组\nhitValues = [1, 500, 1000]; // 可以根据数据范围调整","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"// 设置 Hit 图例的圆形和对应的文本说明\nlegendHit.selectAll('g')\n .data(hitValues) // 绑定 hitValues 数据，每个数据项代表不同的 hit 值\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 35})`) // 将每个图例项垂直排列，间隔 35 像素\n .each(function(d, i) {\n const legend = d3.select(this); // 当前的容器\n\n // 添加圆形\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(d); // 显示对应的 hit 值\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"wzyN1 = await FileAttachment(\"globle_map@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"wzyN1","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"