2e:null 2f:["$","title",null,{"children":"SH공사 41차 장기전세 공급현황 및 추세분석도구 | Humble Data Miner | Observable"}] 34:Tfe8,cutline_chart = { const data = cutline_37_40; const zoom = d3.zoom().scaleExtent([0.5, 64]).on("zoom", zoomed); const height = width*2/3; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const gDot = svg.append("g"); const gGrid = svg.append("g"); const x = d3.scaleLinear().domain(d3.extent(data,d=>d.x*1.1)).range([0, width]); const y = d3.scaleLinear().domain([6,34]).range([height, 0]); var zx = x; var zy = y; const xAxis = (g, x) => g.attr("transform", `translate(0,0)`).call(d3.axisBottom(x)); const yAxis = (g, y) => g.call(d3.axisRight(y)); const grid = (g, x, y) => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g .selectAll(".x") .data(x.ticks(12)) .join( enter => enter.append("line").attr("class", "x").attr("y2", height), update => update, exit => exit.remove() ) .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d))) .call(g => g .selectAll(".y") .data(y.ticks(12 * height/width)) .join( enter => enter.append("line").attr("class", "y").attr("x2", width), update => update, exit => exit.remove() ) .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d))); const gCircle = gDot.selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => d.유형/10) .attr("fill", d => supplycolormap[d.일반당첨방식]); const gGroup = gDot.selectAll("text.group") .data(data) .join("text") .attr("class", "group") .attr("x",d=>x(d.x)) .attr("y",d=>y(d.y)) .attr("dominant-baseline","middle") .attr("text-anchor","middle") .attr("fill","white") .text(d=>`${d.위치1.slice(0,2)}`); const gText = gDot.selectAll("text.name") .data(data) .join("text") .attr("class", "name") .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("text-anchor","start") .attr("transform", d=>`rotate(-45,${x(d.x)},${y(d.y)})`) .text(d=>`(${d.회차}차)${d.단지명}`); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function control_dot_visibility(multiplier=null) { const inbound = d => 0<=zx(d.x) && zx(d.x)<=width && 0<=zy(d.y) && zy(d.y)<=height; let selected = new Set(data.filter(x=>x.hasOwnProperty("chosen") && x.chosen).map(x=>x.index)); gCircle.attr("fill-opacity", (d,i) => selected.size == 0 || selected.has(i)? (multiplier? multiplier[rankmap[d.회차]]:1.0):0.01); gCircle.attr("visibility", d => inbound(d) ? "visible":"hidden"); gGroup.attr("fill-opacity", (d,i) => selected.size == 0 || selected.has(i)? (multiplier? multiplier[rankmap[d.회차]]:1.0):0.00); gGroup.attr("visibility", (d,i) => (selected.size == 0 || (selected.has(i) && inbound(d)) ? "visible":"hidden")); gText.attr("fill-opacity", (d,i) => selected.size == 0 || selected.has(i)? (multiplier? multiplier[rankmap[d.회차]]:1.0):0.0); gText.attr("visibility", (d,i) => selected.size == 0 || !selected.has(i) || !inbound(d) ? "hidden" : "visible"); } function zoomed({transform}) { zx = transform.rescaleX(x).interpolate(d3.interpolateRound); zy = transform.rescaleY(y).interpolate(d3.interpolateRound); gDot.attr("transform", transform); gCircle.attr("r", d=>Math.sqrt(d.신청유형)*1.5/transform.k); gText.attr("font-size", 11/transform.k).attr("dx",13/transform.k).attr("dy",x=>3/transform.k); gGroup.attr("font-size", 11/transform.k).attr("dx",-2/transform.k); control_dot_visibility(); gx.call(xAxis, zx); gy.call(yAxis, zy); gGrid.call(grid, zx, zy); } return Object.assign(svg.node(), { update(selection) { svg.call(zoom).call(zoom.transform, d3.zoomIdentity); control_dot_visibility(); }, interval(multiplier) { console.log(multiplier); control_dot_visibility(multiplier); } }); }35:T4ad,supply_37_41 = { let supp_cnt = {}; let supp_acc = {}; for(const row of rawdata) { const draw = row.일반당첨방식; const cap = row.일반; if(draw === null) continue; const rank = `(${row.회차}차)합계`; const key = `(${row.회차}차)${row.공급형태}`; if(!supp_cnt.hasOwnProperty(rank)) { supp_cnt[rank] = {}; supp_acc[rank] = {}; } if(!supp_cnt[rank].hasOwnProperty(draw)) { supp_cnt[rank][draw] = 0; supp_acc[rank][draw] = 0; } supp_cnt[rank][draw] += 1; supp_acc[rank][draw] += cap; if(!supp_cnt.hasOwnProperty(key)) { supp_cnt[key] = {}; supp_acc[key] = {}; } if(!supp_cnt[key].hasOwnProperty(draw)) { supp_cnt[key][draw] = 0; supp_acc[key][draw] = 0; } supp_cnt[key][draw] += 1; supp_acc[key][draw] += cap; } let cnt = []; for(const x in supp_cnt) for(const z in supp_cnt[x]) cnt.push({x:x,y:supp_cnt[x][z],z:z}); let acc = []; for(const x in supp_acc) for(const z in supp_acc[x]) acc.push({x:x,y:supp_acc[x][z],z:z}); return {cnt:cnt.sort((a,b)=>d3.ascending(a.x,b.x)),acc:acc.sort(((a,b)=>d3.ascending(a.x,b.x)))}; }36:[{"id":"89dd1d6ffe560bab7ece4405a1638e6abded52a38195b4843871ccfa1bb457977a237da053632a8f9f286fbbf714a3eab9a8b5d783cc27bd1a0de0e5b571741d","href":"https://static.observableusercontent.com/files/89dd1d6ffe560bab7ece4405a1638e6abded52a38195b4843871ccfa1bb457977a237da053632a8f9f286fbbf714a3eab9a8b5d783cc27bd1a0de0e5b571741d","name":"SH_LTDB_Housing_20220520@1.csv","type":"text/csv","lastModified":1652994546176.655,"size":66799}] 32:{"id":"0d1f771bdd2b2249","slug":"sh-41th-ltdb-housing-supply-and-inclination","title":"SH공사 41차 장기전세 공급현황 및 추세분석도구","thumbnail":"b3b0316efd37a3fa5c1b33adbcab9df315258e66cafc98945755d89464658792","access_level":"public","create_time":"$D2022-05-19T21:04:53.150Z","update_time":"$D2022-05-20T11:19:51.301Z","view_time":null,"first_public_time":"$D2022-05-20T11:11:14.125Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":"starter_2024"},"version":315,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null}],"members":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SH공사 41차 장기전세 공급현황 및 추세분석도구","cells":[{"id":0,"value":"# SH공사 41차 장기전세 공급현황 및 추세분석도구","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"---\n## 사용한 데이터의 제약사항\n* 37차 이전의 데이터는 제외\n* 주거약자, 우선공급 대상은 고려하지 않음\n* 예비입주자 정원은 고려하지 않음\n* 당첨선 2순위 이하는 1순위 최하점으로 간주\n\n## 37차부터 41차까지의 공급현황\n* 입주자선정기준은 크게 3가지로 나뉨\n 1. 순점자: 청약저축납입순위-배점-미성년자녀수\n 2. 순%점자: 청약저축납입순위-월평균소득70%이하우선-배점-미성년자녀수\n 3. %순점자: 월평균소득70%이하우선-지역거주순위-배점-미성년자녀수\n* 공급형태는 크게 2가지로 나뉨\n 1. 건설형: SH공사가 직접 시행하고 시공한 임대아파트\n 2. 매입형: 이미 건설된 아파트의 일부를 SH공사가 매입해 임대\n* 부연설명\n * 38차 이후로 신규공급물량이 거의 없어 41차까지 정원이 크게 줄어든상태\n * 40차와 비교해 41차에서 **%순점자** 정원이 늘고 **순점자**,**순%점자** 정원은 축소","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"key = {\n const rename = {\"순점자\":\"순점자(납입순위-점수-자녀수)\",\"순%점자\":\"순%점자(납입순위-소득(%)-점수-자녀수)\",\"%순점자\":\"%순점자(소득(%)-지역거주순위-점수-자녀수)\"};\n return Swatches(chart.scales.color,{format:x=>rename[x],fontSize:15})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"chart = StackedBarChart(supply_37_41.acc, {\n x: d => d.x,\n y: d => d.y,\n z: d => d.z,\n yLabel: \"일반공급 정원\",\n colors: d3.schemeCategory10,\n width,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"## 41차 일반공급 신규/공가 목록","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"viewof filtered_list = {\n function columnFilter(columns) {\n return query => {\n const filters = `${query}`.split(/\\s+/g).filter(t => t).map(termFilter);\n return d => filters.map(f=>columns.map(c=>f.test(d[c])).some(b=>b)).every(b=>b);\n };\n }\n function termFilter(term) {\n return new RegExp(`${term.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \"\\\\$&\")}`, \"i\");\n }\n return Inputs.search(list_41, {filter:columnFilter(['회차','공급형태','단지명','주소','일반당첨방식','신청유형','난방방식']),placeholder:\"검색어 입력\"});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"viewof selection_list = table(filtered_list,\n {\n columns:[\"회차\",\"공급형태\",\"단지명\",\"주소\",\"위치1\",\"신청유형\",\"일반\",\"전세금합계\",\"주거전용\",\"난방방식\",\"theday\",\"일반당첨방식\"],\n header:{\"위치1\":\"시/구\",\"신청유형\":\"유형(㎡)\",\"일반\":\"일반공급(채)\",\"전세금합계\":\"전세금(천원)\",\"주거전용\":\"주거면적(㎡)\", \"theday\":\"입주년월\",\"일반당첨방식\":\"입주선정기준\"},\n format:{\n \"일반당첨방식\":d=>html`

${d}

`\n },\n checkedcolumn: \"chosen\",\n required:false\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"---\n## 37차부터 40차까지의 당첨선 추세분석도구\n\n* 사용법\n 1. 검색어로 필터링(검색어 입력)\n 2. 원하는 형태로 목록 정렬(머리글 클릭)및 선택(체크박스 클릭)\n 3. 산포도를 확대/축소(스크롤),이동(드래그)해 세부사항 확인","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"viewof filtered_cutline = {\n function columnFilter(columns) {\n return query => {\n const filters = `${query}`.split(/\\s+/g).filter(t => t).map(termFilter);\n return d => filters.map(f=>columns.map(c=>f.test(d[c])).some(b=>b)).every(b=>b);\n };\n }\n function termFilter(term) {\n return new RegExp(`${term.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \"\\\\$&\")}`, \"i\");\n }\n return Inputs.search(cutline_37_40, {filter:columnFilter(['회차','공급형태','단지명','주소','일반당첨방식','신청유형','난방방식']),placeholder:\"검색어 입력\"});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof selection = table(filtered_cutline,\n {\n columns:[\"회차\",\"공급형태\",\"단지명\",\"주소\",\"위치1\",\"신청유형\",\"일반\",\"전세금합계\",\"주거전용\",\"난방방식\",\"theday\",\"일반당첨방식\",\"커트라인\"],\n header:{\"위치1\":\"시/구\",\"신청유형\":\"유형(㎡)\",\"일반\":\"일반공급(채)\",\"전세금합계\":\"전세금(천원)\",\"주거전용\":\"주거면적(㎡)\", \"theday\":\"입주년월\",\"일반당첨방식\":\"입주선정기준\"},\n format:{\n \"일반당첨방식\":d=>html`

${d}

`\n },\n checkedcolumn: \"chosen\",\n required:false\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof replay = Inputs.button(\"37차부터 40차까지 에니메이션\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"## 사용예시\n* 전체적인 추세를 보기\n * 아무런 필터설정없이 \"37차부터 40차까지 애니메이션\"버튼 클릭\n* 낮은 전세금 우선\n 1. 41차 목록을 전세금 기준 오름차순으로 정렬\n 2. 가능한 예산내의 단지를 아래 37차~40차 결과목록에 체크\n 3. 산포도 그래프 결과를 직접 확대/축소/이동해서 세부사항 확인\n 4. \"애니메이션\"버튼을 눌러 추세 확인\n* 많은 정원 우선\n 1. 41차 목록을 일반정원 기준 내림차순으로 정렬\n 2. 가능한 예산내의 단지를 아래 37~40차 결과목록에 체크\n 3. 산포도 그래프 결과를 직접 확대/축소/이동해서 세부사항 확인\n 4. \"애니메이션\"버튼을 눌러 추세 확인","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"---\n## 첨부\n* [(37차~41차) SH 장기전세.xlsx](https://docs.google.com/spreadsheets/d/1ZCBs4VsueXLxqbUnpgsaaofZqPPniFs7/edit?usp=sharing&ouid=105060780752885831331&rtpof=true&sd=true)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"---\n## 부록","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"rawdata= FileAttachment(\"SH_LTDB_Housing_20220520@1.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"list_41 = {\n let list = rawdata.filter(d=>d.회차==41);\n list.forEach((x,i)=>{ x.index = i; });\n list.forEach(x=>{ x.x = x.전세금합계/x.주거전용; });\n list.forEach(x=>{ x.theday = `${x.입주년}.${x.입주월}`; });\n return list;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"cutline_37_40 = {\n let cutline = rawdata.filter(d=>d.회차<41 && d.일반당첨방식 !== null && d.점수 !== null && (d.일반당첨방식.indexOf(\"%\") < 0 || d.소득 !== null));\n const minscore = d3.min(cutline.filter(d=>d.순위==1),d=>d.점수)-1;\n cutline.forEach((x,i)=>{ x.index = i; });\n cutline.forEach(x=>{ x.x = x.전세금합계/x.주거전용; });\n cutline.forEach(x=>{ x.y = (x.순위>1 ? minscore : (x.점수+Math.min(x.자녀수,3)/4)); });\n cutline.forEach(x=>{\n const children = x.자녀수? `-${x.자녀수}자녀`:\"\";\n x.커트라인 = x.일반당첨방식 == \"%순점자\" ? `${x.소득}-${x.순위}순위-${x.점수}점${children}`: \n x.일반당첨방식 == \"순%점자\" ? `${x.순위}순위-${x.소득}-${x.점수}점${children}` : `${x.순위}순위-${x.점수}점${children}`;\n });\n cutline.forEach(x=>{ x.theday = `${x.입주년}.${x.입주월}`; });\n return cutline;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"supplycolormap = {return {\"순점자\":d3.schemeCategory10[0],\"순%점자\":d3.schemeCategory10[1],\"%순점자\":d3.schemeCategory10[2]}; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"rankmap = {return {37:0,38:1,39:2,40:3};}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n replay;\n const period = 4000;\n const numrank = Object.keys(rankmap).length;\n const timeout = numrank*period;\n const interval = 50;\n let ticker = d3.interval(elapsed => {\n if (elapsed>timeout) {\n cutline_chart.interval(Array.from({length:numrank}, (x,i)=>1.0));\n ticker.stop();\n } else {\n let multiplier = Array.from({length:numrank}, (x,i)=>0.0); // opacity multiplier\n const progress = (elapsed%period)/period;\n multiplier[Math.floor(elapsed/period)] = progress < 0.25 ? progress/0.25 : progress < 0.75 ? 1.0 : (1.0-progress)*4;\n cutline_chart.interval(multiplier);\n }\n }, interval);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"cutline_chart.update(selection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {StackedBarChart} from \"@d3/stacked-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import {Swatches,table} from \"@humble-data-miner/inputsmore\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"