2b:null 2c:["$","title",null,{"children":"D3 world map | Wzy6636's Workspace | Observable"}] 31:T5b1,bubbles = svg.append('g') .selectAll('g') .data(dataSorted) .join('g') .attr('transform', d => `translate(${projection([+d.Longitude, +d.Latitude])})`) .each(function(d) { const bubble = d3.select(this); const depth = +field_depth(d); const r = radius(depth); const fill = color(depth); const group = field_group(d); const shapeType = shapeMap[group] || "circle"; let shape; if (shapeType === "circle") { shape = bubble.append("circle").attr("r", r); } else if (shapeType === "diamond") { const points = [[0,-r],[r,0],[0,r],[-r,0]].map(p => p.join(",")).join(" "); shape = bubble.append("polygon").attr("points", points); } else if (shapeType === "square") { shape = bubble.append("rect") .attr("x", -r).attr("y", -r).attr("width", 2*r).attr("height", 2*r); } else if (shapeType === "triangle-up") { const points = [[0, -r], [r, r], [-r, r]].map(p => p.join(",")).join(" "); shape = bubble.append("polygon").attr("points", points); } else if (shapeType === "triangle-down") { const points = [[-r, -r], [r, -r], [0, r]].map(p => p.join(",")).join(" "); shape = bubble.append("polygon").attr("points", points); } if (shape) { shape.attr("fill", fill) .attr("fill-opacity", 0.7) .attr("stroke", "#000") .attr("stroke-width", "1px"); } });32:Tc31,legend = { const rowHeight = 30; const svg = d3.create("svg").attr("width", 300).attr("height", 300); const g = svg.append("g").attr("transform", "translate(10, 20)"); g.append("text") .attr("x", 0).attr("y", -10) .text("Depth Legend (Color & Size)") .attr("font-weight", "bold") .attr("font-size", "13px"); const depthLegend = [ { label: "Surface (0–50 m)", depth: 25 }, { label: "DCM (50–150 m)", depth: 100 }, { label: "Mesopelagic (150–1000 m)", depth: 500 }, { label: "Bathypelagic (>1000 m)", depth: 1500 }, { label: "Unknown / NA", depth: null } ]; depthLegend.forEach((d, i) => { const y = i * rowHeight; const r = radius(d.depth); const c = color(d.depth); g.append("circle") .attr("cx", 10).attr("cy", y + 10).attr("r", r) .attr("fill", c).attr("fill-opacity", 0.7) .attr("stroke", "#000").attr("stroke-width", "0.5px"); g.append("text") .attr("x", 30).attr("y", y + 14) .text(d.label) .attr("font-size", "12px").attr("fill", "#333"); }); const groupLegendY = depthLegend.length * rowHeight + 20; g.append("text") .attr("x", 0).attr("y", groupLegendY - 10) .text("Data Source Legend (Shape)") .attr("font-weight", "bold").attr("font-size", "13px"); const groupLegend = [ { label: "in_houst", shape: "circle" }, { label: "GOV", shape: "diamond" }, { label: "SQUARE", shape: "square" }, { label: "TRIANGLE_UP", shape: "triangle-up" }, { label: "TRIANGLE_DOWN", shape: "triangle-down" } ]; groupLegend.forEach((d, i) => { const y = groupLegendY + i * rowHeight; const cx = 10, cy = y + 10, r = 6; if (d.shape === "circle") { g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r) .attr("fill", "#888").attr("stroke", "#000").attr("stroke-width", "0.5px"); } else if (d.shape === "diamond") { const points = [[cx, cy - r], [cx + r, cy], [cx, cy + r], [cx - r, cy]].map(p => p.join(",")).join(" "); g.append("polygon").attr("points", points) .attr("fill", "#888").attr("stroke", "#000").attr("stroke-width", "0.5px"); } else if (d.shape === "square") { g.append("rect") .attr("x", cx - r).attr("y", cy - r) .attr("width", 2 * r).attr("height", 2 * r) .attr("fill", "#888").attr("stroke", "#000").attr("stroke-width", "0.5px"); } else if (d.shape === "triangle-up") { const points = [[cx, cy - r], [cx + r, cy + r], [cx - r, cy + r]].map(p => p.join(",")).join(" "); g.append("polygon").attr("points", points) .attr("fill", "#888").attr("stroke", "#000").attr("stroke-width", "0.5px"); } else if (d.shape === "triangle-down") { const points = [[cx - r, cy - r], [cx + r, cy - r], [cx, cy + r]].map(p => p.join(",")).join(" "); g.append("polygon").attr("points", points) .attr("fill", "#888").attr("stroke", "#000").attr("stroke-width", "0.5px"); } g.append("text") .attr("x", 30).attr("y", cy + 4) .text(d.label).attr("font-size", "12px").attr("fill", "#333"); }); return svg.node(); } 33:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1751425944614.657,"size":756420},{"id":"1b62cd610d90ef2beca6b43b3447b12f7b0ebf5c989a9322c9f32870a4067046d3ed743165082340125274a31572ec07141ed7b573ecd010c1ccf08c47bf7656","href":"https://static.observableusercontent.com/files/1b62cd610d90ef2beca6b43b3447b12f7b0ebf5c989a9322c9f32870a4067046d3ed743165082340125274a31572ec07141ed7b573ecd010c1ccf08c47bf7656","name":"gomc_imgvr.csv","type":"text/csv","lastModified":1751433820672.231,"size":425428}] 2f:{"id":"74c68c7584030054","slug":null,"title":"D3 world map","thumbnail":"3dab8804082bcd8e4647c3852e61a579579fe4f475a3b8e5a8fb652501444458","access_level":"public","create_time":"$D2025-07-02T03:12:24.614Z","update_time":"$D2025-07-02T05:56:18.645Z","view_time":null,"first_public_time":"$D2025-12-25T08:24:38.133Z","has_unpublished_edits":null,"fork":{"id":"305227651b1938c9","slug":"d3-world-map","title":"D3 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":221,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 world map","cells":[{"id":0,"value":"# D3 world map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"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":160,"value":"导入数据和字段映射","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"DataFile = FileAttachment(\"gomc_imgvr.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":189,"value":"gomc_imgvr = await FileAttachment(\"gomc_imgvr.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"gomc_imgvr","database":"$undefined"},{"id":127,"value":"Longitude = 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":133,"value":"Latitude = 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":164,"value":"✅ 定义数据字段名：如数据结构变化，仅修改此处","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"field_depth = d => d.Depth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"field_group = d => d.group","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"isNA = d => field_depth(d) === 'NA' || field_depth(d) === '' || field_depth(d) == null || isNaN(+field_depth(d))\n//缺失数值定义","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"//基于depth数据分割颜色\ncolor = d => {\n const depth = +d;\n if (d == null || d === \"\" || isNaN(depth)) return \"#E1BEE7\"; // 统一 NA 判断\n return d3.scaleThreshold()\n .domain([50, 150, 1000])\n .range([\"#81D4FA\", \"#6fc57b\", \"#7986CB\", \"#78909C\"])(depth);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"radius = d => {\n const depth = +d;\n if (d == null || d === \"\" || isNaN(depth)) return 3;\n return d3.scaleThreshold()\n .domain([50, 150, 1000])\n .range([4, 6, 8, 10])(depth);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"//定义图形形状对应关系\nshapeMap = ({\n \"IMGVR v4\" : \"circle\",\n \"GOMC\" : \"diamond\",\n \"SQUARE\" : \"square\",\n \"TRIANGLE_UP\" : \"triangle-up\",\n \"TRIANGLE_DOWN\" : \"triangle-down\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"数据排序与绘图","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"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":179,"value":"dataSorted = [\n ...DataFile.filter(isNA),\n ...DataFile.filter(d => !isNA(d)).sort((a, b) => +field_depth(b) - +field_depth(a))\n];\n//定义绘制顺序，NA最下，从深至浅绘制","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"图例：深度与形状分离","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"svg.append(() => legend).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":201,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"地图绘制参数，勿动！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"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":86,"value":"Many other projections are available. [Browse them here](https://observablehq.com/collection/@d3/d3-geo-projection).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"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":22,"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":114,"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":16,"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":105,"value":"borders = 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":13,"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"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"