2b:null 2c:["$","title",null,{"children":"260416_지역별 경력단절여성 조사 | Ssen Kim | Observable"}] 31:T64b,/*Observable은 와플차트 내장 컴포넌트가 없어서 직접 그려야 함. html+css grid가 초보자 친화적이라 이거부터 해보고 그 다음 단계 svg로 적용하기로 */ waffleChart = { const rate = selectedData.ratePercent; const filledCells = Math.round(rate); const totalCells = 100; const stepDelay = 70; // 셀 간 딜레이(ms) const fillStartIndex = totalCells - filledCells; // 이 인덱스부터 민트색 const container = html`

`; const style = html``; // 회색에서 민트로 + 살짝 튀는 효과 container.appendChild(style); for (let i = 0; i < totalCells; i++) { const isFilled = i >= fillStartIndex; // 오른쪽 아래 N칸만 채움 const delay = (totalCells - 1 - i) * stepDelay; // 99번=0ms, 0번=가장 늦음 const cell = html`

`; container.appendChild(cell); } return container; }32:[{"id":"94363467dec442316ec53b4be04d0e451d043b81f8a6b9b1b0e2fb43199e0a2363bd52f9eb531490e55f7afd35fd74fffc5affa4588ddeef1acc8dd194cf85f3","href":"https://static.observableusercontent.com/files/94363467dec442316ec53b4be04d0e451d043b81f8a6b9b1b0e2fb43199e0a2363bd52f9eb531490e55f7afd35fd74fffc5affa4588ddeef1acc8dd194cf85f3","name":"260416_kosis_career_break_region.csv","type":"text/csv","lastModified":1776324980700.786,"size":353}] 2f:{"id":"33fb17fa063b7836","slug":null,"title":"260416_지역별 경력단절여성 조사","thumbnail":"a8ca514df544a93f2292cacc5855d7f3b12cae1f28d67dd905c5aff1523639dd","access_level":"public","create_time":"$D2026-04-16T07:28:25.555Z","update_time":"$D2026-04-16T08:38:26.799Z","view_time":null,"first_public_time":"$D2026-08-12T15:49:11.356Z","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":54,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"260416_지역별 경력단절여성 조사","cells":[{"id":0,"value":"# 260416_지역별 경력단절여성 조사","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"data=FileAttachment(\"260416_kosis_career_break_region.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"columns=data.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n return{\n 총_행수: data.length,\n 첫_3행: data.slice(0,3),\n 마지막_3행: data.slice(-3)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"uniqueValues = {\n const result = {};\n for (const col of data.columns) {\n const unique = [...new Set(data.map(d => d[col]))];\n result[col] = {\n 개수: unique.length,\n 샘플: unique.slice(0, 10)\n };\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"typeCheck = data.columns.map(col => ({\n 컬럼: col,\n 첫값: data[0][col],\n 타입: typeof data[0][col]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"//데이터 정제(숫자 변환&비율 계산)\n\ncleanData = data.map(d => {\n const married = +d[\"Married Women Aged 15-54 (K)\"];\n const interrupted = +d[\"Career-Interrupted Women (K)\"];\n return {\n region: d.Region,\n married: married,\n interrupted: interrupted,\n rate: interrupted / married, // 비율 (0~1)\n ratePercent: (interrupted / married) * 100 // 퍼센트\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"//지역 목록 추출(버튼에 사용)\nregions = cleanData.map(d => d.region)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"selectedData = cleanData.find(d => d.region === selectedRegion)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"//지역 선택UI(라디오 버튼이라고 하는데 정확히 뭔진 모르겠다)\n\nviewof selectedRegion = Inputs.radio(regions, {\n label: \"지역 선택\",\n value: \"Total\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chartLabel = html`\n

${selectedData.region}

\n ${selectedData.ratePercent.toFixed(1)}%\n

\n 기혼여성 ${selectedData.married.toLocaleString()}천 명 중 \n 경력단절 ${selectedData.interrupted.toLocaleString()}천 명\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"