2d:null 2e:["$","title",null,{"children":"호기심해결 in 주식시장: 2023 국장 결산 | Humble Data Miner | Observable"}] 33:T2c59,{ const height = 350; const svg_width = width/2-4; function make_composite_svg() { const data = compret_data; const rbar_width = 30; const margin = {left:20,top:10,right:10,bottom:20}; const linechart_width = svg_width-rbar_width*data.keys.length-margin.right; const svg = d3.create("svg").attr("width",svg_width).attr("height",height); svg.append("rect").attr("x",0).attr("y",0).attr("width",svg_width).attr("height",height).attr("fill","none").attr("stroke","lightgrey"); const x = d3.scaleTime().domain(data.ext.date).range([margin.left, linechart_width-margin.right]); //x-axis of date-time const y1 = d3.scaleLinear().domain(data.ext.line).range([height-margin.bottom,margin.top]); const y2 = d3.scaleLog().domain(data.ext.ret).range([height-margin.bottom, margin.top]); const line = d3.line().x(d=>x(d.x)).y(d=>y1(d.y)); svg.append("g").selectAll("path") .data(data.lines) .join("path") .attr("stroke",(_,i)=>d3.schemeCategory10[i]).attr("fill","none") .attr("d",d=>line(d)); const gret = svg.append("g").attr("transform",`translate(${linechart_width},0)`); data.rets.map((ret,i)=>{ const color = d3.color(d3.schemeCategory10[i]); return gret.append("g").attr("stroke",color).attr("stroke-opacity",0.4).attr("fill","none").selectAll("line") .data(ret) .join("line") .attr("x1",i*rbar_width).attr("x2",(i+1)*rbar_width).attr("y1",d=>y2(d.r)).attr("y2",d=>y2(d.r)); }); gret.append("g").attr("font-size",12).selectAll("text") .data(data.stats) .join("text") .attr("text-anchor","start").attr("dominant-baseline","auto") .attr("x",(_,i)=>i*rbar_width).attr("y",d=>y2(d.amean)) .text(d=>d.amean.toFixed(3)); gret.append("g").attr("font-size",12).selectAll("text") .data(data.stats) .join("text") .attr("text-anchor","end").attr("dominant-baseline","hanging") .attr("x",(_,i)=>(i+1)*rbar_width).attr("y",d=>y2(d.gmean)) .text(d=>d.gmean.toFixed(3)); gret.append("g").attr("font-size",12).selectAll("text") .data(["NYSE","NASDAQ","KOSPI","KOSDAQ","S&P500","DOW30"]) .join("text") .attr("text-anchor","middle").attr("dominant-baseline","auto") .attr("x",(_,i)=>(i+0.5)*rbar_width).attr("y",(d,i)=>y2(data.stats[i].max)) .text(d=>d); svg.append("g").attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d=>`${d.getFullYear()%100}.${d.getMonth()+1}`)); return svg; } function make_ktss_svg() { const margin = {left:24,top:10,right:24,bottom:20}; const svg = d3.create("svg").attr("width",svg_width).attr("height",height); svg.append("rect").attr("x",0).attr("y",0).attr("width",svg_width).attr("height",height).attr("fill","none").attr("stroke","lightgrey"); const data = ktss_data; const x = d3.scaleTime().domain(data.ext.date).range([margin.left, svg_width-margin.right]); //x-axis of date-time const y1 = d3.scaleLinear().domain(data.ext.kosuni).range([height-margin.bottom,margin.top]); const y2 = d3.scaleLinear().domain(data.ext.ktss).range([height-margin.bottom, margin.top]); const kosuni_line = d3.line().x(d=>x(d.date)).y(d=>y1(d.kosuni)); svg.append("path").attr("stroke","black").attr("fill","none").attr("stroke-width",3).attr("d",kosuni_line(data.lines)); svg.append("path").attr("stroke","yellow").attr("fill","none").attr("stroke-width",2).attr("d",kosuni_line(data.lines)); svg.append("g").selectAll("path") .data(data.lines) .join("path") .attr("stroke","red").attr("fill","none").attr("stroke-opacity",0.5) .attr("d",d=>`M ${x(d.date)} ${y2(0)} V ${y2(d.ktssp)}`); svg.append("g").selectAll("path") .data(data.lines) .join("path") .attr("stroke","blue").attr("fill","none").attr("stroke-opacity",0.5) .attr("d",d=>`M ${x(d.date)} ${y2(0)} V ${y2(-d.ktssn)}`); svg.append("path").attr("stroke","grey").attr("fill","none").attr("stroke-dasharray","2 2") .attr("d",`M ${margin.left} ${y2(0)} H ${svg_width-margin.right}`) svg.append("path").attr("stroke",d3.color("red").darker()).attr("fill","none").attr("stroke-width",2).attr("stroke-dasharray","2 2") .attr("d",`M ${margin.left} ${y2(data.prevstats[0])} H ${svg_width-margin.right}`) svg.append("path").attr("stroke",d3.color("blue").darker()).attr("fill","none").attr("stroke-width",2).attr("stroke-dasharray","2 2") .attr("d",`M ${margin.left} ${y2(-data.prevstats[1])} H ${svg_width-margin.right}`) svg.append("text") .attr("text-anchor","start").attr("dominant-baseline","hanging").attr("font-weight","bold") .attr("x",margin.left).attr("y",y2(data.prevstats[0])).attr("fill","black").attr("dy",4) .text(`지난5년간KTSS(+)평균=${data.prevstats[0].toFixed(2)}`); svg.append("text") .attr("text-anchor","start").attr("dominant-baseline","auto").attr("font-weight","bold") .attr("x",margin.left).attr("y",y2(-data.prevstats[1])).attr("fill","black").attr("dy",-4) .text(`지난5년간KTSS(-)평균=${data.prevstats[1].toFixed(2)}`); svg.append("g").attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d=>`${d.getFullYear()%100}.${d.getMonth()+1}`)); svg.append("g").attr("transform",`translate(${margin.left},0)`).call(d3.axisLeft(y2).tickFormat(d=>Math.abs(d))); svg.append("g").attr("transform",`translate(${svg_width-margin.right},0)`).call(d3.axisRight(y2).tickFormat(d=>Math.abs(d))); return svg; } function make_dailyivgrp_svg() { const margin = {left:40,top:10,right:40,bottom:20}; const svg = d3.create("svg").attr("width",svg_width).attr("height",height); svg.append("rect").attr("x",0).attr("y",0).attr("width",svg_width).attr("height",height).attr("fill","none").attr("stroke","lightgrey"); const data = daily_ivgrp_data; const series = data.series; const keys = data.keys; const types = ["f","v","s"]; const x = d3.scaleTime().domain(data.ext.date).range([margin.left, svg_width-margin.right]); //x-axis of date-time const y = d3.scaleLinear().domain(data.ext.total).range([height-margin.bottom,margin.top]); const drawdata = data.keys.map((k,ki)=> [ {line:d3.line().x(d=>x(d.d)).y(d=>y(d.f[ki])), color:colors[ki].darker(), width:1}, {line:d3.line().x(d=>x(d.d)).y(d=>y(d.v[ki])), color:colors[ki].brighter(0.5), width:1}, {line:d3.line().x(d=>x(d.d)).y(d=>y(d.s[ki])), color:colors[ki], width:2}, ]); const button_status = keys.map(_=>1); const lines = keys.map((k,ki)=> types.map((t,ti)=> { const drawitem = drawdata[ki][ti]; return svg.append("path") .attr("d",drawitem.line(series)) .attr("stroke",drawitem.color).attr("stroke-width",drawitem.width).attr("fill","none") .attr("visibility","visible") })); const gcontrol = svg.append("g").attr("transform",`translate(${margin.left+4},${margin.top+4})`); const buttons = gcontrol.selectAll("rect") .data(d3.range(keys.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_status[i] = (button_status[i]+1)%3; update_lines_and_buttons(); }); const legend = gcontrol.selectAll("text") .data(d3.range(keys.length)) .join("text") .attr("x",14+2).attr("y",i=>14*(i+1)).attr("dy",-1).attr("font-size","smaller") .text(i=>keys[i]); function update_lines_and_buttons() { 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"); }); buttons.attr("fill-opacity",i=>button_status[i]>0?1:0); buttons.attr("fill",i=>button_status[i]>1?`url(#mixed${i})`:colors[i]); } update_lines_and_buttons(); svg.append("g").attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d=>`${d.getFullYear()%100}.${d.getMonth()+1}`)); svg.append("g").attr("transform",`translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d=>`${(d/1000000000000).toFixed(0)}조` )); svg.append("g").attr("transform",`translate(${svg_width-margin.right},0)`) .call(d3.axisRight(y).tickFormat(d=>`${(d/1000000000000).toFixed(0)}조` )); svg.append("text") .attr("text-anchor","start").attr("font-size","small").attr("font-weight","bold") .attr("x",margin.left+10).attr("y",height-margin.bottom-10).text(`누적기준일:${data.dates[0].toISOString().split("T")[0]}`); return svg; } function make_stockivgrp_svg() { const margin = {left:40,top:10,right:40,bottom:20}; const svg = d3.create("svg").attr("width",svg_width).attr("height",height); svg.append("rect").attr("x",0).attr("y",0).attr("width",svg_width).attr("height",height).attr("fill","none").attr("stroke","lightgrey"); const data = stock_ivgrp_data; const kitems = 15; const filtered = data.rank.slice(0,kitems).concat(data.rank.slice(-kitems)); const x = d3.scaleBand() .domain(d3.range(filtered.length)).range([margin.left, svg_width-margin.right]).paddingInner(0.2).paddingOuter(0.2); const y = d3.scaleLinear().domain(data.ext.val).range([height-margin.bottom,margin.top]); svg.append("g").attr("transform",`translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d=>`${(d/1000000000000).toFixed(1)}조` )); svg.append("g").attr("transform",`translate(${svg_width-margin.right},0)`) .call(d3.axisRight(y).tickFormat(d=>`${(d/1000000000000).toFixed(1)}조`)); svg.append("path").attr("stroke","black").attr("fill","none") .attr("d",`M ${margin.left} ${y(0)} H ${svg_width-margin.right}`); svg.append("g").selectAll("rect") .data(filtered) .join("rect") .attr("fill",f=>colors[f.grp]).attr("stroke","none").attr("rx",2) .attr("x",(f,i)=>x(i)).attr("y",f=>y(f.val>=0?f.val:0)) .attr("width",x.bandwidth()).attr("height",f=>Math.abs(y(f.val)-y(0))); svg.append("g").selectAll("text") .data(filtered) .join("text") .attr("font-size",12) .attr("transform",(f,i)=>`translate(${x(i)+(f.val>=0?0:x.bandwidth())},${y(0)+(f.val>=0?2:-2)}) rotate(${f.val>=0?90:-90})`) .text(f=>`(${f.sc})${f.nm}`); svg.append("text") .attr("text-anchor","middle").attr("font-size","small").attr("font-weight","bold") .attr("x",svg_width/2).attr("y",20).text(`누적기준일(${data.firstdate.toISOString().split("T")[0]}) ~ 현재(${data.resultdate.toISOString().split("T")[0]})`); return svg; } return html`

${make_composite_svg().node()}

${make_ktss_svg().node()}

${make_dailyivgrp_svg().node()}

${make_stockivgrp_svg().node()}

`; }34:[{"id":"48d1c1014f7eb9e9932f8b9429a19e96920d33bf4b013f5e203be3d97be1e4d5740d9f4087f336fe33de8f28d000b6a4f1aaadc130825349ecabdcf69c8b0edb","href":"https://static.observableusercontent.com/files/48d1c1014f7eb9e9932f8b9429a19e96920d33bf4b013f5e203be3d97be1e4d5740d9f4087f336fe33de8f28d000b6a4f1aaadc130825349ecabdcf69c8b0edb","name":"2023_krx_wrapup.json","type":"application/json","lastModified":1703822778577.218,"size":334781},{"id":"5743e3f0ec6af4ea25a4918902e2fecc0126d8abc53f14e0d3893650208c223014323a33c9d7b4ffa6a9c74de0585b5191b4104ec04d72381fc2bda743af26cd","href":"https://static.observableusercontent.com/files/5743e3f0ec6af4ea25a4918902e2fecc0126d8abc53f14e0d3893650208c223014323a33c9d7b4ffa6a9c74de0585b5191b4104ec04d72381fc2bda743af26cd","name":"2023_krx_wrapup@1.json","type":"application/json","lastModified":1703837004903.574,"size":334750},{"id":"d6044c020b5a45a45aa41be7a726f533fb149831339f014dc88331f72ff648e954578ae6e8a35dff32493d0b951f5771609784f044160d2c8953e0838b86dc93","href":"https://static.observableusercontent.com/files/d6044c020b5a45a45aa41be7a726f533fb149831339f014dc88331f72ff648e954578ae6e8a35dff32493d0b951f5771609784f044160d2c8953e0838b86dc93","name":"2023_krx_wrapup@2.json","type":"application/json","lastModified":1703841407182.025,"size":334743}] 31:{"id":"65cfbe695a6f6625","slug":"2023-krx-wrapup","title":"호기심해결 in 주식시장: 2023 국장 결산","thumbnail":"c8b214741886cceddb28fe3fcd0194b231cc77aaa7c840d23ee9eb03636d2e2d","access_level":"public","create_time":"$D2023-12-29T03:53:25.141Z","update_time":"$D2023-12-29T13:21:23.738Z","view_time":null,"first_public_time":"$D2023-12-29T03:53:25.141Z","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":384,"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":{"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 주식시장: 2023 국장 결산","cells":[{"id":0,"value":"# 호기심해결 in 주식시장: 2023 국장 결산\n\n이전에 다뤘던 주제들의 올해 결과를 살펴봅니다","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"\n

\n${md`

미장과 국장의 수익률 분석

\n* 자세한 내용은 [호기심 해결 in 주식시장: 미장? 국장? 절대적우위가 있을까?](https://observablehq.com/@humble-data-miner/myth-buster-in-finance-comparison-among-us-kr-stock-markets) 참고\n* 대략 살펴보면 올해도 국장은 미장보다 많이 못하다\n * NASDAQ >> DOW30,S&P500 > KOSDAQ > KOSPI\n * NASDAQ은 변동성이 크지만 기대수익률이 높다\n * KOSDAQ은 변동성도 크고 기대수익률도 낮다\n * KOSPI는 그냥 기대수익률이 낮다\n`}\n

\n${\n md`## 국장의 극단성 측정\n* 자세한 내용은 [개미투자공학 번외편: 첨도(Kurtosis)로 살펴본 국장의 극단성](https://observablehq.com/@humble-data-miner/krx-stock-market-analysis-using-kurtosis) 참고\n* 대략 살펴보면 올해 주기적으로 냉탕과 온탕 기간을 오갔다\n * 냉탕(Kurtosis가 낮음): 종목들의 상승/하락률이 고르게 분포\n * 온탕(Kurtosis가 높음): 일부종목들에 상승/하락이 편중\n * 특히 상승에 대한 온탕기간이 길게는 2달동안 지속적으로 발생\n * 온탕기간이 길어질수록 시장에 남는건 단기투기세력\n `\n}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"\n

\n${md`## 투자주체(개인,외국인,기관등)에 따른 투자성과 비교\n \n* 자세한 내용은 [호기심 해결 in 주식시장: 국장에서 외국인이 최선, 개인은 봉일까?](https://observablehq.com/@humble-data-miner/myth-buster-in-finance-gain-and-loss-of-krx-investor-groups-2022) 참고\n* 전체적으로 개인의 손실이 외국인의 이익으로 이전\n* 올해초(2023-01-02)의 자산을 0으로 잡았을때 현재 결과(2023-12-28)는\n * 개인은 약 5조의 손해를 보는중\n * 외국인은 약 5조의 이익을 보는중\n * 그밖에 기타법인이 약 1조의 이익상태, 그외의 투자주체는 미미\n`}\n

\n${\n md`## 투자주체별 Top10 이익,손실종목\n* 전체적으로 개인의 손실/이익이 외국인의 이익/손실로 나타남\n * 개인 → 외국인: 삼성전자, SK하이닉스, 기아\n * 외국인 → 개인: 에코프로, 에코프로머티, POSCO홀딩스\n * 문제는 개인이 손해를 보며 교환하고 있다는것\n * 다른 주체들의 주목할만한 결과?\n * 셀트리온으로 이익을 보고있는 기타법인\n`\n}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"---\n## 부연설명 동영상\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"_2023_krx_wrapup = FileAttachment(\"2023_krx_wrapup@2.json\").json({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"compret_data = {\n const raw_data = _2023_krx_wrapup.composite_return;\n const keys = [\"NYA\", \"IXIC\", \"KS11\", \"KQ11\", \"DJI\", \"GSPC\"];\n const lines = keys.map((k,ki)=> raw_data[k].price.map((p)=>({x:new Date(p[0]),y:p[1]/raw_data[k].price[0][1]})));\n const rets = keys.map((k,ki)=> raw_data[k].return.map((r)=>({sd:new Date(r[0]),ed:new Date(r[1]),r:r[2]})));\n function gmean(arr) { return Math.exp(d3.sum(arr.map(d=>Math.log(d)))/arr.length); }\n const stats = rets.map(ret=> ({\n amean:d3.mean(ret,d=>d.r),gmean:gmean(ret.map(d=>d.r)),max:d3.max(ret,d=>d.r)}) );\n const ext = {\n date:[d3.min(lines,line=>d3.min(line,pt=>pt.x)), d3.max(lines,line=>d3.max(line,pt=>pt.x))],\n line:[d3.min(lines,line=>d3.min(line,pt=>pt.y)), d3.max(lines,line=>d3.max(line,pt=>pt.y))],\n ret:[d3.min(rets,ret=>d3.min(ret,pt=>pt.r)), d3.max(rets,ret=>d3.max(ret,pt=>pt.r))]\n };\n return {lines:lines,rets:rets,stats:stats,keys:keys,ext:ext};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"ktss_data = {\n const raw_data = _2023_krx_wrapup.daily_ktss.map(d=>({date:new Date(d[0]),kosuni:d[1],ktssp:d[2],ktssn:d[3]}));\n const prev_data = raw_data.filter(d=>d.date.getFullYear()<2023);\n const prev_stats = [d3.mean(prev_data,d=>d.ktssp),d3.mean(prev_data,d=>d.ktssn)];\n const this_data = raw_data.filter(d=>d.date.getFullYear()>=2023);\n const ext = {\n date:d3.extent(this_data,d=>d.date),\n kosuni:d3.extent(this_data,d=>d.kosuni),\n ktss:[d3.min(this_data,d=>-d.ktssn),d3.max(this_data,d=>d.ktssp)]\n };\n return {lines:this_data,prevstats:prev_stats,ext:ext};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"daily_ivgrp_data = {\n const raw_data = _2023_krx_wrapup.date_invest.map(d=>({d:new Date(d.d),f:d.f,v:d.v,s:d.s}));\n const dates = raw_data.map(d=>new Date(d.d));\n const keys = _2023_krx_wrapup.investgrps;\n const ext = {\n date:d3.extent(dates),\n fix:[d3.min(raw_data,d=>d3.min(d.f)),d3.max(raw_data,d=>d3.max(d.f))],\n var:[d3.min(raw_data,d=>d3.min(d.v)),d3.max(raw_data,d=>d3.max(d.v))],\n sum:[d3.min(raw_data,d=>d3.min(d.s)),d3.max(raw_data,d=>d3.max(d.s))],\n };\n ext.total = [Math.min(ext.fix[0],ext.var[0],ext.sum[0]),Math.max(ext.fix[1],ext.var[1],ext.sum[1])];\n return {keys:keys,dates:dates,series:raw_data,ext:ext};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"stock_ivgrp_data = {\n const rank = _2023_krx_wrapup.stock_invest;\n const ext = {\n val:d3.extent(rank,d=>d.val),\n };\n\n return {rank:rank,firstdate:daily_ivgrp_data.dates[0],groups:daily_ivgrp_data.keys,resultdate:daily_ivgrp_data.dates.slice(-1)[0],ext:ext};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"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":196,"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":8,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"