2f:T9c2,function addAnim(data) { const value = Math.round(data.amount * data.rate); const id = data.id; const type = data.order_type; const count = tradesArray.indexOf(data); const bill1 = Math.floor(value / 10000); const bill2 = Math.floor((value % 10000) / 5000); const bill3 = Math.floor(((value % 10000) % 5000) / 1000); const g = svgView .append("svg") .attr("width", 70) .attr("height", height * 2) .attr("viewBox", [0, 0, 70, height * 2]); var gg1 = new Array(bill1); var gg2 = new Array(bill2); var gg3 = new Array(bill3); if (value < 1000) { g.append("svg") .html(d3.select(svg0000).html()) .attr("viewBox", d3.select(svg0000).attr("viewBox")) .attr("width", 50) .attr("x", 10) .attr("y", 0); } for (let i = 0; i < bill1; i++) { gg1[i] = g .append("svg") .html(d3.select(svg10000).html()) .attr("viewBox", d3.select(svg10000).attr("viewBox")) .attr("width", 50) .attr("x", 10) .attr("y", i * -15); } for (let j = 0; j < bill2; j++) { gg2[j] = g .append("svg") .html(d3.select(svg5000).html()) .attr("viewBox", d3.select(svg5000).attr("viewBox")) .attr("width", 50) .attr("x", 10) .attr("y", (j + bill1) * -15); } for (let k = 0; k < bill3; k++) { gg3[k] = g .append("svg") .html(d3.select(svg1000).html()) .attr("viewBox", d3.select(svg1000).attr("viewBox")) .attr("width", 50) .attr("x", 10) .attr("y", (k + bill1 + bill2) * -15); } g.attr("id", `trade-${count}`) .attr("x", -100) .attr("y", -50) .attr("class", "trade-money"); g.append("text") .text(`¥${value.toLocaleString()}`) .attr("x", 35) .attr("y", height + 45) .attr("fill", "black") .attr("font-size", 14) .attr("font-family", "var(--sans-serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); g.append("text") .text(type) .attr("x", 35) .attr("y", height + 28) .attr("fill", colorScale(type)) .attr("font-size", 14) .attr("font-family", "var(--sans-serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); var e = d3.selectAll(".trade-money"); if (e) { e.each(function (d, i) { var x = (tradesArray.length - this.id.substr(6) - 1) * 100; d3.select(this).transition().ease(d3.easeCubicOut).attr("x", x); if (x > width + 100) { d3.select(this).remove(); } }); } }30:Tbd8,svg1000 = htl.svg``31:Tdde,svg5000 = htl.svg``32:Td74,svg10000 = htl.svg``33:T5ba,svg0000 = htl.svg``34:[] 2d:{"title":"仮想通貨の可視化：","cells":[{"id":0,"value":"# 仮想通貨の可視化：\n\n# どれだけのお金が動いているのか","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"国内大手暗号資産取引「coincheck」でのBTC-JPYの取引をリアルタイムで可視化しました。","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"svgView.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"`¥${analysis[0].toLocaleString()} has been exchanged since your visit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"`¥${analysis[1].toLocaleString()} is exchanged per second.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"tradesArray = new Array()","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"json = Generators.observe((notify) => {\n let interval = setInterval(function () {\n var json = d3.json(proxy + trades);\n notify(json);\n }, 10000);\n return () => clearInterval(interval);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"{\n for (let i = 10; i > 0; i--) {\n if (\n tradesArray.length == 0 ||\n tradesArray[tradesArray.length - 1].id < json.data[i - 1].id\n ) {\n tradesArray.push(json.data[i - 1]);\n addAnim(json.data[i - 1]);\n }\n await _sleep(700);\n }\n return tradesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"analysis = Generators.observe((notify) => {\n let interval = setInterval(function () {\n const now = new Date();\n const millis = now.getTime() - startTime.getTime();\n const sec = millis / 1000;\n const min = sec / 60;\n var sum = 0;\n for (let i = 0; i < tradesArray.length; i++) {\n sum += tradesArray[i].amount * tradesArray[i].rate;\n }\n const response = [parseInt(sum), parseInt(sum / sec)];\n notify(response);\n }, 1000);\n return () => clearInterval(interval);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"svgView = {\n var svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]);\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"startTime = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"colorScale = d3.scaleOrdinal().domain([\"buy\", \"sell\"]).range([\"red\", \"blue\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"_sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"proxy = \"https://my-cors-anywhere.onrender.com/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"trades = \"https://coincheck.com/api/trades?pair=btc_jpy\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"APIドキュメント\n\nhttps://coincheck.com/ja/documents/exchange/api#public","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"説明・累積データ・考察・横から流れるようにする？","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}