2b:null 2c:["$","title",null,{"children":"仮想通貨の可視化： | Yu Horita | Observable"}] 31: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(); } }); } }32:Tbd8,svg1000 = htl.svg``33:Tdde,svg5000 = htl.svg``34:Td74,svg10000 = htl.svg``35:T5ba,svg0000 = htl.svg``36:[] 2f:{"id":"454085a4cb57ca27","slug":null,"title":"仮想通貨の可視化：","thumbnail":"33ea9f3d033758ffa144d85fe5b9ba6bdb9a66062382d3b4ef09ed5b5aabec1e","access_level":"public","create_time":"$D2023-02-02T07:10:17.790Z","update_time":"$D2023-02-02T07:10:17.790Z","view_time":null,"first_public_time":"$D2023-02-02T07:10:17.790Z","has_unpublished_edits":null,"fork":{"id":"afb9004e38d6e297","slug":null,"title":"仮想通貨の可視化：","owner":{"id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bd42f3f1806de809","login":"y-horita1111","name":"Yu Horita","avatar_url":"https://avatars-next.observableusercontent.com/725fd1fb3ad415036dcd9f4f880090cb8e886f32908c01e0ad3b37ec007aa9eb","tier":"starter_2024"},"version":1229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4369327ee7d4e99","login":"y-horita1111","name":"Yu Horita","avatar_url":"https://avatars-next.observableusercontent.com/725fd1fb3ad415036dcd9f4f880090cb8e886f32908c01e0ad3b37ec007aa9eb","tier":null}],"members":[{"type":"individual","id":"e4369327ee7d4e99","login":"y-horita1111","name":"Yu Horita","avatar_url":"https://avatars-next.observableusercontent.com/725fd1fb3ad415036dcd9f4f880090cb8e886f32908c01e0ad3b37ec007aa9eb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"仮想通貨の可視化：","cells":[{"id":0,"value":"# 仮想通貨の可視化：\n\n# どれだけのお金が動いているのか","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"国内大手暗号資産取引「coincheck」でのBTC-JPYの取引をリアルタイムで可視化しました。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"svgView.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"`¥${analysis[0].toLocaleString()} has been exchanged since your visit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"`¥${analysis[1].toLocaleString()} is exchanged per second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"tradesArray = new Array()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"startTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"colorScale = d3.scaleOrdinal().domain([\"buy\", \"sell\"]).range([\"red\", \"blue\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"_sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"proxy = \"https://my-cors-anywhere.onrender.com/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"trades = \"https://coincheck.com/api/trades?pair=btc_jpy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"APIドキュメント\n\nhttps://coincheck.com/ja/documents/exchange/api#public","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"説明・累積データ・考察・横から流れるようにする？","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"