2b:null 2c:["$","title",null,{"children":"260316_반려동물 동반출입 음식점 시범사업 현황(25.2월 기준) | Ssen Kim | Observable"}] 31:T136c,chart2 = { const width = 1300; const height = 1020; const format = d3.format(",.0f"); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) .nodeWidth(15) .nodePadding(10) // nodeSort 제거 .extent([[1, 5], [width - 1, height - 5]]); const {nodes, links} = sankey({ nodes: sankeyData.nodes.map(d => Object.assign({}, d)), // sankeyData로 원복 links: sankeyData.links.map(d => Object.assign({}, d)) }); // sankeyData로 변경 // ↓ 여기에 추가 ↓ const foodOrder = [ "food_category:카페", "food_category:한식", "food_category:양식", "food_category:뷔페", "food_category:중식", "food_category:정보없음", "food_category:운영불가", "food_category:업종 미등록" ]; const foodNodes = foodOrder .map(name => nodes.find(n => n.name === name)) .filter(Boolean); const foodY0 = d3.min(foodNodes, d => d.y0); let currentY = foodY0; for (const node of foodNodes) { const h = node.y1 - node.y0; node.y0 = currentY; node.y1 = currentY + h; currentY += h + 10; } sankey.update({nodes, links}); const color = d3.scaleOrdinal(d3.schemeCategory10); const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.category)); rect.append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (linkColor === "source-target") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0.3) // 기본 opacity 낮춤 rect .style("cursor", "pointer") .on("click", function(event, d) { const isActive = d3.select(this).classed("active"); // 모든 노드 초기화 svg.selectAll("rect").classed("active", false); svg.selectAll("g path").attr("stroke-opacity", 0.3); svg.selectAll("rect").attr("opacity", 1); if (!isActive) { // 클릭된 노드 활성화 d3.select(this).classed("active", true); // 관련 없는 링크 흐리게 svg.selectAll("g path") .attr("stroke-opacity", l => l.source === d || l.target === d ? 0.8 : 0.05 ); // 관련 없는 노드 흐리게 svg.selectAll("rect") .attr("opacity", nd => nd === d || links.some(l => (l.source === d && l.target === nd) || (l.target === d && l.source === nd) ) ? 1 : 0.3 ); } }); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); const label = svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2 - 8) // 이름을 살짝 위로 .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .attr("font-size", "20px") // 기존 10px의 2배 .text(d => d.name.split(":")[1]); // 노드값 표시 (이름 아래) svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2 + 16) // 이름 아래 .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .attr("font-size", "16px") // 노드값은 이름보다 살짝 작게 .attr("fill", "#666") // 회색으로 구분 .text(d => `${format(d.value)}건`); return svg.node(); }32:T72d,loadedData = d3.csv("https://gist.githubusercontent.com/ssen0117/efc3548c8708d58ee41ccf70c5898948/raw/f722c0ff0bdb560856ad6ed2addfed4a51b6430c/data.csv", d => { const cityMap = { "서울특별시": "서울", "서울시": "서울", "부산광역시": "부산", "부산시": "부산", "인천광역시": "인천", "인천시": "인천", "대구광역시": "대구", "대전광역시": "대전", "울산광역시": "울산", "경기도": "경기", "강원특별자치도": "강원", "강원도": "강원", "충청북도": "충북", "경상북도": "경북", "경상남도": "경남", "전라남도": "전남", "제주특별자치도": "제주", "제주시": "제주", "세종특별자치시": "세종", "세종시": "세종", "청주시": "충북" }; // 개별 레이블을 살릴 대기업/프랜차이즈 const largeCompanyMap = { "소노호텔앤리조트": "소노호텔앤리조트·소노인터내셔널", "(주)소노인터내셔널": "소노호텔앤리조트·소노인터내셔널", "㈜커피빈코리아": "(주)커피빈 코리아" }; // 나머지 소규모 그룹 const smallCompanies = ["열정", "한국팻푸드아카데미", "GPF 파트너스"]; const isSmallGroup = smallCompanies.some(name => d.company_name.includes(name)); const matchedLarge = Object.keys(largeCompanyMap).find(name => d.company_name.includes(name) ); const companyGroup = matchedLarge ? largeCompanyMap[matchedLarge] : isSmallGroup ? "기타 프랜차이즈" : "개인·자영업"; return { ...d, city: cityMap[d.city] ?? d.city, company_name: companyGroup, status: d.status === "-" ? "상태 미등록" : d.status, food_category: d.food_category === "-" ? "업종 미등록" : d.food_category }; })33:T5dc,sankeyData = { const columns = ["city", "company_name", "status", "food_category"]; const links = []; for (let i = 0; i < columns.length - 1; i++) { const source = columns[i]; const target = columns[i + 1]; const grouped = d3.rollup( loadedData, v => v.length, d => d[source], d => d[target] ); for (const [src, targets] of grouped) { for (const [tgt, value] of targets) { links.push({ source: `${source}:${src}`, target: `${target}:${tgt}`, value }); } } } const nodeNames = Array.from(new Set(links.flatMap(d => [d.source, d.target]))); // food_category 노드 순서 지정 const foodOrder = [ "food_category:카페", "food_category:한식", "food_category:양식", "food_category:뷔페", "food_category:중식", "food_category:정보없음", "food_category:운영불가", "food_category:업종 미등록" ]; const sortedNodeNames = [ // food_category 외 노드는 기존대로 ...nodeNames.filter(n => !n.startsWith("food_category:")), // food_category 노드는 지정 순서대로 ...foodOrder.filter(n => nodeNames.includes(n)), // foodOrder에 없는 food_category 노드는 뒤에 추가 ...nodeNames.filter(n => n.startsWith("food_category:") && !foodOrder.includes(n)) ]; const nodes = sortedNodeNames.map(name => ({ name, category: name.split(":")[0] })); return { nodes, links }; }34:Tdef,chart = { const width = 928; const height = 600; const format = d3.format(",.0f"); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); // sankeyData로 변경 const {nodes, links} = sankey({ nodes: sankeyData.nodes.map(d => Object.assign({}, d)), links: sankeyData.links.map(d => Object.assign({}, d)) }); const color = d3.scaleOrdinal(d3.schemeCategory10); const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.category)); rect.append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (linkColor === "source-target") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0.3) // 기본 opacity 낮춤 .on("mouseover", function(event, d) { // 모든 링크 흐리게 svg.selectAll("g path") .attr("stroke-opacity", 0.05); // hover된 링크만 강조 d3.select(this) .attr("stroke-opacity", 0.8) .attr("stroke-width", dd => Math.max(1, dd.width) * 1.1); // 연결된 source/target 노드도 강조 svg.selectAll("rect") .attr("opacity", nd => nd === d.source || nd === d.target ? 1 : 0.3 ); }) .on("mouseout", function() { // 원래 상태로 복구 svg.selectAll("g path") .attr("stroke-opacity", 0.3); svg.selectAll("rect") .attr("opacity", 1); d3.select(this) .attr("stroke-width", d => Math.max(1, d.width)); }); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); // 노드 레이블에서 prefix 제거 (예: "city:서울" → "서울") svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name.split(":")[1]); // prefix 제거 return svg.node(); }35:Tddb,chart1 = { const width = 928; const height = 600; const format = d3.format(",.0f"); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); // sankeyData로 변경 const {nodes, links} = sankey({ nodes: sankeyData.nodes.map(d => Object.assign({}, d)), links: sankeyData.links.map(d => Object.assign({}, d)) }); const color = d3.scaleOrdinal(d3.schemeCategory10); const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.category)); rect.append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (linkColor === "source-target") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0.3) // 기본 opacity 낮춤 rect .on("mouseover", function(event, d) { // 모든 링크 흐리게 svg.selectAll("g path") .attr("stroke-opacity", 0.05); // 연결된 링크만 강조 svg.selectAll("g path") .filter(l => l.source === d || l.target === d) .attr("stroke-opacity", 0.8); // 연결 안 된 노드 흐리게 svg.selectAll("rect") .attr("opacity", nd => nd === d || links.some(l => (l.source === d && l.target === nd) || (l.target === d && l.source === nd) ) ? 1 : 0.3 ); }) .on("mouseout", function() { svg.selectAll("g path").attr("stroke-opacity", 0.3); svg.selectAll("rect").attr("opacity", 1); }); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); // 노드 레이블에서 prefix 제거 (예: "city:서울" → "서울") svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name.split(":")[1]); // prefix 제거 return svg.node(); }36:T1151,chart3 = { const width = 928; const height = 600; const format = d3.format(",.0f"); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); const {nodes, links} = sankey({ nodes: sankeyData.nodes.map(d => Object.assign({}, d)), links: sankeyData.links.map(d => Object.assign({}, d)) }); const color = d3.scaleOrdinal(d3.schemeCategory10); // 기존 tooltip 제거 후 재생성 d3.select("body").selectAll(".sankey-tooltip").remove(); const tooltip = d3.select("body").append("div") .attr("class", "sankey-tooltip") .style("position", "absolute") .style("background", "rgba(0,0,0,0.75)") .style("color", "#fff") .style("padding", "8px 12px") .style("border-radius", "6px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.category)); rect.append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (linkColor === "source-target") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0.3) .on("mousemove", function(event, d) { tooltip .style("opacity", 1) .style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 20) + "px") .html(` ${d.source.name.split(":")[1]} → ${d.target.name.split(":")[1]}
건수: ${format(d.value)} `); }) .on("mouseout", function() { tooltip.style("opacity", 0); }); rect .style("cursor", "pointer") .on("click", function(event, d) { const isActive = d3.select(this).classed("active"); svg.selectAll("rect").classed("active", false); svg.selectAll("g path").attr("stroke-opacity", 0.3); svg.selectAll("rect").attr("opacity", 1); if (!isActive) { d3.select(this).classed("active", true); svg.selectAll("g path") .attr("stroke-opacity", l => l.source === d || l.target === d ? 0.8 : 0.05 ); svg.selectAll("rect") .attr("opacity", nd => nd === d || links.some(l => (l.source === d && l.target === nd) || (l.target === d && l.source === nd) ) ? 1 : 0.3 ); } }); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name.split(":")[1]); return svg.node(); }37:[] 2f:{"id":"23238f0396d064a2","slug":null,"title":"260316_반려동물 동반출입 음식점 시범사업 현황(25.2월 기준)","thumbnail":"da10b2c1aeae5ab0636423ee2ab2b779429a6fd2a9d379e6a5b9f0e2f9c02158","access_level":"public","create_time":"$D2026-03-15T16:50:39.683Z","update_time":"$D2026-03-16T05:30:05.113Z","view_time":null,"first_public_time":"$D2026-03-15T16:55:58.029Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"},{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"260316_반려동물 동반출입 음식점 시범사업 현황(25.2월 기준)","cells":[{"id":0,"value":"# 260316_반려동물 동반출입 음식점 시범사업 현황(25.2월 기준)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"

\n\n

인터랙티브 03. 클릭 시 해당 노드만 필터링

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"nodeAlign = \"sankeyJustify\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"linkColor = \"source-target\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = {\n const d3 = await require(\"d3@7\");\n const sankey = await require(\"d3-sankey@0.12\");\n return Object.assign({}, d3, sankey);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"# 인터랙티브 01.링크hover시 경로 강조","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"# 인터랙티브 02.노드 hover 시 연결된 링크 강조","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"# 인터랙티브 04.툴팁(수치 상세 표시)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// city 고유값 확인\ncityCheck = [...new Set(loadedData.map(d => d.city))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// 전체 데이터 건수 확인\nloadedData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// company_name 고유값 전체 확인 (정규화 전)\ncompanyCheck = await d3.csv(\"https://gist.githubusercontent.com/ssen0117/efc3548c8708d58ee41ccf70c5898948/raw/f722c0ff0bdb560856ad6ed2addfed4a51b6430c/data.csv\").then(d => \n [...new Set(d.map(r => r.company_name))]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"