2e:null 2f:["$","title",null,{"children":"호기심 해결 in 주식시장: KRX 주간 투자그룹별 자산변동 | Humble Data Miner | Observable"}] 34:T663,--- ## KRX 투자그룹 분류

대그룹	소그룹	설명
${make_svg_invgrp_rect(0,12)}기관	${make_svg_invgrp_rect(0,12)}금융투자	증권사,선물사,투자자문사등이 자체자금으로 투자
	${make_svg_invgrp_rect(1,12)}보험	보험기관이 자산으로 투자
	${make_svg_invgrp_rect(2,12)}투신	자산운용사가 고객의 자금으로 투자
	${make_svg_invgrp_rect(3,12)}사모	소수 투자자의 자금을 모아 투자
	${make_svg_invgrp_rect(4,12)}은행	은행 자산으로 투자
	${make_svg_invgrp_rect(5,12)}기타금융	은행,보험,금투를 제외한 투자기관
	${make_svg_invgrp_rect(6,12)}연기금	국민연금기금을 재원으로 하는 투자기관
${make_svg_invgrp_rect(7,12)}기타법인	${make_svg_invgrp_rect(7,12)}기타법인	금융기관으로 분류되지않은 일반법인의 투자
${make_svg_invgrp_rect(8,12)}개인	${make_svg_invgrp_rect(8,12)}개인	일반투자자 + 전문투자자
${make_svg_invgrp_rect(9,12)}외국인	${make_svg_invgrp_rect(9,12)}외국인	등록외국인(외국증권사 포함)
${make_svg_invgrp_rect(9,12)}외국인	${make_svg_invgrp_rect(10,12)}기타외국인	외국인투자등록이 면제된 개인 또는 외국 법인

35:T2303,{ const height = 600; const margin = {left:50,top:70,right:50,bottom:20}; const svg = d3.create("svg").attr("viewBox", [0,0,width,height]); //svg.append("rect").attr("x",0).attr("y",0).attr("width",width).attr("height",height).attr("fill","none").attr("stroke","lightgrey"); const data = ivgrp_data; const series = data.series; const keys = data.keys; const types = ["f","v","s"]; const n_ticks = 10; const date_ticks_i = d3.range(n_ticks).map(i=>Math.floor(i*(data.dates.length-1)/(n_ticks-1))); const date_ticks = date_ticks_i.map(i=>data.dates[i]); const date_sl = d3_slider.sliderTop() .min(0).max(n_ticks-1).step(1).value(Math.floor(n_ticks/2)) .fill("#eee") .width(width-margin.left-margin.right) .tickFormat(i=>date_ticks[i].toISOString().split('T')[0]) .on("onchange", () => { update(); }); const g_date_sl = svg.append("g") .attr("class","date_slider") .attr("transform",`translate(${margin.left},${40})`) .call(date_sl); g_date_sl.selectAll("line.track-inset").attr("stroke","grey"); let curr_ctrl = 1; const button_label1 = keys; const button_label2 = ["기관","기타법인","개인","외국인"]; const button_status1 = button_label1.map(_=>1); const button_status2 = button_label2.map(_=>1); const button_index_map = [0,7,8,9]; svg.append("defs").append("clipPath") .attr("id", "clip-path-lines") // Unique ID for referencing .append("rect") // Example: a circular clipping region .attr("x", margin.left).attr("y", margin.top) .attr("width", width-margin.left-margin.right).attr("height",height-margin.top-margin.bottom); const g_lines_clip = svg.append("g").attr("clip-path", "url(#clip-path-lines)"); const g_lines = keys.map((k,ki)=> types.map((t,ti)=> g_lines_clip.append("path"))); const g_dots = keys.map((k,ki)=> types.map((t,ti)=> g_lines_clip.append("g"))); const g_ctrl1 = svg.append("g").attr("transform",`translate(${margin.left+10},${margin.top+4})`); const g_ctrl1_title = g_ctrl1.append("text") .attr("dominant-baseline","auto").attr("text-anchor","middle").attr("font-weight","bold") .attr("x",80/2).attr("dy",-8) .text("개별보기") .on('click', function(e,i) { curr_ctrl = 0; update(); }); const g_ctrl1_bg = g_ctrl1.append("rect") .attr("x",-4).attr("y",-4).attr("width",88).attr("height",14*keys.length+8).attr("stroke","grey").attr("fill","none"); const g_buttons1 = g_ctrl1.append("g").selectAll("rect") .data(d3.range(button_label1.length)) .join("rect") .attr("stroke",i=>colors[i]).attr("fill",i=>colors[i]) .attr("x",0).attr("y",i=>14*i+1).attr("width",12).attr("height",12) .on('click', function(e,i) { button_status1[i] = (button_status1[i]+1)%3; update(); }); const legend1 = g_ctrl1.append("g").selectAll("text") .data(d3.range(button_label1.length)) .join("text") .attr("x",14+2).attr("y",i=>14*(i+1)).attr("dy",-1).attr("font-size","smaller") .text(i=>button_label1[i]); const g_ctrl1_radio = g_ctrl1.append("rect") .attr("x",-4).attr("y",-4).attr("width",88).attr("height",14*keys.length+8) .attr("fill","grey").attr("stroke","none").attr("opacity",0.5) .on('click', function(e,i) { curr_ctrl = 0; update(); }); const g_ctrl2 = svg.append("g").attr("transform",`translate(${margin.left+88+10},${margin.top+4})`); const g_ctrl2_title = g_ctrl2.append("text") .attr("dominant-baseline","auto").attr("text-anchor","middle").attr("font-weight","bold") .attr("x",80/2).attr("dy",-8) .text("모아보기") .on('click', function(e,i) { curr_ctrl = 1; update(); }); const g_ctrl2_bg = g_ctrl2.append("rect") .attr("x",-4).attr("y",-4).attr("width",88).attr("height",14*keys.length+8).attr("stroke","grey").attr("fill","none"); const g_buttons2 = g_ctrl2.append("g").selectAll("rect") .data(d3.range(button_label2.length)) .join("rect") .attr("stroke",i=>colors[button_index_map[i]]).attr("fill",i=>colors[button_index_map[i]]) .attr("x",0).attr("y",i=>14*button_index_map[i]+1).attr("width",12).attr("height",12) .on('click', function(e,i) { button_status2[i] = (button_status2[i]+1)%3; update(); }); const legend2 = g_ctrl2.append("g").selectAll("text") .data(d3.range(button_label2.length)) .join("text") .attr("x",14+2).attr("y",i=>14*(button_index_map[i]+1)).attr("dy",-1).attr("font-size","smaller") .text(i=>button_label2[i]); const g_ctrl2_radio = g_ctrl2.append("rect") .attr("x",-4).attr("y",-4).attr("width",88).attr("height",14*keys.length+8) .attr("fill","grey").attr("stroke","none").attr("opacity",0.5) .on('click', function(e,i) { curr_ctrl = 1; update(); }); const g_sdate = svg.append("text") .attr("text-anchor","start").attr("font-weight","bold") .attr("x",margin.left+10).attr("y",height-margin.bottom-10); const g_x = svg.append("g").attr("transform", `translate(0,${height-margin.bottom})`); const g_yl = svg.append("g").attr("transform",`translate(${margin.left},0)`); const g_yr = svg.append("g").attr("transform",`translate(${width-margin.right},0)`); function update() { const d_i = date_ticks_i[date_sl.value()]; function rebase_fvs(series,d_i) { const base = series[d_i]; const rebase_arr = (b,r) => r.map((v,i)=>v-b[i]); const rebase = (base,row) => ({d:row.d,f:rebase_arr(base.f,row.f),v:rebase_arr(base.v,row.v),s:rebase_arr(base.s,row.s)}); return series.map(row=>rebase(base,row)); } const series = rebase_fvs(curr_ctrl==0?ivgrp_data.series:ivgrp_data.aseries,d_i); const dates = ivgrp_data.dates.slice(d_i); const ext = { date: d3.extent(dates), total: d3.extent(series.slice(d_i).map(d=>[d.f,d.v,d.s]).flat(Infinity)) }; const x = d3.scaleTime().domain(ext.date).range([margin.left, width-margin.right]); //x-axis of date-time const y = d3.scaleLinear().domain(ext.total).range([height-margin.bottom,margin.top]); const drawdata = data.keys.map((k,ki)=> [ {ki:ki,line:d3.line().x(d=>x(d.d)).y(d=>y(d.f[ki])), color:colors[ki].darker(), width:1}, {ki:ki,line:d3.line().x(d=>x(d.d)).y(d=>y(d.v[ki])), color:colors[ki].brighter(0.5), width:1}, {ki:ki,line:d3.line().x(d=>x(d.d)).y(d=>y(d.s[ki])), color:colors[ki], width:2}, ]); g_lines.forEach((gs,ki)=> gs.forEach((g,ti)=> { const drawitem = drawdata[ki][ti]; g.transition().duration(anim_step_ms).attr("d",drawitem.line(series)) .attr("stroke",drawitem.color).attr("stroke-width",drawitem.width).attr("fill","none"); })); g_dots.forEach((gs,ki)=> gs.forEach((g,ti)=> { const drawitem = drawdata[ki][ti]; g.selectAll("circle") .data(series) .join("circle") .transition().duration(anim_step_ms) .attr("cx",d=>x(d.d)).attr("cy",d=>y(d[types[ti]][ki])).attr("r",drawitem.width) .attr("fill",drawitem.color).attr("stroke","none"); })); const date_formatter = (d=>`${d.getFullYear()%100}.${d.getMonth()+1}.${d.getDate()}`); g_x.transition().duration(anim_step_ms).call(d3.axisBottom(x).tickFormat(date_formatter)); g_yl.transition().duration(anim_step_ms).call(d3.axisLeft(y).ticks(20).tickFormat(d=>`${krw_format.format(d)}`)); g_yr.transition().duration(anim_step_ms).call(d3.axisRight(y).ticks(20).tickFormat(d=>`${krw_format.format(d)}`)); g_ctrl1_title.attr("fill",curr_ctrl==0?"black":"grey"); g_ctrl2_title.attr("fill",curr_ctrl==1?"black":"grey"); g_ctrl1_radio.attr("visibility",curr_ctrl==0?"hidden":"visible"); g_ctrl2_radio.attr("visibility",curr_ctrl==1?"hidden":"visible"); const button_status = curr_ctrl==0 ? button_status1 : button_status2.reduce( (a,c,i)=>{ a[button_index_map[i]]=c; return a; },Array.from({length:button_status1.length},_=>0)); g_lines.forEach((gline,i)=>{ gline[0].attr("visibility",(button_status[i]%3)>1?"visible":"hidden"); gline[1].attr("visibility",(button_status[i]%3)>1?"visible":"hidden"); gline[2].attr("visibility",(button_status[i]%3)>0?"visible":"hidden"); }); g_dots.forEach((gdot,i)=>{ gdot[0].attr("visibility",(button_status[i]%3)>1?"visible":"hidden"); gdot[1].attr("visibility",(button_status[i]%3)>1?"visible":"hidden"); gdot[2].attr("visibility",(button_status[i]%3)>0?"visible":"hidden"); }); g_buttons1.attr("fill-opacity",i=>button_status1[i]>0?1:0); g_buttons1.attr("fill",i=>button_status1[i]>1?`url(#mixed${i})`:colors[i]); g_buttons2.attr("fill-opacity",i=>button_status2[i]>0?1:0); g_buttons2.attr("fill",i=>button_status2[i]>1?`url(#mixed${button_index_map[i]})`:colors[button_index_map[i]]); g_sdate.text(`누적시작일:${date_ticks[date_sl.value()].toISOString().split("T")[0]}`); } update(); return svg.node(); }36:T6e0,

## (일반론) 모든 투자그룹의 총자산 합계 = 0 * 시장 내 매매거래 = 자산을 이전하는 행위 * 부동산 시장, 암호화폐 시장 등 모든 형태의 시장에 동일하게 적용 * 주식 시장의 차별점 * 배당이라는 추가적이고 직접적 자산증식 요인 * 기업의 성장과 생산의 분배 그리고 재투자로 이어지는 경제성장 순환구조 ## 투자그룹별 현상황 요약 (2015-01-02 ~ 2025-09-12) * ${make_svg_invgrp_rect(0,12)}기관: ${make_svg_invgrp_rect(8,12)}개인과 반대로 움직이는 경향, 전체적인 (-)경향 * ${make_svg_invgrp_rect(0,12)}금융투자: 기관중에서 유일하게 지속적 매수, 전체적으로 약한 (+) 경향 * ${make_svg_invgrp_rect(6,12)}연기금: 2021년 기점으로 순매수→순매도, 2025년부터 순매수 전환, 성과 미미 * ${make_svg_invgrp_rect(2,12)}투신: 지속적인 매도세로 자산운용사 고객 자금의 순유출 추정, 전체적인 (-)경향 * ${make_svg_invgrp_rect(1,12)}보험, ${make_svg_invgrp_rect(3,12)}사모, ${make_svg_invgrp_rect(4,12)}은행, ${make_svg_invgrp_rect(5,12)}기타금융: 투자금 규모만 다른 지속적 매도세, 성과 미미 * ${make_svg_invgrp_rect(7,12)}기타법인: 2021년까지 벌어놓은 장기투자 성과를 유지하기에 급급한 상황 * ${make_svg_invgrp_rect(8,12)}개인: 2020년부터 시장의 큰손으로 변모 후 외국인의 호구화, 전체적인 (-)경향 * ${make_svg_invgrp_rect(9,12)}외국인: 2021년부터 대체로 순매도하며 개인의 자산을 이전받음, 전체적인 (+)경향 * ${make_svg_invgrp_rect(10,12)}기타외국인: 무시할만큼 미미한 영향력37:T4d4,ivgrp_data = { const series = raw_data.map(row=>({ d:new Date(row.daydate), f:d3.range(ivgrps.length).map(i=>row[`F${i+1}`]), v:d3.range(ivgrps.length).map(i=>row[`V${i+1}`]), s:d3.range(ivgrps.length).map(i=>row[`F${i+1}`]+row[`V${i+1}`]), })); const agg_ind = [0,0,0,0,0,0,0,1,2,3,3]; const aseries = series.map(row=>{ const func_agg_sum = arr => [d3.sum(arr.slice(0,7)), d3.sum(arr.slice(7,8)), d3.sum(arr.slice(8,9)), d3.sum(arr.slice(9,11))]; const agg_sum = {f:func_agg_sum(row.f),v:func_agg_sum(row.v),s:func_agg_sum(row.s)}; return { d: row.d, f: row.f.map((_,i)=>agg_sum.f[agg_ind[i]]), v: row.v.map((_,i)=>agg_sum.v[agg_ind[i]]), s: row.s.map((_,i)=>agg_sum.s[agg_ind[i]]) }; }); const dates = series.map(d=>d.d); const ext = { date:d3.extent(dates), fix:[d3.min(series,d=>d3.min(d.f)),d3.max(series,d=>d3.max(d.f))], var:[d3.min(series,d=>d3.min(d.v)),d3.max(series,d=>d3.max(d.v))], sum:[d3.min(series,d=>d3.min(d.s)),d3.max(series,d=>d3.max(d.s))], }; ext.total = [Math.min(ext.fix[0],ext.var[0],ext.sum[0]),Math.max(ext.fix[1],ext.var[1],ext.sum[1])]; return {keys:ivgrps,series:series,aseries:aseries,ext:ext,dates:dates}; }38:[] 32:{"id":"1702431a159494b4","slug":"krx-asset-change-of-investor-groups-on-weekly-basis","title":"호기심 해결 in 주식시장: KRX 주간 투자그룹별 자산변동","thumbnail":"40ea23042b451c052a3b88cbda0742fbe459a5a6582768446682196a00b8d3f2","access_level":"public","create_time":"$D2025-08-24T22:39:47.948Z","update_time":"$D2025-11-10T03:55:13.982Z","view_time":null,"first_public_time":"$D2025-09-15T05:18:32.952Z","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":623,"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":"ffed4a92f8068ba7","slug":"myth-buster-in-person","title":"Myth Buster in Person","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"호기심 해결 in 주식시장: KRX 주간 투자그룹별 자산변동","cells":[{"id":0,"value":"# 호기심 해결 in 주식시장:
KRX 주간 투자그룹별 자산변동\n## 매주 금요일 밤, 한 주간 결과를 자동으로 갱신 (최근 업데이트: ${dates[dates.length-1].toISOString().split('T')[0]})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"---\n## 투자그룹별 고정자산(F), 변동자산(V), 총자산(S)의 계산\n\n* 데이터 원본: [KRX 정보데이터시스템 \\[12009\\] 투자자별 거래실적(개별종목)](http://data.krx.co.kr/contents/MDC/MDI/mdiLoader/index.cmd?menuId=MDC0201020302)\n * 각 종목마다 투자그룹별 하루 순매수 **거래금액(A)** 및 순매수 **거래량(C)** 제공\n * **절대량**이 아닌 **변동량**만을 제공 → 특정 시점으로부터 **상대적인 비교**만 가능\n* (투자그룹별) 데이터 가공 #1: 개별종목의 **A,C**에서 개별종목의 **F,V**를 얻는 과정\n * 누적 시작일: 기준값을 0으로 설정(A₀=0, C₀=0)\n * 본 자료는 2015년 1월 2일을 누적 시작일로 설정\n * **고정자산 F_n** = -(A₁ + A₂ + ... + A_n)\n * **변동자산 V_n** = (C₁ + C₂ + ... + C_n) × P_n, 여기서 P_n은 n일째 종가\n * **총자산 S_n** = F_n + V_n\n* (투자그룹별) 데이터 가공 #2: 개별종목의 **F,V,S**에서 시장전체의 **F,V,S**를 얻는 과정\n * n번째 날 모든 종목의 **F_n, V_n, S_n**을 합산해 시장전체의 **ΣF_n, ΣV_n, ΣS_n**을 계산","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"

\n## 투자그룹별 자산변동 그래프\n* 하나의 투자그룹에 대해 위에서 계산한\n * **고정자산**은 얇은 진한색 선으로 표시\n * **변동자산**은 얇은 연한색 선으로 표시\n * **총자산**은 두꺼운 중간색 선으로 표시\n* 사용법\n * **상단 슬라이더**로 **누적시작일**(투자그룹별 자산을 0으로 초기화) 변경 가능 \n * **모아보기** 혹은 **개별보기** 선택: **대그룹(4종)** 혹은 **소그룹(11종)**으로 표시 변경\n * **개별그룹 사각형 클릭**: 총자산만 표시, 고정/가변/총자산 모두 표시, 숨기기로 변경\n * **고정자산**을 기준으로 **순매수,순매도**를 판단하는것이 편함\n * **고정자산**이 줄어들었다면 **순매수**, **고정자산**이 늘어났다면 **순매도** 상황","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":620,"value":"---\n## 부연설명 동영상\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":568,"value":"function fetch_krx_weekly_invgrps() {\n const url = `https://www.humbledataminer.com/api/krx-weekly-invgrps`;\n return fetchp(url)\n .then(response => {\n if (!response.ok) { throw new Error(response.status); }\n console.log(response);\n return response.json();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"raw_data = await fetch_krx_weekly_invgrps();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"dates = ivgrp_data.dates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"ivgrps = [\"금융투자\", \"보험\", \"투신\", \"사모\", \"은행\", \"기타금융\", \"연기금\", \"기타법인\", \"개인\", \"외국인\", \"기타외국인\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"colors = d3.schemeTableau10.concat(d3.schemeCategory10[8]).map(c=>d3.color(c))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"krw_format = new Intl.NumberFormat(\"ko-KR\",\n {\n style: \"currency\",\n currency: \"KRW\",\n notation: 'compact',\n minimumFractionDigits:0,\n maximumFractionDigits:1,\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"anim_step_ms = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n const height = 20;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n const defs = svg.append(\"defs\");\n colors.forEach((c,i)=>{\n const lg = defs.append(\"linearGradient\")\n .attr(\"id\", `mixed${i}`).attr(\"x1\",\"0%\").attr(\"x2\",\"100%\").attr(\"y1\",\"0%\").attr(\"y2\",\"100%\");\n lg.append(\"stop\").attr(\"offset\",\"33%\").style(\"stop-color\", c.darker());\n lg.append(\"stop\").attr(\"offset\",\"33%\").style(\"stop-color\", c);\n lg.append(\"stop\").attr(\"offset\",\"66%\").style(\"stop-color\", c);\n lg.append(\"stop\").attr(\"offset\",\"66%\").style(\"stop-color\", c.brighter(0.5));\n lg.append(\"stop\").attr(\"offset\",\"100%\").style(\"stop-color\", c.brighter(0.5));\n });\n \n d3.range(colors.length).forEach((c,i)=>{\n svg.append(\"rect\").attr(\"x\",i*20+1).attr(\"y\",1).attr(\"width\",19).attr(\"height\",19).attr(\"fill\",`url(#mixed${i})`)\n });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"function make_svg_invgrp_rect(grpidx,sz) {\n const svg = d3.create(\"svg\").attr(\"width\",sz).attr(\"height\",sz);\n svg.append(\"rect\").attr(\"width\",sz).attr(\"height\",sz).attr(\"fill\",`url(#mixed${grpidx})`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"d3_slider=require(\"d3-simple-slider\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"