2b:null 2c:["$","title",null,{"children":"Buble world map P2 | Wzy6636's Workspace | Observable"}] 31:T70a,// $$6. 绘制气泡图，基于经纬度绘制位置 bubbles = svg.append('g') // 创建 g 元素容器用于绘制气泡 .selectAll('g') .data(DataFile) // 使用 DataFile 数据 .join('g') // 使用 LongitudeData 和 LatitudeData 来定位气泡 .attr('transform', (d, i) => `translate(${projection([Longitude[i], Latitude[i]])})`) .each(function(d, i) { const bubble = d3.select(this) const r = radius(Hit[i]) // 动态计算半径，基于 HitData 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.7) // 设置不透明度 .attr('stroke', '#777') // 设置描边颜色 .attr('stroke-width', '0.2px') // 设置描边粗细 } })32:Ta81,// 设置元素与形状的图例，并添加对应的文本说明 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; // 用于存储每个形状的元素 // 根据不同的形状类型创建图形 switch (d.shape) { case 'circle': // 圆形 shape = legend.append('circle') .attr('cx', -9.5) // 设置圆心的 x 坐标 .attr('cy', 9.5) // 设置圆心的 y 坐标 .attr('r', 9.5); // 设置圆的半径 break; case 'upTriangle': // 上三角形 shape = legend.append('polygon') .attr('points', `${-19}, ${19} ${0}, ${19} ${-9.5}, ${0}`); // 三角形顶点的坐标 break; case 'rect': // 矩形 shape = legend.append('rect') .attr('x', -19) // 设置矩形的左上角 x 坐标 .attr('y', 0) // 设置矩形的左上角 y 坐标 .attr('width', 19) // 设置矩形的宽度 .attr('height', 19); // 设置矩形的高度 break; case 'downTriangle': // 下三角形 shape = legend.append('polygon') .attr('points', `${-19}, ${0} ${0}, ${0} ${-9.5}, ${19}`); // 三角形顶点的坐标 break; case 'diamond': // 菱形 shape = legend.append('polygon') .attr('points', `${-9.5}, ${0} ${0}, ${9.5} ${-9.5}, ${19} ${-19}, ${9.5}`); // 菱形顶点的坐标 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", 3) // 设置文本的 x 坐标，稍微偏移一点与形状分开 .attr("y", 9.5) // 设置文本的 y 坐标，使其在形状的旁边对齐 .attr("dy", "0.35em") // 调整文本的垂直对齐 .text(d => d.Form); // 显示对应的环境类型（例如 'Aquatic'） }); 33:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1751422375494.192,"size":756420},{"id":"9f47ecf884016886927f7c6096d4b493289e19637143d080dcd28c13e33c717e5a1fbef44fa96e34d0fd592ecd9f44827d8e6e3b44cfe9f2975f89f52a2d710e","href":"https://static.observableusercontent.com/files/9f47ecf884016886927f7c6096d4b493289e19637143d080dcd28c13e33c717e5a1fbef44fa96e34d0fd592ecd9f44827d8e6e3b44cfe9f2975f89f52a2d710e","name":"P2_LongLat.csv","type":"text/csv","lastModified":1751422375494.192,"size":65529}] 2f:{"id":"7c95cdc90c25c100","slug":null,"title":"Buble world map P2","thumbnail":"cb5e5711007cf686f7cf26dd3d4d732c961428b8b23e7745191508f6c6c741af","access_level":"public","create_time":"$D2025-07-02T02:12:55.494Z","update_time":"$D2025-08-07T13:00:24.482Z","view_time":null,"first_public_time":"$D2026-02-24T15:14:51.807Z","has_unpublished_edits":null,"fork":true,"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":780,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Buble world map P2","cells":[{"id":0,"value":"# Buble world map P2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"map_orign = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"projection = d3.geoEqualEarth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"path = d3.geoPath()\n .projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\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":86,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"land = 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":129,"value":"svg = d3.select(map_orign)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"world = 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":452,"value":"wzyN = await FileAttachment(\"P2_LongLat.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":504,"value":"// $$0. 设置输入文件\nDataFile = FileAttachment(\"P2_LongLat.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":"// $$0. 设置输入文件的Longitude来源\nLongitude = DataFile.map(d => d.Longitude)\n","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)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"// 设定点的大小，基于 Hit 列\nHit = DataFile.map(d => d.Hit) // 将 Hit 列提取到 HitData 中","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// $$1. 设定点的大小\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":517,"value":"// $$2. 设置ColorSet来源列，用于设置颜色 \nColorSet = 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":100,"value":"color = d3.scaleOrdinal()\n .domain([...new Set(DataFile.map(d => d.ColorSet))]) //颜色\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"// $$3. 设定元素与颜色对应关系如果使用默认配色，请将删除此条目，并将后期color_1参数改为color\ncolor_1 = d3.scaleOrdinal() //颜色对应关系\n .domain([\n \"Air\",\n \"Aquatic\",\n \"Engineered\",\n \"Host-associated\",\n \"Terrestrial\"\n ])\n .range([\n \"#ffb3a7\", \"#003371\", \"#549688\", \"#725e82\", \"#955539\"\n ]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"// $$4. 设置Shape来源列，用于设置形状\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":589,"value":"// $$5. 在 ObservableHQ 中，定义 SHAPE_MAP 和自动生成的 FormShapes\nSHAPE_MAP = ({\n 'Aquatic': 'circle', // 圆形代表水生环境\n 'Engineered': 'rect', // 矩形代表工程环境\n 'Air': 'upTriangle', // 上三角形代表空气相关环境\n 'Terrestrial': 'downTriangle', // 下三角形代表陆地环境\n 'Host-associated': 'diamond' // 菱形代表宿主环境\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"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":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"// 添加颜色关系图例，在 svg 中添加一个新的元素（即图例容器），用于保存图例的内容\nlegendColorSet = svg.append(\"g\")\n // 设置图例容器的位置，通过 translate(x, y) 移动图例到指定的位置。 (0,0)即为左上角\n .attr(\"transform\", \"translate(0, 0)\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"// 设置颜色图例的矩形和对应的文本说明\nlegendColorSet.selectAll('g')\n .data(color_1.domain()) // 绑定 color_1 的 domain 数据，每个数据项表示颜色类别\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 20})`) // 将每个图例项垂直排列，间隔 22 像素\n .each(function(d, i) {\n const legend = d3.select(this); // 选择当前的容器\n let rect; // 用于存储矩形元素\n\n // 添加颜色矩形\n rect = legend.append('rect')\n .attr('x', 10) // 设置矩形的 x 坐标\n .attr('y', 4.5) // 设置矩形的 y 坐标，使其稍微下移，居中于文本\n .attr('width', 20) // 设置矩形的宽度\n .attr('height', 10) // 设置矩形的高度\n .attr('fill', color_1(d)); // 使用 color_1 颜色比例尺设置填充颜色\n\n // 添加对应的文本标签\n legend.append(\"text\")\n .attr(\"x\", 33) // 设置文本的 x 坐标，使其与矩形稍微分开\n .attr(\"y\", 9.5) // 设置文本的 y 坐标，使其与矩形对齐\n .attr(\"dy\", \"0.35em\") // 调整文本的垂直对齐，保证居中效果\n .text(d => 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":287,"value":"// 在 svg 中添加一个新的元素（即形状图例的容器），用于保存图例中的形状内容\nlegendSHAPE = svg.append('g')\n // 设置图例容器的位置，通过 translate(x, y) 移动图例到指定的位置，将图例容器从左上角 (0, 0) 向右移动 30 像素，向下移动 450 像素。\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":296,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"legendHit = 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":321,"value":"hitValues = [1, 5, 10] //设置图注范围","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"// 设置 Hit 图例的圆形和对应的文本说明\nlegendHit.selectAll('g')\n .data(hitValues) // 绑定 hitValues 数据，每个数据项代表不同的 hit 值\n .join('g')\n .attr('transform', (d, i) => `translate(0, ${i * 35})`) // 将每个图例项垂直排列，间隔 20 像素\n .each(function(d, i) {\n const legend = d3.select(this); // 选择当前的容器\n\n // 添加圆形\n legend.append('circle')\n .attr('cx', -9.5) // 设置圆心的 x 坐标\n .attr('cy', 6.5) // 设置圆心的 y 坐标，使其与文本对齐\n .attr('r', radius(d)) // 根据 hit 值的大小设置圆的半径\n .attr('fill', 'none') // 设置填充为空\n .attr('stroke', '#000'); // 设置圆的描边颜色为黑色\n\n // 添加对应的文本标签\n legend.append('text')\n .attr('x', 10) // 设置文本的 x 坐标，使其与圆形保持一定的间距\n .attr('y', 6.5) // 设置文本的 y 坐标，使其与圆形对齐\n .attr('dy', '0.35em') // 调整文本的垂直对齐，保证视觉居中\n .text(d => d); // 显示对应的 hit 值\n });\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"