2d:null 2e:["$","title",null,{"children":"짧은 머신러닝 안내서: t-SNE(t-distributed Stochastic Neighbor Embedding) | Humble Data Miner | Observable"}] 33:T1c12,{ const margin = {width:50,height:150}; const cs = (width-2*margin.width)/3; // cell-size const height = cs*2+margin.height; const svg = d3.create("svg").attr("width", width).attr("height", height); const cells = Array.from({length:2}, (x,r)=>Array.from({length:3}, (x,c)=>svg.append("g").attr("transform",`translate(${(cs+margin.width)*c},${(cs+margin.height)*r})`))); function draw_caption(g, pos, text) { return g.append("text") .attr("x",cs/2).attr("y", pos == "top" ? 0 : cs).attr("dy", pos == "top" ? -10 : 10) .attr("text-anchor","middle").attr("dominant-baseline", pos == "bottom" ? "hanging" : "text-top").attr("font-weight","bold") .text(text); } function draw_matrix(g, M, colorfunc, scientific=false, autoscale=false) { const N = M.length; const hs = 10; // header-size const rs = (cs-hs)/N; // rect-size const max_value = autoscale ? 4*d3.max(M,d=>d3.max(d)) : 1.0; for (let r = 0; r < N; r++) { for (let c = 0; c < N; c++) { const value = M[r][c]/max_value; const color = colorfunc(value); g.append("rect") .attr("x",hs+c*rs).attr("y",hs+r*rs).attr("width",rs).attr("height",rs) .attr("fill",color).attr("stroke","black"); g.append("text") .attr("x",hs+c*rs+rs/2).attr("y",hs+r*rs+rs/2) .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","white").attr("font-size",scientific ? 13 : 14) .attr("style", "mix-blend-mode:difference;") .text(scientific ? value.toExponential(0) : value.toFixed(2)); } } for (let r = 0; r < N; r++) { g.append("rect").attr("x",0).attr("y",hs+r*rs+1).attr("width",hs-5).attr("height",rs-2).attr("fill",d3.schemeCategory10[r]); } for (let c = 0; c < N; c++) { g.append("rect").attr("x",hs+c*rs+1).attr("y",0).attr("width",rs-2).attr("height",hs-5).attr("fill",d3.schemeCategory10[c]); } } let captions = [[],[]]; // cells[0][0] for the original data of 1250 dim vectors { const x = d3.scaleLinear().domain([0, 1250]).range([0, cs]); const y = d3.scaleLinear().domain([d3.min(series,e=>d3.min(e)), d3.max(series,e=>d3.max(e))]).range([cs, 0]); const line = d3.line().defined(d => !isNaN(d)).x((d,i) => x(i)).y(d => y(d)); const cell = cells[0][0]; cell.append("rect").attr("x",0).attr("y",0).attr("width",cs).attr("height",cs).attr("fill","#eee"); cell .selectAll("path") .data(series) .join("path") .attr("fill","none").attr("stroke-width", 1).attr("stroke", (d,i)=>d3.schemeCategory10[i]).attr("stroke-opacity",0.5) .attr("d", d => line(d)); captions[0].push(draw_caption(cell, "bottom", "원본데이터(10 x 1250)")); } // cells[0][1] for cosine similarity combination of the original data { const cell = cells[0][1]; draw_matrix(cell, learndata[perplexity].history.const.CS, d3.interpolateGreens); captions[0].push(draw_caption(cell, "bottom", "원본유사도(10 x 10)")); } // cells[0][2] for probability distribution of the original data { const cell = cells[0][2]; draw_matrix(cell, learndata[perplexity].history.const.P, d3.interpolateReds); captions[0].push(draw_caption(cell, "bottom", "P:원본확률분포(10 x 10)")) } // cells[1][0] for 2d vectors { const x = d3.scaleLinear().domain([-400,400]).range([0, cs]); const y = d3.scaleLinear().domain([-400,400]).range([cs, 0]); const cell = cells[1][0]; const Y_2d = learndata[perplexity].history.var[slide].Y cell.append("rect").attr("x",0).attr("y",0).attr("width",cs).attr("height",cs).attr("fill","#eee"); cell.selectAll("circle") .data(Y_2d) .join("circle") .attr("fill", (d,i) => d3.schemeCategory10[i]) .attr("cx", d => x(d[0])) .attr("cy", d => y(d[1])) .attr("r", 5); cell.selectAll("text .stockname") .data(Y_2d) .join("text") .attr("class", "stockname") .attr("x", d => x(d[0])).attr("y", d => y(d[1])).attr("dx",5) .attr("font-size", 11).attr("dominant-baseline","middle") .text((d,i) => stocks[i].stockname); captions[1].push(draw_caption(cell, "top", "결과배치(10 x 2)")); } // cells[1][1] for euclidean similarity of the target 2D placement { const cell = cells[1][1]; draw_matrix(cell, learndata[perplexity].history.var[slide].ES, d3.interpolateGreens, true, true); captions[1].push(draw_caption(cell, "top", "결과유사도(10 x 10)")); } // cells[1][2] for probability distribution of the target 2D placement { const cell = cells[1][2]; draw_matrix(cell, learndata[perplexity].history.var[slide].Q, d3.interpolateReds, true, true); captions[1].push(draw_caption(cell, "top", "Q:결과확률분포(10 x 10)")); } // text "KL divergence" const loss = svg.append("text") .attr("x",(cs+margin.width)*2+cs/2).attr("y",cs+margin.height/2) .attr("text-anchor","middle").attr("dominant-baseline","middle").attr("font-weight","bold").attr("font-size",20) .text(`KL divergence(P|Q)=${learndata[perplexity].history.var[slide].C.toFixed(3)}`); yield svg.node(); // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, 20, 20]) .attr('refX', 10) .attr('refY', 10) .attr('markerWidth', 10) .attr('markerHeight', 10) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, 20], [20, 10]])) .attr('stroke', 'black'); // horizontal arrows for (let r = 0; r < captions.length; r++) { for (let i = 1; i < captions[r].length; i++) { let from = captions[r][i-1].node().getBBox(); let to = captions[r][i].node().getBBox(); from.x += (margin.width+cs)*(i-1); from.y += (margin.height+cs)*r; to.x += (margin.width+cs)*i; to.y += (margin.height+cs)*r; svg.append("path").attr("stroke","black").attr("stroke-width",1).attr('marker-end', 'url(#arrow)') .attr("d",`M ${from.x+from.width+10} ${from.y+from.height/2} H ${to.x-10}`); } } // vertical arrows const rect_loss = loss.node().getBBox(); const rect_p = captions[0][2].node().getBBox(); const rect_q = captions[1][2].node().getBBox(); svg.append("path").attr("stroke","black").attr("stroke-width",1).attr("marker-end", "url(#arrow)") .attr("d",`M ${rect_loss.x+rect_loss.width/2} ${rect_p.y+rect_p.height+5} V ${rect_loss.y-5}`); svg.append("path").attr("stroke","black").attr("stroke-width",1).attr("marker-end", "url(#arrow)") .attr("d",`M ${rect_loss.x+rect_loss.width/2} ${rect_q.y+cs+margin.height-5} V ${rect_loss.y+rect_loss.height+5}`); // KL divergence const rect_cs = captions[0][1].node().getBBox(); svg.append("text").attr("x",(rect_cs.x+rect_cs.width+rect_p.x+(margin.width+cs)*3)/2).attr("y",rect_p.y+rect_p.height/2+4) .attr("text-anchor","middle").attr("dominant-baseline","hanging").attr("font-weight","bold") .text(`perplexity=${learndata[perplexity].perplexity.toFixed(1)}`); yield svg.node(); }34:T82f,--- ## 세부사항 * 유사도/거리 측정방법이 중요함 * 유클리디안 거리: 차원마다의 값차이의 제곱합, 공간상에 실제거리측정 * 코사인 유사도: 빈도나 비율의 연관도를 측정, 주로 문서간 유사도로 사용 * 이름이 t-distributed로 시작하는 이유 * 결과유사도로부터 결과확률분포를 계산시 스튜던트 t분포를 가정하기 때문 * 스튜던트 t분포의 두터운 꼬리 덕분에 오류수정의 단위가 크고 그렇기때문에 학습시간을 단축할수 있음 * Perplexity값의 설정 * 충분히 큰 데이터에 대해 기본값 **Perplexity=30.0**이 대부분 잘 동작함 * 주어진 데이터에 따라 5.0 ~ 50.0 값을 시험해보길 권장하나 큰 차이는 없음 * 본 예제는 극단적으로 작은수(10개)의 데이터를 위해 작은 Perplexity를 사용 * 고차원데이터의 시각화로 결국 사람이 보고 쓰기위한 기술 * 학습으로 얻은 특성벡터의 시각적 검증에 활용 * [GloVe: Global Vectors for Word Representation](https://nlp.stanford.edu/projects/glove/) * 먼저 GloVe라는 머신러닝알고리즘으로 각 단어의 특성벡터를 학습 * t-SNE를 통해 학습된 특성벡터의 관계적 우수성 입증(단어의 성별특성, 지역-우편번호 연관성 등등) * 사람의 의사결정과정에 지침으로 활용 * [개미투자공학 4장: 변동연관지도](https://observablehq.com/@humble-data-miner/personal-investment-engineering-ch-4) * 연관되어 움직이는 KRX 종목들을 가깝게 표시한 지도를 제안 * 종목간 독립성을 높여 포트폴리오의 안정성에 기여 * 주의점 * 인코딩용(다른 모델의 입력)으로 사용할수 없음 * 확률분포를 만들면서 생기는 비선형적 왜곡이 전체구조를 변형 * t-SNE 결과로부터 원래 데이터를 원복불가 * 결과의 불안정성 * 초기값에 따라 다른 구조와 다른 범위의 배치를 가짐 * 결과값에 척도가 없음35:[{"id":"b1334daeac6bc36893b6ee324806250fd0d39b30146bfafc94b9a098e1b42a1bee5d057acba1c89355e504200a4a88a6cf57fe7678bdafc510b5d36534238e10","href":"https://static.observableusercontent.com/files/b1334daeac6bc36893b6ee324806250fd0d39b30146bfafc94b9a098e1b42a1bee5d057acba1c89355e504200a4a88a6cf57fe7678bdafc510b5d36534238e10","name":"stock_correlation_example@1.json","type":"application/json","lastModified":1650959708214.171,"size":286323},{"id":"42da22f5dca5e88b9b6e24e76311896252f6a0cfbf1c0d6c497f91c73bd16696da27dba62326265dfcba0d224d359f570eccc8aa107e0c933b7af93e958ba54d","href":"https://static.observableusercontent.com/files/42da22f5dca5e88b9b6e24e76311896252f6a0cfbf1c0d6c497f91c73bd16696da27dba62326265dfcba0d224d359f570eccc8aa107e0c933b7af93e958ba54d","name":"tsne_learn@3.json","type":"application/json","lastModified":1650984762160.014,"size":223852}] 31:{"id":"96d430e6c64ea8ac","slug":"t-sne","title":"짧은 머신러닝 안내서: t-SNE(t-distributed Stochastic Neighbor Embedding)","thumbnail":"8fc64071cef1019fe595e0d262ab9e78e661c23000f694daad39a97065ab0848","access_level":"public","create_time":"$D2022-04-21T10:28:25.629Z","update_time":"$D2022-10-24T12:47:52.462Z","view_time":null,"first_public_time":"$D2022-04-26T17:37:17.743Z","has_unpublished_edits":null,"fork":false,"stars":2,"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":589,"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":1,"collection":{"id":"b886df04acb387aa","slug":"short-guide-to-machine-learning","title":"Short Guide to Machine Learning","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"짧은 머신러닝 안내서: t-SNE(t-distributed Stochastic Neighbor Embedding)","cells":[{"id":0,"value":"# 짧은 머신러닝 안내서: t-SNE(t-distributed Stochastic Neighbor Embedding)\n\n## \"볼수없는것을 그리는 공학\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"---\n## 볼수없는것?\n* 3차원세상의 사람에게 그이상의 고차원데이터는 특정 위치를 표시할수 없다\n * 1차원 데이터는 일직선상에 표시가능\n * 2차원 데이터는 평면상에 표시가능\n * 3차원 데이터는 공간상에 표시가능\n * n차원 데이터는 어디에 표시가능?\n* 아래 데이터는 [개미투자공학4장: 변동연관지도](https://observablehq.com/@humble-data-miner/personal-investment-engineering-ch-4)의 일부를 발췌\n * 일부 유의미한 연관관계를 갖는 10개의 종목에 대해\n * 1250일간의 가격변동을 수집 (각 종목이 1250차원의 데이터포인트)\n * 2017년 3월 24일 ~ 2022년 4월 26일\n * 협소한 부분특성은 볼수 있지만 전체적인 조망은 불가능","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"{\n let header = Object.keys(stocktable[0]);\n header.unshift(header.pop());\n let header_str = {\"color\":\"\",\"stockcode\":\"종목코드\",\"stockname\":\"종목명\",\"groupname\":\"업종(WICS)\"};\n let format_str = {\"color\": e=>html`

`};\n function ratio_div(e) {\n const rgba_alpha = Math.min(Math.abs(e)/0.02,1.0);\n const rgba_color = e>=0 ? `rgba(255,0,0,${rgba_alpha})` : `rgba(0,0,255,${rgba_alpha})`;\n return html`

${((Math.exp(e)-1)*100).toFixed(1)}

`;\n }\n header.forEach(x=>{\n if(x.slice(-1)=='d') {\n header_str[x]=\"+\"+x.replace(\"d\",\"일\");\n format_str[x]=ratio_div;\n }\n });\n return Inputs.table(stocktable,{\n columns: header,\n header: header_str,\n format: format_str,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"---\n## 볼수없는것을 그리는 방법?\n* 사람은 2차원 평면에 무언가 나타낼때 가장 왜곡없이 받아들일수 있다\n* 비슷한것은 가깝게 다른것은 멀게 가능한한 평면상에 눌러 배치하려면\n * 얼마나 비슷하고/가깝고 다른지/먼지 유사도(**similarity**)의 정의가 필요\n * 가까운것과 먼것을 얼마나 동질적으로 다룰지 무차별도(**perplexity**)를 설정\n * 한 점에서 다른 모든 점으로의 거리를 확률분포로 나타내면\n * Perplexity가 높을수록 무차별한 확률분포를 가짐\n * Perplexity가 낮을수록 차별화된 확률분포를 가짐\n * 초기 설정값으로 결과를 나타낼 평면에 2차원 점(**weight**)을 임의로 배치\n * **d**차원 원본데이터 **n**개 → 점간의 유사도(**n** × **n**) → 점간의 확률분포(**n** × **n**)\n * **2**차원 결과배치점 **n**개 → 점간의 유사도(**n** × **n**) → 점간의 확률분포(**n** × **n**)\n * **d**차원의 원본확률분포와 **2**차원의 결과확률분포간의 차이가 오류(**loss**)\n * [Kullback Leibler divergence](https://en.wikipedia.org/wiki/Kullback%E2%80%93Leibler_divergence) = 확률분포간의 차이를 수치화한것\n * 오류(**loss**)를 줄이는 방향으로 2차원 결과점의 배치(**weight**)를 학습\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"viewof perplexity = Inputs.range([0,learndata.length-1], {label: \"Perplexity\", step: 1, format:i=>learndata[i].perplexity.toFixed(1), placeholder: \"3.0,5.0,7.0,9.0\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof slide = Inputs.range([0,10], {label: \"학습완성률(%)\", step:1, format:x=> x*100/10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":575,"value":"---\n## 참고목록\n* t-SNE 저자 공식 웹페이지: [t-SNE - Laurens van der Maaten](https://lvdmaaten.github.io/tsne/)\n* t-SNE python 모듈: [sklearn.manifold.TSNE](https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html)\n* t-SNE Wikipedia 문서: [t-distributed stochastic neighbor embedding](https://en.wikipedia.org/wiki/T-distributed_stochastic_neighbor_embedding)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"---\n## 부록","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"stockdata = FileAttachment(\"stock_correlation_example@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"stocks = stockdata.stock","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"stocktable = {\n let stock_rows = [];\n const trunc = 20;\n const indices = Array.from({length: trunc*2}, (x, i) => i >= trunc ? stockdata.dates.length-trunc*2-1+i:i); \n for(const [i,stock] of Object.entries(stocks)) {\n let item = {stockcode:stock.stockcode,stockname:stock.stockname,groupname:stock.groupname};\n indices.forEach(i=>{item[(i+1)+\"d\"]=stock.prices[i];});\n item['color'] = d3.schemeCategory10[i];\n stock_rows.push(item);\n } \n return stock_rows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"series = stocks.map(x=>x.prices);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"learndata = FileAttachment(\"tsne_learn@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"