2f:Te21,svgView = { var svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "darkgreen"); var chart = svg .append("svg") .attr("width", (7 * width) / 8) .attr("height", 150) .attr("viewBox", [0, 0, (7 * width) / 8, 150]) .attr("x", width / 16) .attr("y", 50); chart .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "darkseagreen"); for (let i = 0; i < 5; i++) { chart .append("svg") .html(d3.select(svgArray[i]).html()) .attr("viewBox", d3.select(svgArray[i]).attr("viewBox")) .attr("fill", d3.select(svgArray[i]).attr("fill")) .attr("height", "30%") .attr("x", `${-40 + i * 20}%`) .attr("y", 35); } chart .append("text") .text("1~9,999") .attr("x", (7 * width) / 16 - (7 * width * 0.8) / 16) .attr("y", 115) .attr("fill", "white") .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); chart .append("text") .text("10,000~99,999") .attr("x", (7 * width) / 16 - (7 * width * 0.4) / 16) .attr("y", 115) .attr("fill", "white") .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); chart .append("text") .text("100,000~499,999") .attr("x", (7 * width) / 16) .attr("y", 115) .attr("fill", "white") .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); chart .append("text") .text("500,000~999,999") .attr("x", (7 * width) / 16 + (7 * width * 0.4) / 16) .attr("y", 115) .attr("fill", "white") .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); chart .append("text") .text("1,000,000~") .attr("x", (7 * width) / 16 + (7 * width * 0.8) / 16) .attr("y", 115) .attr("fill", "white") .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "middle"); svg .append("text") .text("Total") .attr("x", width / 16) .attr("y", 690) .attr("fill", "white") .attr("font-size", 28) .attr("font-family", "var(--serif)") .attr("font-weight", "bold"); svg .append("rect") .attr("width", width / 4) .attr("height", 50) .attr("fill", "white") .attr("x", (3 * width) / 16 + (2 * width) / 4) .attr("y", 450); svg .append("text") .text("Amount") .attr("x", (3 * width) / 16 + (2 * width) / 4) .attr("y", 690) .attr("fill", "white") .attr("font-size", 28) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "start"); svg .append("text") .text("BUY") .attr("x", (3 * width) / 16 + (3 * width) / 4 - 70) .attr("y", 690) .attr("font-size", 20) .attr("fill", "silver") .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("text") .text("SELL") .attr("x", (3 * width) / 16 + (3 * width) / 4 - 10) .attr("y", 690) .attr("font-size", 20) .attr("fill", "silver") .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "end"); return svg; }30:T452,async function SetSlotting() { var winLocal; var typeLocal; if (tradesArray.length > 0 && slotting[0]) { winLocal = parseInt(tradesArray[0].amount * tradesArray[0].rate); typeLocal = tradesArray[0].order_type; tradesArray.splice(0, 1); if (winLocal < 10000) { mutable winNum = 1; } else if (winLocal < 100000) { mutable winNum = 2; } else if (winLocal < 500000) { mutable winNum = 3; } else if (winLocal < 1000000) { mutable winNum = 4; } else { mutable winNum = 5; } } else { for (let i = 0; i < 3; i++) { while (true) { var tmp = randomNumber(0, 4); if (!randomArray.includes(tmp)) { randomArray[i] = tmp; break; } } } winLocal = 0; mutable winNum = 0; } for (let i = 0; i < 3; i++) { slotting[i] = !slotting[i]; console.log(slotting[i]); if (!slotting[i]) { if (i == 2) { mutable win = winLocal; mutable credits += mutable win; ShowType(typeLocal); } else { await _sleep(300); } } } }31:T552,function ShowType(type) { var w = width / 4; var h = 50; var svg = svgView .append("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .attr("x", (3 * width) / 16 + (2 * width) / 4) .attr("y", 650); svg .append("rect") .attr("width", w) .attr("height", h) .attr("fill", "darkgreen"); svg .append("text") .text("Amount") .attr("x", 0) .attr("y", 40) .attr("fill", "white") .attr("font-size", 28) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "start"); var buy = svg .append("text") .text("BUY") .attr("x", width / 4 - 70) .attr("y", 40) .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "end"); var sell = svg .append("text") .text("SELL") .attr("x", width / 4 - 10) .attr("y", 40) .attr("font-size", 20) .attr("font-family", "var(--serif)") .attr("font-weight", "bold") .attr("text-anchor", "end"); if (type == "buy") { buy.attr("fill", "crimson"); sell.attr("fill", "silver"); } else if (type == "sell") { buy.attr("fill", "silver"); sell.attr("fill", "blue"); } else { buy.attr("fill", "silver"); sell.attr("fill", "silver"); } return svg; }32:[] 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":1794,"value":"## 本記事について","pinned":false,"hidden":false,"mode":"md"},{"id":1812,"value":"ニュースなどでよく聞くようになった「仮想通貨」\n\nしかし、それが一体どのようなものなのか、はっきりと理解できている人はまだ少ないと思います。\n\n今回私はこの課題を通して、「仮想通貨」の取引をポップに、わかりやすく、そして見ているだけで楽しいようなビジュアルに落とし込みました。\n\n右下のBUY / SELLは、**BITCOINを**買った / 売ったを表しています。","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"svgBox = {\n var boxes = new Array(3);\n for (let i = 0; i < 3; i++) {\n boxes[i] = svgView\n .append(\"svg\")\n .attr(\"width\", width / 4)\n .attr(\"height\", 300)\n .attr(\"x\", ((i + 1) * width) / 16 + (i * width) / 4)\n .attr(\"y\", 250);\n\n boxes[i]\n .append(\"rect\")\n .attr(\"width\", width / 4)\n .attr(\"height\", 300)\n .attr(\"fill\", \"white\");\n }\n\n return boxes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"svgIcon = {\n var svgs = new Array(3);\n for (let i = 0; i < 3; i++) {\n svgs[i] = svgBox[i].append(\"svg\");\n }\n return svgs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"SVGIconInterval = Generators.observe((notify) => {\n let n = 0;\n let interval = setInterval(function () {\n var setNum = new Array(3);\n for (let i = 0; i < 3; i++) {\n if (slotting[i]) {\n setNum[i] = (i + n) % 5;\n } else if (winNum > 0) {\n setNum[i] = winNum - 1;\n } else if (winNum == 0) {\n setNum[i] = randomArray[i];\n }\n svgIcon[i]\n .html(d3.select(svgArray[setNum[i]]).html())\n .attr(\"viewBox\", d3.select(svgArray[setNum[i]]).attr(\"viewBox\"))\n .attr(\"fill\", d3.select(svgArray[setNum[i]]).attr(\"fill\"))\n .attr(\"width\", \"80%\")\n .attr(\"x\", \"10%\")\n .attr(\"y\", 0);\n }\n n++;\n notify(svgIcon);\n }, 50);\n return () => clearInterval(interval);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"slotting = [true, true, true]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"SlottingInterval = Generators.observe((notify) => {\n let interval = setInterval(function () {\n SetSlotting();\n notify(slotting);\n }, 2000);\n return () => clearInterval(interval);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1291,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1316,"value":"ShowCredit = {\n var w = width / 4;\n var h = 50;\n\n var svg = svgView\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"viewBox\", [0, 0, w, h])\n .attr(\"x\", width / 16)\n .attr(\"y\", 700);\n\n svg\n .append(\"rect\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"fill\", \"white\")\n .attr(\"x\", 0)\n .attr(\"y\", 0);\n\n svg\n .append(\"text\")\n .text(`¥${credits.toLocaleString()}`)\n .attr(\"x\", width / 4 - 20)\n .attr(\"y\", 35)\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", 28)\n .attr(\"font-family\", \"var(--serif)\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\");\n\n svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"ShowWin = {\n var w = width / 4;\n var h = 50;\n\n var svg = svgView\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"viewBox\", [0, 0, w, h])\n .attr(\"x\", (3 * width) / 16 + (2 * width) / 4)\n .attr(\"y\", 700);\n\n svg\n .append(\"rect\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"fill\", \"white\")\n .attr(\"x\", 0)\n .attr(\"y\", 0);\n\n svg\n .append(\"text\")\n .text(`¥${win.toLocaleString()}`)\n .attr(\"x\", width / 4 - 20)\n .attr(\"y\", 35)\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", 28)\n .attr(\"font-family\", \"var(--serif)\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\");\n\n svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"$31","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":248,"value":"tradesArray = new Array()","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 }\n await _sleep(700);\n }\n return tradesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"mutable randomArray = {\n let array = [];\n for (let i = 0; i < 3; i++) {\n while (true) {\n var tmp = randomNumber(0, 4);\n if (!array.includes(tmp)) {\n array[i] = tmp;\n break;\n }\n }\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"mutable winNum = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"mutable tradeType = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"mutable credits = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"mutable win = 0","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":1459,"value":"randomNumber = (min, max) => {\n return Math.floor((max - min + 1) * Math.random() + min);\n}","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":1237,"value":"svgArray = new Array(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"(svgArray[0] = htl.svg``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"(svgArray[1] = htl.svg``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"(svgArray[2] = htl.svg``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"(svgArray[3] = htl.svg``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"(svgArray[4] = htl.svg``)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}