2d:null 2e:["$","title",null,{"children":"🌱그래프 레터. 소득별 가공식품 지출 분석 | Ssen Kim | Observable"}] 33:Tdaa,slopeChart_health = { const width = 900; const height = 700; const margin = {top: 30, right: 160, bottom: 35, left: 160}; const xScale = d3.scalePoint() .domain(["2019년", "2025년"]) .range([margin.left, width - margin.right]); const yMin = d3.min(healthData, d => Math.min(d.y2019, d.y2025)); const yMax = d3.max(healthData, d => Math.max(d.y2019, d.y2025)); const yScale = d3.scaleLinear() .domain([yMin * 0.85, yMax * 1.05]) .range([height - margin.bottom, margin.top]); const colorActive = "#5151c6"; const fmt = v => v >= 10000 ? `${(v / 10000).toFixed(1)}만원` : `${v.toLocaleString()}원`; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .style("font", "14px sans-serif"); svg.append("text") .attr("x", width / 2).attr("y", 14) .attr("text-anchor", "middle") .style("font-size", "16px").style("font-weight", "bold") .text("건강보조식품"); for (const year of ["2019년", "2025년"]) { svg.append("line") .attr("x1", xScale(year)).attr("y1", margin.top) .attr("x2", xScale(year)).attr("y2", height - margin.bottom) .attr("stroke", "#999").attr("stroke-width", 1); svg.append("text") .attr("x", xScale(year)).attr("y", height - margin.bottom + 20) .attr("text-anchor", "middle") .style("font-size", "14px").style("font-weight", "bold") .text(year); } for (const d of healthData) { if (d.소득구간 === selectedIncome) continue; svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(d.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(d.y2025)) .attr("stroke", "#ccc").attr("stroke-width", 1).attr("stroke-opacity", 0.4); svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(d.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2019)); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(d.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2025)); } const active = healthData.find(d => d.소득구간 === selectedIncome); if (active) { svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(active.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(active.y2025)) .attr("stroke", colorActive).attr("stroke-width", 2.5).attr("stroke-linecap", "round"); for (const [year, val] of [["2019년", active.y2019], ["2025년", active.y2025]]) { svg.append("circle") .attr("cx", xScale(year)).attr("cy", yScale(val)) .attr("r", 3.5).attr("fill", colorActive); } svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(active.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${active.소득구간} ${fmt(active.y2019)}`); const cr = ((active.y2025 - active.y2019) / active.y2019 * 100).toFixed(1); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(active.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${fmt(active.y2025)} (${cr > 0 ? "+" : ""}${cr}%)`); } return svg.node(); }34:Tdae,slopeChart_fruit = { const width = 900; const height = 540; const margin = {top: 30, right: 160, bottom: 35, left: 160}; const xScale = d3.scalePoint() .domain(["2019년", "2025년"]) .range([margin.left, width - margin.right]); const yMin = d3.min(fruitData, d => Math.min(d.y2019, d.y2025)); const yMax = d3.max(fruitData, d => Math.max(d.y2019, d.y2025)); const yScale = d3.scaleLinear() .domain([yMin * 0.85, yMax * 1.05]) .range([height - margin.bottom, margin.top]); const colorActive = "#5151c6"; const fmt = v => v >= 10000 ? `${(v / 10000).toFixed(1)}만원` : `${v.toLocaleString()}원`; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .style("font", "14px sans-serif"); svg.append("text") .attr("x", width / 2).attr("y", 14) .attr("text-anchor", "middle") .style("font-size", "16px").style("font-weight", "bold") .text("과일및과일가공품"); for (const year of ["2019년", "2025년"]) { svg.append("line") .attr("x1", xScale(year)).attr("y1", margin.top) .attr("x2", xScale(year)).attr("y2", height - margin.bottom) .attr("stroke", "#999").attr("stroke-width", 1); svg.append("text") .attr("x", xScale(year)).attr("y", height - margin.bottom + 20) .attr("text-anchor", "middle") .style("font-size", "14px").style("font-weight", "bold") .text(year); } for (const d of fruitData) { if (d.소득구간 === selectedIncome_fruit) continue; svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(d.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(d.y2025)) .attr("stroke", "#ccc").attr("stroke-width", 1).attr("stroke-opacity", 0.4); svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(d.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2019)); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(d.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2025)); } const active = fruitData.find(d => d.소득구간 === selectedIncome_fruit); if (active) { svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(active.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(active.y2025)) .attr("stroke", colorActive).attr("stroke-width", 2.5).attr("stroke-linecap", "round"); for (const [year, val] of [["2019년", active.y2019], ["2025년", active.y2025]]) { svg.append("circle") .attr("cx", xScale(year)).attr("cy", yScale(val)) .attr("r", 3.5).attr("fill", colorActive); } svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(active.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${active.소득구간} ${fmt(active.y2019)}`); const cr = ((active.y2025 - active.y2019) / active.y2019 * 100).toFixed(1); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(active.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${fmt(active.y2025)} (${cr > 0 ? "+" : ""}${cr}%)`); } return svg.node(); }35:Tdbc,slopeChart_seaweed = { const width = 900; const height = 540; const margin = {top: 30, right: 160, bottom: 35, left: 160}; const xScale = d3.scalePoint() .domain(["2019년", "2025년"]) .range([margin.left, width - margin.right]); const yMin = d3.min(seaweedData, d => Math.min(d.y2019, d.y2025)); const yMax = d3.max(seaweedData, d => Math.max(d.y2019, d.y2025)); const yScale = d3.scaleLinear() .domain([yMin * 0.85, yMax * 1.05]) .range([height - margin.bottom, margin.top]); const colorActive = "#5151c6"; const fmt = v => v >= 10000 ? `${(v / 10000).toFixed(1)}만원` : `${v.toLocaleString()}원`; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .style("font", "14px sans-serif"); svg.append("text") .attr("x", width / 2).attr("y", 14) .attr("text-anchor", "middle") .style("font-size", "16px").style("font-weight", "bold") .text("해조및해조가공품"); for (const year of ["2019년", "2025년"]) { svg.append("line") .attr("x1", xScale(year)).attr("y1", margin.top) .attr("x2", xScale(year)).attr("y2", height - margin.bottom) .attr("stroke", "#999").attr("stroke-width", 1); svg.append("text") .attr("x", xScale(year)).attr("y", height - margin.bottom + 20) .attr("text-anchor", "middle") .style("font-size", "14px").style("font-weight", "bold") .text(year); } for (const d of seaweedData) { if (d.소득구간 === selectedIncome_seaweed) continue; svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(d.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(d.y2025)) .attr("stroke", "#ccc").attr("stroke-width", 1).attr("stroke-opacity", 0.4); svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(d.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2019)); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(d.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", "#bbb").style("font-size", "14px").text(fmt(d.y2025)); } const active = seaweedData.find(d => d.소득구간 === selectedIncome_seaweed); if (active) { svg.append("line") .attr("x1", xScale("2019년")).attr("y1", yScale(active.y2019)) .attr("x2", xScale("2025년")).attr("y2", yScale(active.y2025)) .attr("stroke", colorActive).attr("stroke-width", 2.5).attr("stroke-linecap", "round"); for (const [year, val] of [["2019년", active.y2019], ["2025년", active.y2025]]) { svg.append("circle") .attr("cx", xScale(year)).attr("cy", yScale(val)) .attr("r", 3.5).attr("fill", colorActive); } svg.append("text") .attr("x", xScale("2019년") - 5).attr("y", yScale(active.y2019)) .attr("text-anchor", "end").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${active.소득구간} ${fmt(active.y2019)}`); const cr = ((active.y2025 - active.y2019) / active.y2019 * 100).toFixed(1); svg.append("text") .attr("x", xScale("2025년") + 5).attr("y", yScale(active.y2025)) .attr("text-anchor", "start").attr("dy", "0.35em") .style("fill", colorActive).style("font-weight", "bold").style("font-size", "14px") .text(`${fmt(active.y2025)} (${cr > 0 ? "+" : ""}${cr}%)`); } return svg.node(); }36:T584,html`

이 글이 유익하셨나요?

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

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

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

`37:[] 31:{"id":"386192e4e9c80caf","slug":"income_food_spending_korea","title":"🌱그래프 레터. 소득별 가공식품 지출 분석","thumbnail":"bfe69d560076e668c342790f33f62d37cab219d60dbd92e2f6fb2c10dbd54941","access_level":"public","create_time":"$D2026-04-21T16:16:01.369Z","update_time":"$D2026-05-14T15:39:30.563Z","view_time":null,"first_public_time":"$D2026-04-21T16:17:32.426Z","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":160,"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":"🌱그래프 레터. 소득별 가공식품 지출 분석","cells":[{"id":0,"value":"# 🌱그래프 레터. 소득별 가공식품 지출 분석","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"안녕하세요 여러분, **정보디자이너 쎈**입니다.\n오늘은 지출금액에 대한 이야기를 해 보려고 합니다.\n\n이런 콘텐츠를 짤 때는 개인적으로 제일 관심있는 지점에서 출발하곤 하는데요.\n최근 늘어난 식재료 구입비를 살펴보다가\n일반 토마토가 아니라 스테비아 토마토를 사는 저를 발견했습니다.\n(다행히 4월 들어서부터 제철과일이 된 토마토의 가격은 현재 안정된 상태입니다.)\n굳이 이렇게 프리미엄이 붙은 과일을 살 필요가 있나 생각하다가\n다른 소득의 분들과 다른 항목의 지출금액이 어떤지도 궁금해졌어요.\n주요 데이터는 KOSIS의 공공 데이터를 활용했습니다.실제로는 더 많은 항목들이 있으나 소득 차이에 따라 변화 차이가 보이는 세 개 항목을 설정했고요.\n[소득구간별 가구당 월평균 가계수지 (전국,1인이상,실질)](https://kosis.kr/statHtml/statHtml.do?orgId=101&tblId=DT_1L9U121&conn_path=I3)\n데이터 구성을 보기 쉽게끔 바로 확인하실 수 있도록 배치했습니다.↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"data = d3.csvParse(`소득구간,품목명,가공여부,2019년,2025년\n100만원 미만,과일및과일가공품,가공,18580,18310\n100만원 미만,해조및해조가공품,가공,2968,2714\n100만원 미만,건강보조식품,가공,8523,12299\n100~200만원,과일및과일가공품,가공,24794,22427\n100~200만원,해조및해조가공품,가공,3289,2979\n100~200만원,건강보조식품,가공,11315,18924\n200~300만원,과일및과일가공품,가공,28421,23661\n200~300만원,해조및해조가공품,가공,3246,3126\n200~300만원,건강보조식품,가공,12972,19749\n300~400만원,과일및과일가공품,가공,36191,26164\n300~400만원,해조및해조가공품,가공,4160,3021\n300~400만원,건강보조식품,가공,17912,20512\n400~500만원,과일및과일가공품,가공,42886,29461\n400~500만원,해조및해조가공품,가공,4572,3570\n400~500만원,건강보조식품,가공,21575,28527\n500~600만원,과일및과일가공품,가공,47233,33859\n500~600만원,해조및해조가공품,가공,5190,4188\n500~600만원,건강보조식품,가공,26701,31191\n600~700만원,과일및과일가공품,가공,55127,36581\n600~700만원,해조및해조가공품,가공,5148,4177\n600~700만원,건강보조식품,가공,28492,32939\n700만원 이상,과일및과일가공품,가공,64481,48128\n700만원 이상,해조및해조가공품,가공,5290,4561\n700만원 이상,건강보조식품,가공,35486,45491`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"# 1. 건강보조식품\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"소득구간을 선택하면 각 소득구간별 **건강보조식품** 지출금액의 변화를 슬로프 차트로 볼 수 있습니다.\n소득별로 기울기가 조금씩 다르지만 100만원 미만의 소득구간의 변화와 700만원 이상의 소득구간의 변화를 봅시다. \n700만원 이상 소득 구간의 건강보조식품 구매 비용은 28.2% 증가하면서 전체를 끌어올리고 있는 것처럼 보입니다.\n전 이 시장을 보면서 최근 생겨나는 창고형 약국이 떠올랐어요. 기성약을 저렴하게 살 수 있기도 하지만 꽤 많은 구간에 비타민등의 건강보조식품이 놓여있기도 하거든요. 프리미엄 구간과 대중화된 구간이 점차 늘어나지 않을까라는 생각이 드네요.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"healthData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof selectedIncome = Inputs.radio(incomeGroups, {\n label: \"소득구간 선택\",\n value: \"100만원 미만\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"# 2. 과일및과일가공품","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"이번엔 과일및과일가공품을 봅시다. 아까와는 달리 전체적으로 오른쪽 아래로 향하는 선을 볼 수 있습니다. 데이터들이 모두 실질 비용을 다루고 있기 때문에 물가가 반영되고 있지 않다는 걸 기억하세요. 과일의 가격이 올라간건지, 소비 자체가 줄었는지는 물량 데이터 없이는 파악이 어렵습니다. 이 그래프에서 알 수 있는건 전반적으로 줄고 있다. 정도예요.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"fruitData = cleanData.filter(d => d.품목명 === \"과일및과일가공품\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof selectedIncome_fruit = Inputs.radio(incomeGroups, {\n label: \"소득구간 선택\",\n value: \"100만원 미만\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"# 3. 해조및해조가공품","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"이 항목을 정한 건 한국에서 김 소비가 크다는 생각 때문이었어요. 다른 항목들에 대비해서 금액이 크진 않지만 과일보다는 적은 수준으로 줄어드는걸 볼 수 있습니다. 앞선 상황들과 마찬가지로 우리가 이 그래프에서 알 수 있는건 지출 금액이 줄어들었다. 정도이고, 여기서 더한다면 300만원 이상 소득구간에서 하락폭이 크다까지는 볼 수 있어요. 전체 항목들을 더 본다면 전통적인 식재료에 쓰는 돈은 줄이고 가공식품이나 기능적인 품목에 쓰는 지출은 늘어난다라는 결론도 얻을 수 있겠네요. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"seaweedData = cleanData.filter(d => d.품목명 === \"해조및해조가공품\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof selectedIncome_seaweed = Inputs.radio(incomeGroups, {\n label: \"소득구간 선택\",\n value: \"100만원 미만\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html`

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

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"cleanData = data.map(d => ({\n 소득구간: d.소득구간,\n 품목명: d.품목명,\n y2019: +d[\"2019년\"],\n y2025: +d[\"2025년\"]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"healthData = cleanData.filter(d => d.품목명 === \"건강보조식품\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"incomeGroups = healthData.map(d => d.소득구간)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"