2e:null 2f:["$","title",null,{"children":"[개정판] 온실 속 주식투자 #2: 복수종목에 대한 (독립)확률적 접근 | Humble Data Miner | Observable"}] 34:T1e1a,{ const [w,h] = [slide_content_dim[0],slide_content_dim[1]-20]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //svg.append("rect").attr("width",w).attr("height",h).attr("stroke","white"); const margin = {left:34,right:140,top:80,bottom:20}; const g_text_start = svg.append("text") .attr("fill","lightgrey").attr("x",margin.left).attr("y",h/2) .style("font-size","small") .attr("text-anchor","end").attr("dominant-baseline","middle").text(`x1.00`); const g_lines = svg.append("g"); const lc = [d3.schemeCategory10[1],d3.schemeCategory10[0],d3.schemeCategory10[2]]; function make_sl(tk,w,func) { return d3_slider.sliderBottom() .min(d3.min(tk)).max(d3.max(tk)) .marks(tk).tickValues(tk) .width(200).value(tk[Math.floor(tk.length/2)]) .on("onchange", () => func()); } function make_g_sl(sl,ml,mt,w,c,txt) { const g_sl = svg.append("g") .attr("transform",`translate(${ml},${mt})`) .call(sl); g_sl.select(".slider text").attr("fill",c); g_sl.append("text") .attr("text-anchor","middle").attr("dy",-15).style("font-size","small") .attr("x",w/2).attr("fill",c).text(txt); return g_sl; } const sl_w = 200; const tk_mu = d3.range(-3,3+1,1).map(d=>d/10); const tk_sigma = d3.range(1,8,1).map(d=>d/10); const sl = d3.range(2).map(i=>{ const c = lc[i]; const sl_mu = make_sl(tk_mu,sl_w,update); make_g_sl(sl_mu,40,i*80+26,sl_w,c,"연간 경향성 (μ)"); const sl_sigma = make_sl(tk_sigma,w,update); const [ml,mt] = [280,i*80+26]; const g_sl_foot = make_g_sl(sl_sigma,ml,mt,sl_w,lc[i],"연간 변동성 (σ)").append("g").attr("transform",`translate(${220},0)`); g_sl_foot.append("path") .attr("stroke",c).attr("stroke-width",4).attr("fill","none").attr("d",`M 0 0 h ${20}`); g_sl_foot.append("text") .attr("text-anchor","start").attr("dominant-baseline","middle").attr("font-size","small") .attr("fill",c).attr("dx",24).text("× 0.5"); return {m:sl_mu,s:sl_sigma}; }); const g_btw_sl = svg.append("g").attr("transform",`translate(${280+220+20*3/2},${80/2+25})`); g_btw_sl.append("text") .attr("text-anchor","start").attr("dominant-baseline","middle").attr("font-size",40) .attr("fill","lightgrey").attr("dx",-4).text("⊕"); g_btw_sl.append("path") .attr("stroke",lc[2]).attr("stroke-width",4).attr("fill","none").attr("d",`M ${36} ${-4} h ${20}`); g_btw_sl.append("text") .attr("text-anchor","start").attr("dominant-baseline","middle").attr("font-size","small") .attr("fill",lc[2]).attr("dx",60).attr("dy",-4).text("(절반씩 합한 결과)"); const x = d3.scaleLinear([0,12], [margin.left, w - margin.right]); const g_x = svg.append("g") .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d=>d==0?0:d==12?"+1Y":`+${d}M`)); g_x.selectAll(".tick text").style("font-size","small"); const g_y = svg.append("g").attr("transform",`translate(${w-margin.right},0)`); const intervals = d3.range(n_samples).reduce((acc,cur)=>{ acc.push(acc.length==0?anim_step_ms:acc[acc.length-1]*4/5); return acc; },[]); const line_anims = intervals.reduce((acc,cur)=>{ acc.push(acc.length==0?[0,cur]:[acc[acc.length-1][0]+acc[acc.length-1][1],cur]); return acc; },[]); const last_line_at = Math.ceil(d3.max(line_anims,d=>d[0]+d[1])); const g_dists = svg.append("g"); const x_term = x(1)-x(0); function update() { function gen_logacc(mu,sigma) { // population of log normal distribution const [m,s] = [mu/12, sigma/Math.sqrt(12)]; const cc = -(s*s)/2; const rng = d3.randomNormal(m,s); const prc = d3.range(n_samples).map(_=>d3.range(12+1).map(i=>i==0?0:rng())); const acc = prc.map(row=>row.reduce((acc,cur)=>{acc.push((acc.length==0?0:acc[acc.length-1])+cur+cc); return acc;},[])); return acc.map(row=>row.map(d=>Math.exp(d))); } const stats = sl.map(_=>[_.m.value(),_.s.value()]); const expacc = stats.map(s=>gen_logacc(s[0],s[1])); const avg_expacc = d3.range(n_samples) .map(si=>d3.range(12+1) .map(ci=>d3.range(expacc.length) .reduce((acc,ri)=>acc+expacc[ri][si][ci],0)/expacc.length ) ); // distribution drawings const dist = expacc.concat([avg_expacc]).map((ld,i)=>{ const expret = ld.map(row=>row[row.length-1]); const ret = expret.map(d=>Math.log(d)); const [m,s] = [ss.mean(ret), ss.standardDeviation(ret)]; const bw = 6*s/(n_bins-1); const r = [m-3*s-bw/2,m+3*s+bw/2]; const nd = new NormalDistribution(m,s); const bins = d3.range(n_bins).map(bi=>{ const l=r[0]+bi*bw; const u = l+bw; return {ec:Math.exp((l+u)/2),l:l,c:(l+u)/2,u:u,p:nd.probabilityBetween(l,u)}; }); if(i==expacc.length) { const cnt = ret.reduce((a,c)=>{ const bi = Math.floor((c-r[0])/bw); if(0<=bi&&bi0)); bins.forEach((bin,bi)=>{ bin.p = cnt[bi]/n_samples; }); } const ex = ss.mean(expret); return {i:i,m:m,s:s,bins:bins,ex:ex,exbin:bins[d3.bisect(bins.map(d=>d.u),Math.log(ex))]}; }); const ey = d3.extent(stats.map(s=>[s[0]-3*s[1]-s[1]*s[1]/2,s[0]+3*s[1]-s[1]*s[1]/2]).flat(Infinity)).map(d=>Math.exp(d)); const y = d3.scaleLog(ey,[h-margin.bottom,margin.top]); g_y.transition().duration(anim_step_ms).call(d3.axisRight(y).ticks(15).tickFormat(d=>`x${d.toFixed(2)}`)); const line = d3.line().x((_,i)=>x(i)).y(d=>y(d)); g_lines.selectAll("g").remove(); function draw_lines(ld,c,init_opacity,close_opacity) { g_lines.append("g").selectAll("path") .data(ld) .join("path") .attr("stroke",c) .attr("stroke-width",5) .attr("fill","none").attr("opacity",init_opacity) .transition() .delay((d,i)=>line_anims[i][0]) .duration((d,i)=>line_anims[i][1]).attr("opacity",close_opacity).attr("stroke-width",1) .attr("d",d=>line(d)); } expacc.forEach((ld,ld_i)=>{ draw_lines(ld,lc[ld_i],0.5,0.1); }); draw_lines(avg_expacc,lc[expacc.length],1,0.2); const dist_line = d3.line().x(d=>d.p*x_term*6).y(d=>y(d.ec)).curve(d3.curveBasis); g_dists.selectAll("g").remove(); g_dists.append("g").selectAll("path") .data(dist) .join("path") .attr("transform",d=>`translate(${w-margin.right+40},0)`) .attr("stroke",(_,i)=>lc[i]).attr("stroke-width",4).attr("stroke-dasharray","4 4").attr("fill","none") .attr("opacity",0) .attr("d",d=>dist_line(d.bins)) .transition().delay(d=>last_line_at+d.i*anim_step_ms/4).duration(anim_step_ms).attr("opacity",(_,i)=>i==(dist.length-1)?1:0.5); g_dists.append("g").selectAll("text") .data(dist) .join("text") .attr("transform",d=>`translate(${w-margin.right+40},0)`) .attr("visibility",(d,i)=>i==(dist.length-1)?"visible":"hidden") .attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size","small") .attr("opacity",0).attr("fill",(_,i)=>lc[i]) .attr("x",d=>d.exbin.p*x_term*6).attr("y",d=>y(d.ex)).attr("dx",-10).text(d=>`E[X]=${d.ex.toFixed(2)}→`) .transition().delay(d=>last_line_at+d.i*anim_step_ms/4).duration(anim_step_ms).attr("opacity",(_,i)=>i==(dist.length-1)?1:0.5); g_text_start.attr("y",y(1)); } update(); const footnote = html`

${nformat.format(n_samples)} 번 반복 시뮬레이션

`; return slide`${svg.node()}${footnote}`; }35:T6f3,{ let ci = 0; function keyUp(event) { const slides = document.querySelectorAll('.observablehq .slide'); const cs = slides[ci]; switch (event.key) { case 'ArrowUp': case 'ArrowLeft': if( !cs.hasOwnProperty("bwd") || !cs.bwd()) { ci = Math.max(ci-1, 0); const ps = slides[ci]; if(ps.hasOwnProperty("init")) ps.init(); ps.scrollIntoView({behavior: "smooth"}); } break; case 'ArrowDown': case 'ArrowRight': if( !cs.hasOwnProperty("fwd") || !cs.fwd()) { ci = Math.min(ci+1,slides.length-1); const ps = slides[ci]; if(ps.hasOwnProperty("init")) ps.init(); ps.scrollIntoView({behavior: "smooth"}); } break; } } document.removeEventListener('keyup', keyUp); document.addEventListener('keyup', keyUp); function findParent(startElement, tagName, className) { let currentElm = startElement; while (currentElm != document.body) { if (currentElm.tagName.toLowerCase() == tagName.toLowerCase() && currentElm.className.toLowerCase() == className.toLowerCase()) { return currentElm; } currentElm = currentElm.parentElement; } return false; } function click(event) { const cs_clicked = findParent(event.srcElement,'div','slide'); if (!cs_clicked) return; const slides = document.querySelectorAll('.observablehq .slide'); for(let i = 0; i < slides.length; i++) { if(slides[i] === cs_clicked) { ci = i; break; } } cs_clicked.scrollIntoView({behavior:"smooth"}); } document.removeEventListener('click',click); document.addEventListener('click',click); return document; }36:[] 32:{"id":"aad7c145553d2a04","slug":"stock-investment-in-a-greenhouse-revision-part2","title":"[개정판] 온실 속 주식투자 #2: 복수종목에 대한 (독립)확률적 접근","thumbnail":"6bbd433ed5d163c4c20a54453c4dfec86ebcd75b04fcc0638f8fea874312b6ca","access_level":"public","create_time":"$D2025-08-01T06:49:18.983Z","update_time":"$D2025-08-14T05:22:47.017Z","view_time":null,"first_public_time":"$D2025-08-03T19:39:37.777Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":360,"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"},{"type":"team","id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"693a1556761fc3fc","slug":"stock-investment-in-a-greenhouse","title":"Stock Investment in a Greenhouse","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"[개정판] 온실 속 주식투자 #2: 복수종목에 대한 (독립)확률적 접근","cells":[{"id":0,"value":"# [개정판] 온실 속 주식투자 #2:
복수종목에 대한 (독립)확률적 접근","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 클릭 후 **View** > **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"first_slide = {\n const title = md`개요`;\n const item1 = md`* [지난] 1부 단일종목 투자
\n\n 작은 변동성도 시간이 경과하면 큰 결과 차이
\n 1종목 장기투자 = 온갖 위험을 부담하는 행위 \n`;\n const item2 = md`* [이번] 2부 복수종목 (독립확률) 투자
\n2개의 종목에 각각 절반씩 투자
\n2개의 종목이 서로 독립적으로 가격변동\n`;\n\n return slide`\n${title}\n${item1}\n${item2}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"last_slide = {\n const title = md`결론`;\n const item1 = md`* 복수종목 분산투자의 효과
\n기대값은 산술평균, 편차는 감소
\n변동성(σ)이 클수록 결과가 쏠림(skew)`;\n const item2 = md`* 독립확률 가정의 한계점
\n일부 종목간 가격변동이 연동(e.g. 종목그룹)
\n전체 종목의 가격변동이 연동(e.g. 경기후퇴)\n`;\n\n return slide`\n${title}\n${item1}\n${item2}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"n_samples = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"n_bins = 11","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"anim_step_ms = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"slide_content_dim = {\n const style = window.getComputedStyle(first_slide);\n const [w,h] = [style.width, style.height].map(s=>parseFloat(s));\n const [pl,pr,pt,pb] = [style.paddingLeft,style.paddingRight,style.paddingTop,style.paddingBottom].map(s=>parseFloat(s));\n const [bl,br,bt,bb] = [style.borderLeft,style.borderRight,style.borderTop,style.borderBottom].map(s=>parseFloat(s));\n const [ml,mr,mt,mb] = [style.marginLeft,style.marginRight,style.marginTop,style.marginBottom].map(s=>parseFloat(s));\n return [w-pl-pr-bl-br-ml-mr,h-pt-pb-bt-bb-mt-mb];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {slide} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3_slider=require(\"d3-simple-slider\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"nformat = new Intl.NumberFormat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"npm_ndist = import('https://cdn.skypack.dev/normal-distribution@1.1.1?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"NormalDistribution = npm_ndist.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"