2b:null 2c:["$","title",null,{"children":"🌱그래프레터.반려동물 동반출입 음식점 시범사업 현황 | 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:T584,html`

이 글이 유익하셨나요?

데이터 시각화와 정보디자인에 관심 있는 분들에게 공유해주세요!

이 글 공유하기 뉴스레터 구독하기

매주 데이터 시각화 이야기를 전해드립니다 ✉️

`33: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 }; })34: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 }; }35:[{"id":"d3692505b692db4dff286b48856b5299d640ff2a381be99f6c2d62cc99d0202abcc3a396ad66c0f76f8f930b0ab708d500fa2dfb0ceabbdc6fccc36f266dcec8","href":"https://static.observableusercontent.com/files/d3692505b692db4dff286b48856b5299d640ff2a381be99f6c2d62cc99d0202abcc3a396ad66c0f76f8f930b0ab708d500fa2dfb0ceabbdc6fccc36f266dcec8","name":"260316_03_커피빈.png","type":"image/png","lastModified":1774451199083.78,"size":532406},{"id":"2fdc6909d6e7e156829ded2c447e25238e2bfc81f7b9895c12a5444e8ea31c447d032bcf2757393702c452b3129a56510e8ed73c721038f40cf6579375c084fa","href":"https://static.observableusercontent.com/files/2fdc6909d6e7e156829ded2c447e25238e2bfc81f7b9895c12a5444e8ea31c447d032bcf2757393702c452b3129a56510e8ed73c721038f40cf6579375c084fa","name":"Petfriendly restaurants.csv","type":"text/csv","lastModified":1774435358153.889,"size":21610},{"id":"7bb7cea9d0e3c7baf1b4c0510cb3d69bb3019390046049e9252efcab24eea0910ab5fd0cf7b324b6e7cd0ff5649a2975cf228b7079fc38ae3b5518537518feb3","href":"https://static.observableusercontent.com/files/7bb7cea9d0e3c7baf1b4c0510cb3d69bb3019390046049e9252efcab24eea0910ab5fd0cf7b324b6e7cd0ff5649a2975cf228b7079fc38ae3b5518537518feb3","name":"260316_04_영업개시.png","type":"image/png","lastModified":1774451199111.07,"size":563411},{"id":"4f7494897cc5bbd2e20fc6266f9efb2f60c2929f9f0b2abf38a62de073dac77edd3c505fb43c39952a56b05e7d969bf428b68beb0d4a4ab3c8d01d6a98d0334f","href":"https://static.observableusercontent.com/files/4f7494897cc5bbd2e20fc6266f9efb2f60c2929f9f0b2abf38a62de073dac77edd3c505fb43c39952a56b05e7d969bf428b68beb0d4a4ab3c8d01d6a98d0334f","name":"260316_02_소노.png","type":"image/png","lastModified":1774451199122.748,"size":539499}] 2f:{"id":"5b82abdef9aa5beb","slug":null,"title":"\n 🌱그래프레터.반려동물 동반출입 음식점 시범사업 현황\n","thumbnail":"0ef3626b5f072182f6f5362bb416f205398ac03d4b35a14c4d031d39040efb7b","access_level":"public","create_time":"$D2026-03-25T05:50:25.503Z","update_time":"$D2026-03-25T16:13:46.196Z","view_time":null,"first_public_time":"$D2026-03-25T05:50:25.503Z","has_unpublished_edits":null,"fork":{"id":"23238f0396d064a2","slug":null,"title":"260316_반려동물 동반출입 음식점 시범사업 현황(25.2월 기준)","owner":{"id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim"}},"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":227,"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":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"\n 🌱그래프레터.반려동물 동반출입 음식점 시범사업 현황\n","cells":[{"id":0,"value":"html`\n

\n 🌱그래프레터.
반려동물 동반출입 음식점 시범사업 현황\n

\n 식품의약품안전처 시범사업 참여 업체 리스트 · 2025년 2월 기준\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`\n**데이터 출처**\n
[식품의약품안전처 반려동물 동반출입 음식점 시범사업 참여 업체 리스트 (2025년 2월 기준)](https://www.mfds.go.kr/brd/m_74/view.do?seq=45042&srchFr=&srchTo=&srchWord=&srchTp=&itm_seq_1=0&itm_seq_2=0&multi_itm_seq=0&company_cd=&company_nm=&page=159)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"html`\n

데이터 정리

원본 데이터에서 몇 가지 문제를 찾아서 수정했습니다.

\n\n

첫째, 같은 지역이 여러 이름으로 혼재. \"서울특별시\"와 \"서울시\"가 섞여 있으면 서울이 두 개 노드로 쪼개집니다. 15개 지역명을 단축 표기로 통일했습니다.

\n\n

둘째, 업체명이 제각각. 같은 계열사는 하나로 묶고, 나머지는 \"개인·자영업\"으로 통합했습니다.

\n\n

셋째, 결측값 처리. \"-\"로 표기된 값을 \"상태 미등록\", \"업종 미등록\"으로 명시했습니다. 현재 사업을 운영하지 않는 음식점에 해당합니다.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"html`\n

생키다이어그램을 선택한 이유

모든 음식점이 지역/사업유형/현황/카테고리의 단계를 모두 거치고,각자의 비율을 가지고 있습니다.
말하자면 여러개의 파이그래프로 쪼갤 수 있는 상황이죠
파이그래프 여러개는 공간도 많이 차지할 뿐더러 전달이 어려울 것 같아서 생키 다이어그램을 선택했습니다.

각 구분 기준을 노드, 그 사이의 리본같은 도형을 흐름이라고 부르겠습니다.아래에서 노드를 클릭해서 얼마만큼의 흐름이 어디에서 어디로 흐르는지를 확인해보세요.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"html`\n

보는 방법

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"html`\n

1. 대기업이 운영하는 음식점 비중은 어떻게 되는가?

(이미지를 클릭하면 더 크게 볼 수 있습니다.)
큰 기업은 소노호텔앤리조트/소노 인터내셔널, 커피빈 코리아를 볼 수 있습니다.제일 상단의 그래프에서 각 노드를 클릭하면 다음 모습을 볼 수 있습니다. 특히 소노호텔앤리조트의 경우 대부분 강원도에 집중되어 있어, 도시지역의 일상생활을 즐기는 곳 보다는 관광지 대상의 정책으로 출발했을 가능성이 높다고 추측 할 수 있습니다.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"html`\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"html`\n

2. 음식 카테고리의 비중 차이는?

사업개시를 클릭하면 다음과 같은 이미지를 얻을 수 있습니다.현재 운영하고 있는 음식점의 대부분은 카페입니다.
좀 더 다양한 음식을 반려견과 즐기고 싶어하는 견주 입장에서는 아쉬울 수 있죠.
새로운 음식점을 운영하려는 반려견주 대상 사업자들에게는 새로운 기회가 될 수도 있고요.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"html`\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"데이터 수집과정과 분석 내용이 궁금하신 분들은 아래의 영상에서도 확인할 수 있습니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"html`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"