31:T3af2,/* Author: Charlie Cosse Website: http://ccosse.github.io Contact: ccosse@gmail.com Date: May 17, 2018 License: All Rights Reserved */ TickerWidget=function(){ var me={}; me.ws=null; me.bcr=document.body.getBoundingClientRect(); me.width=W;//me.bcr.width; me.height=H;//screen.height/2.2; me.common_margin=60; me.current_product="BTC-USD"; me.loglinear="log"; me.buyvol=0.,me.sellvol=0.; me.last_price=0.0; me.y_max=10; me.ms_buffer=100000; me.thresh0=null,me.thresh1=null; me.thresh2=20; me.alarm=false; me.alarm0=document.createElement("AUDIO"); me.alarm1=document.createElement("AUDIO"); me.alarm2=document.createElement("AUDIO"); me.alarm0.setAttribute("src","alarm0.mp3"); me.alarm1.setAttribute("src","alarm1.mp3"); me.alarm2.setAttribute("src","alarm2.mp3"); //me.title=document.getElementById("title"); me.price_dat=new Array(); me.top_dat=new Array(); me.dat=new Array(); me.bar_width=4; me.running=false; d3.select("#ticker_svg"), me.margin={ top:me.common_margin,right:me.common_margin, bottom:me.common_margin,left:me.common_margin }; d3.select("#ticker_svg") .attr("width",me.width) .attr("height",me.height); me.g=d3.select("#ticker_svg").append("g"); me.g.append("path"); me.g.append("text") .attr("fill", "#777") .attr("transform", "translate("+(me.margin.left*1.4)+","+(me.margin.top*1.3)+") rotate(-90)") .attr("text-anchor", "end") .text("Sell"); me.g.append("text") .attr("fill", "#777") .attr("transform", "translate("+(me.margin.left*1.4)+","+(me.margin.top+3*(me.height-me.margin.top-me.margin.bottom)/4 + me.margin.bottom/2)+") rotate(-90)") .attr("text-anchor", "end") .text("Buy"); me.g.append("text") .attr("fill", "#777") .attr("transform", "translate("+(me.margin.left*.7)+","+(me.margin.top+(me.height-me.margin.top-me.margin.bottom)/2 -20)+") rotate(-90)") .attr("text-anchor", "end") .text("Price"); me.main_label=me.g.append("text") .style("font-size",document.body.getBoundingClientRect().width*24/944+"pt") .attr("fill", "#FFF") .attr("id","main_label") .attr("transform", "translate("+((me.width-300)/2)+","+(me.height/3)+")") .attr("text-anchor", "center") .text("0.0 | 00000.00 | 0.0"); me.price_label=me.g.append("text") .style("font-size",document.body.getBoundingClientRect().width*24/944+"pt") .attr("fill", "#FFF") .attr("id","price_label") .attr("transform", "translate("+((me.width-320)/2)+","+(2*me.height/3)+")") .attr("text-anchor", "center") .text("00000.00 ["+me.current_product+"]"); me.p = d3.scaleLinear() .domain([0,1]) .range([(me.height-me.margin.top-me.margin.bottom)/2,0]); me.pAxis_left=d3.axisRight(me.p); me.pAxis_right=d3.axisLeft(me.p); me.p_axis_left_g=d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+me.margin.left+","+(me.margin.top+(.25*(me.height-me.margin.top-me.margin.bottom)))+")") .call(me.pAxis_left); me.p_axis_right_g=d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+(me.width-me.margin.right)+","+(me.margin.top+(.25*(me.height-me.margin.top-me.margin.bottom)))+")") .call(me.pAxis_right); me.y = d3.scaleLog() .domain([0.001,me.y_max]) .range([(me.height-me.margin.top-me.margin.bottom)/4, 0]); me.yAxis_left = d3.axisLeft(me.y); me.y_axis_left_g = d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+me.margin.left+","+(me.margin.top+(.75*(me.height-me.margin.top-me.margin.bottom)))+")") .call(me.yAxis_left); me.yAxis_right = d3.axisRight(me.y); me.y_axis_right_g = d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+(me.width-me.margin.right)+","+(me.margin.top+(.75*(me.height-me.margin.top-me.margin.bottom)))+")") .call(me.yAxis_right); me.y_top = d3.scaleLog() .domain([0.001,me.y_max]) .range([0,(me.height-me.margin.top-me.margin.bottom)/4]); me.yAxis_top_left = d3.axisLeft(me.y_top); me.y_axis_top_left_g = d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+me.margin.left+","+me.margin.top+")") .call(me.yAxis_top_left); me.yAxis_top_right = d3.axisRight(me.y_top); me.y_axis_top_right_g = d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+(me.width-me.margin.right)+","+me.margin.top+")") .call(me.yAxis_top_right); me.x = d3.scaleTime() .domain([new Date(Date.now()-me.ms_buffer), new Date(Date.now())]) .range([me.margin.left, me.width-me.margin.right]); me.xAxis_bottom = d3.axisBottom(me.x); me.x_axis_bottom_g=d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+0+","+(me.height-me.margin.bottom)+")") .call(me.xAxis_bottom); me.xAxis_top = d3.axisTop(me.x); me.x_axis_top_g=d3.select("svg") .append("g") .attr("class","axis") .attr("transform","translate("+0+","+(me.margin.top-1)+")") .call(me.xAxis_top); me.set_product=function(pname){ me.current_product=pname; me.dat=new Array(); me.top_dat=new Array(); me.price_dat=new Array(); me.g.selectAll("path").remove(); me.g.selectAll(".bar").remove(); me.g.selectAll(".top_bar").remove(); me.g.append("path"); me.price_label.text("00000.00 ["+me.current_product+"]"); me.main_label.text("0.0 | 0.0"); me.buyvol=0.; me.sellvol=0.; } me.loglinearCB=function(){ if(me.loglinear=="log"){ me.loglinear="lin"; me.y = d3.scaleLinear() .domain([0,me.y_max]) .range([(me.height-me.margin.top-me.margin.bottom)/4, 0]); me.yAxis_left = d3.axisLeft(me.y); me.y_axis_left_g.call(me.yAxis_left); me.yAxis_right = d3.axisRight(me.y); me.y_axis_right_g.call(me.yAxis_right); me.y_top = d3.scaleLinear() .domain([0,me.y_max]) .range([0,(me.height-me.margin.top-me.margin.bottom)/4]); me.yAxis_top_left = d3.axisLeft(me.y_top); me.y_axis_top_left_g.call(me.yAxis_top_left); me.yAxis_top_right = d3.axisRight(me.y_top); me.y_axis_top_right_g.call(me.yAxis_top_right); } else{ me.loglinear="log"; me.y = d3.scaleLog() .domain([0.0001,me.y_max]) .range([(me.height-me.margin.top-me.margin.bottom)/4, 0]); me.yAxis_left = d3.axisLeft(me.y); me.y_axis_left_g.call(me.yAxis_left); me.yAxis_right = d3.axisRight(me.y); me.y_axis_right_g.call(me.yAxis_right); me.y_top = d3.scaleLog() .domain([0.0001,me.y_max]) .range([0,(me.height-me.margin.top-me.margin.bottom)/4]); me.yAxis_top_left = d3.axisLeft(me.y_top); me.y_axis_top_left_g.call(me.yAxis_top_left); me.yAxis_top_right = d3.axisRight(me.y_top); me.y_axis_top_right_g.call(me.yAxis_top_right); } d3.selectAll(".axis") .style("stroke","white") d3.selectAll(".domain") .style("stroke","white") d3.selectAll(".tick") .style("stroke","white") d3.selectAll("line") .style("stroke","white") .style("fill","white") //rescaleCB(); } me.rescaleCB=function(){ var y_min=0; me.y_max=0.0001; if(me.loglinear=="log"){y_min=0.001;me.y_max=1} for(var d of me.top_dat)if(d.qty>me.y_max)me.y_max=d.qty; for(var d of me.dat)if(d.qty>me.y_max)me.y_max=d.qty; me.y.domain([y_min,me.y_max]); me.y_top.domain([y_min,me.y_max]); me.y_axis_left_g.call(me.yAxis_left); me.y_axis_right_g.call(me.yAxis_right); me.y_axis_top_left_g.call(me.yAxis_top_left); me.y_axis_top_right_g.call(me.yAxis_top_right); } me.alarmCB=function(){ if(!me.alarm){ me.alarm=true; d3.select("#alarmB") .style("background-color","red") .html("Alarm:On"); me.thresh0=me.last_price-me.last_price%100; me.thresh1=me.last_price-me.last_price%100+100; } else{ me.alarm=false; d3.select("#alarmB") .style("background-color","darkgreen") .html("Alarm:Off"); } } me.runCB=function(){ if(me.ws){ me.ws.close(); me.ws=null; me.running=false; //document.getElementById("runB").innerHTML="Run"; //d3.select("#runB").style("background-color","green"); } else{ //document.getElementById("runB").innerHTML="Stop"; //d3.select("#runB").style("background-color","red"); me.ws = new WebSocket("ws://ws-feed.gdax.com/"); me.running=true; d3.timeout(function(){ var pyld={"type":"subscribe","product_ids":[me.current_product],"channels":["ticker"]};//,"ETH-USD","ETH-BTC" me.ws.send(JSON.stringify(pyld)); },1000); me.ws.onmessage = function (event) { //console.log(event.data); var data=JSON.parse(event.data); if(d3.keys(data).indexOf("last_size")>-1){ me.price_dat.push({tstamp:new Date(Date.now()),price:parseFloat(data.price)}); me.last_price=parseFloat(data.price); if(me.alarm) if(me.last_priceme.thresh1){me.thresh0=me.thresh1;me.thresh1+=100;me.alarm1.play();} if(data.side=="buy"){ me.dat.push({tstamp:new Date(Date.now()),qty:parseFloat(data.last_size) }); me.buyvol+=parseFloat(data.last_size); } else if(data.side=="sell"){ me.top_dat.push({tstamp:new Date(Date.now()),qty:parseFloat(data.last_size) }); me.sellvol+=parseFloat(data.last_size); } } } } } me.update=function(_msgdata){ var data=_msgdata; if(d3.keys(data).indexOf("last_size")>-1){ me.price_dat.push({tstamp:new Date(Date.now()),price:parseFloat(data.price)}); me.last_price=parseFloat(data.price); if(me.alarm) if(me.last_priceme.thresh1){me.thresh0=me.thresh1;me.thresh1+=100;me.alarm1.play();} if(data.side=="buy"){ me.dat.push({tstamp:new Date(Date.now()),qty:parseFloat(data.last_size) }); me.buyvol+=parseFloat(data.last_size); if(me.buyvol>me.thresh2)me.alarm2.play(); } else if(data.side=="sell"){ me.top_dat.push({tstamp:new Date(Date.now()),qty:parseFloat(data.last_size) }); me.sellvol+=parseFloat(data.last_size); if(me.sellvol>me.thresh2)me.alarm2.play(); } } } setInterval(function(){ //if(!me.ws)return; if(!me.running)return; var label=me.buyvol.toFixed(1)+" | "+me.last_price.toFixed(2)+" | "+me.sellvol.toFixed(1); //me.title.innerHTML=label; me.main_label.text(label); me.price_label.text(me.last_price.toPrecision(7)+" ["+me.current_product+"]") if(me.dat.length>0){ while(me.x(me.dat[0].tstamp)0){ while(me.x(me.top_dat[0].tstamp)0){ while(me.x(me.price_dat[0].tstamp)me.y_max){ me.y_max=d.qty; if(me.loglinear=="log"){ me.y.domain([0.0001,me.y_max]); me.y_top.domain([0.0001,me.y_max]); } else{ me.y.domain([0,me.y_max]); me.y_top.domain([0,me.y_max]); } me.y_axis_left_g.call(me.yAxis_left); me.y_axis_right_g.call(me.yAxis_right); me.y_axis_top_left_g.call(me.yAxis_top_left); me.y_axis_top_right_g.call(me.yAxis_top_right); } return me.margin.top+3*(me.height-me.margin.top-me.margin.bottom)/4+me.y(d.qty); }) .attr("width",me.bar_width) .attr("height",function(d) { return (me.height-me.margin.top-me.margin.bottom)/4-me.y(d.qty);}); bars.exit().remove(); top_bars=me.g.selectAll(".top_bar") .data(me.top_dat) .attr("y", function(d) { if(d.qty>me.y_max){me.y_max=d.qty;me.y.domain([0,me.y_max]);me.y_top.domain([0,me.y_max]);me.y_axis_left_g.call(me.yAxis_left);me.y_axis_top_g.call(me.yAxis_top);}return me.margin.top; }) .attr("height",function(d) { return (me.height - me.margin.top - me.margin.bottom)/4 - me.y(d.qty);}) .attr("x",function(d,i){if(i==0){me.x.domain([new Date(Date.now()-me.ms_buffer), new Date(Date.now())]);me.x_axis_bottom_g.call(me.xAxis_bottom);me.x_axis_top_g.call(me.xAxis_top);};return me.x(d.tstamp)-me.bar_width/2}); top_bars.enter().append("rect") .attr("class","top_bar") .attr("y", function(d) { if(d.qty>me.y_max){ me.y_max=d.qty; if(me.loglinear=="log"){ me.y.domain([0.0001,me.y_max]); me.y_top.domain([0.0001,me.y_max]); } else{ me.y.domain([0,me.y_max]); me.y_top.domain([0,me.y_max]); } me.y_axis_left_g.call(me.yAxis_left); me.y_axis_top_left_g.call(me.yAxis_top); me.y_axis_right_g.call(me.yAxis_right); me.y_axis_top_right_g.call(me.yAxis_top_right); } return me.margin.top; }) .attr("width",me.bar_width) .attr("height",function(d) { return (me.height - me.margin.top - me.margin.bottom)/4 - me.y(d.qty);}) .attr("x",function(d,i){ me.x_axis_bottom_g.call(me.xAxis_bottom);me.x_axis_top_g.call(me.xAxis_top);return me.x(d.tstamp)-me.bar_width/2}); top_bars.exit().remove(); d3.selectAll(".top_bar") .style("fill","red") .style("opacity",0.4) d3.selectAll(".bar") .style("fill","green") .style("opacity",0.4) d3.selectAll(".axis") .style("stroke","white") d3.selectAll(".domain") .style("stroke","white") d3.selectAll(".tick") .style("stroke","white") d3.selectAll("line") .style("stroke","white") .style("fill","white") },30); return me; } 32:T27e8,/* Author: Charlie Cosse Website: http://ccosse.github.io Contact: ccosse@gmail.com Date: May 17, 2018 License: All Rights Reserved */ DepthWidget=function(){ var me={}; me.ws=null; me.bcr=document.body.getBoundingClientRect(); me.width=W;//me.bcr.width; me.height=H;//screen.height/2.8; me.common_margin=60; me.message_count=0; me.snapshot_data=null; me.data_buffer=new Array(); me.buy_levels=new Array(); me.sell_levels=new Array(); me.half_domain=100; me.lock=false; me.min_side=[10000,15000]; me.max_side=[15000,20000]; me.current_product="BTC-USD"; me.running=false; d3.select("#depth_svg"), me.margin={ top:me.common_margin,right:me.common_margin, bottom:me.common_margin,left:me.common_margin }; d3.select("#depth_svg") .attr("width",me.width) .attr("height",me.height); me.g=d3.select("#depth_svg").append("g"); me.main_label=me.g.append("text") .style("font-size",document.body.getBoundingClientRect().width*24/944+"pt") .attr("fill", "#FFF") .attr("id","main_label") .attr("transform", "translate("+((me.width-370)/2)+","+(me.height/3)+")") .attr("text-anchor", "center") .text(""); me.x=d3.scaleLinear() .domain([10000,20000]) .range([me.margin.left, me.width-me.margin.right]); me.xAxis = d3.axisBottom(me.x); me.x_axis_g=d3.select("#depth_svg") .append("g") .attr("class","axis") .attr("transform","translate("+0+","+(me.height-me.margin.bottom)+")") .call(me.xAxis); me.y=d3.scaleLinear() .domain([0,1]) .range([(me.height-me.margin.bottom), me.margin.top]); me.yAxis_left = d3.axisLeft(me.y); me.yAxis_right = d3.axisRight(me.y); me.y_axis_left_g = d3.select("#depth_svg") .append("g") .attr("class","axis") .attr("transform","translate("+me.margin.left+","+0+")") .call(me.yAxis_left); me.y_axis_right_g = d3.select("#depth_svg") .append("g") .attr("class","axis") .attr("transform","translate("+(me.width-me.margin.right)+","+0+")") .call(me.yAxis_right); me.set_product=function(pname){ me.current_product=pname; me.message_count=0; me.snapshot_data=null; me.data_buffer=new Array(); me.buy_levels=new Array(); me.sell_levels=new Array(); me.half_domain=100; me.lock=false; me.min_side=[10000,15000]; me.max_side=[15000,20000]; } me.plusCB=function(){me.half_domain*=2./3.;} me.minusCB=function(){me.half_domain*=3./2.;} me.runCB=function(){ if(me.ws){ me.ws.close(); me.ws=null; me.running=false; //document.getElementById("rundepthB").innerHTML="Run"; //d3.select("#rundepthB").style("background-color","green"); } else{ //document.getElementById("rundepthB").innerHTML="Stop"; //d3.select("#rundepthB").style("background-color","red"); me.ws = new WebSocket("ws://ws-feed.gdax.com/");// ws://139.162.51.13:5309/ me.running=true; d3.timeout(function(){ var pyld={"type":"subscribe","product_ids":[me.current_product],"channels":["level2"]};//,"ETH-USD","ETH-BTC" me.ws.send(JSON.stringify(pyld)); },1000); me.ws.onmessage = function (event) { //console.log(event.data); var data=JSON.parse(event.data); if(data["type"]=="snapshot"){ console.log("calling me.build_snapshot") me.build_snapshot(data) } else if(data["type"]=="l2update"){ //console.log(event.data); me.data_buffer.push(data); me.message_count+=1; } //if(message_count>50){runCB();manage_buffer();} }//onmessage }//runCB } me.update=function(_msgdata){ me.data_buffer.push(_msgdata); me.message_count+=1; me.main_label.text(_msgdata["time"]) } me.build_snapshot=function(data){ me.lock=true; me.snapshot_data=data; for(var pidx=0;pidx (parseFloat(me.snapshot_data.asks[0][0])+me.half_domain)){ slice_index[1]=xidx; break; } side_totals[1]+=parseFloat(me.snapshot_data.asks[xidx][1]);//the total amt at this price_level } me.y.domain([0,d3.max(side_totals)]); me.y_axis_left_g.call(me.yAxis_left); me.y_axis_right_g.call(me.yAxis_right); var bidline=d3.area() .x(function(d,i){var rval = me.margin.left+(parseFloat(d[0])-domain_min)/(domain_max-domain_min)*(me.width-me.margin.left-me.margin.right);/*console.log("buy",rval,d[0])*/;return rval;}) .y1(function(d,i){ var csum=0; for(var cidx=0;cidx-1){ if(parseFloat(me.snapshot_data.bids[lidx][0])==parseFloat(l2u["changes"][0][1])){ me.snapshot_data.bids.splice(lidx,1); } me.buy_levels.splice(lidx,1); } } else{//update or new bid if(lidx>-1){ //update price level //console.log("updating price level ",snapshot_data.bids[lidx][0],l2u["changes"][0][1]) me.snapshot_data.bids[lidx][1]=l2u["changes"][0][2]; } else{ //add new price level var insert_idx=0; var target=parseFloat(l2u["changes"][0][1]); for(var didx=0;didxme.buy_levels[didx]){ insert_idx=didx; break; } } me.buy_levels.splice(insert_idx,0,target) me.snapshot_data.bids.splice(insert_idx, 0, [l2u["changes"][0][1],l2u["changes"][0][2]]); //console.log("added price level ",insert_idx,buy_levels.length,buy_levels[insert_idx],buy_levels[insert_idx+1],snapshot_data.bids[insert_idx],snapshot_data.bids[insert_idx+1]); } } } else{ var lidx=me.sell_levels.indexOf(parseFloat(l2u["changes"][0][1])); if(l2u["changes"][0][2]==0){ if(lidx>-1){ if(parseFloat(me.snapshot_data.asks[lidx][0])==parseFloat(l2u["changes"][0][1])){ //console.log("removing price level ",l2u["changes"][0][1],snapshot_data.asks[lidx]) me.snapshot_data.asks.splice(lidx,1); } me.sell_levels.splice(lidx,1); } } else{//update or new ask if(lidx>-1){ //update price level //console.log("updating price level ",snapshot_data.asks[lidx][0],l2u["changes"][0][1]) me.snapshot_data.asks[lidx][1]=l2u["changes"][0][2]; } else{ //add new price level var insert_idx=0; var target=parseFloat(l2u["changes"][0][1]); for(var didx=0;didx

Run

Log/Lin

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"current_product=\"BTC-USD\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"w_ticker=new TickerWidget()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"w_depth=new DepthWidget()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"run_obj=new runObj()","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"init={\n d3.select(\"#runB\").on(\"click\",function(){\n run_obj.runCB();\n })\n d3.select(\"#loglinB\").on(\"click\",function(){\n w_ticker.loglinearCB();\n })\n d3.selectAll(\".axis\")\n .style(\"stroke\",\"white\")\n \n d3.selectAll(\".domain\")\n .style(\"stroke\",\"white\")\n \n d3.selectAll(\".tick\")\n .style(\"stroke\",\"white\")\n\n d3.selectAll(\"line\")\n .style(\"stroke\",\"white\")\n .style(\"fill\",\"white\")\n \n return \"Ok\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"resize={\n window.onresize=function(){\n d3.select(\"#ticker_svg\").attr(\"width\",document.body.getBoundingClientRect().width+\"px\")\n d3.select(\"#ticker_svg\").attr(\"height\",document.body.getBoundingClientRect().width/2+\"px\")\n d3.select(\"#depth_svg\").attr(\"width\",document.body.getBoundingClientRect().width+\"px\")\n d3.select(\"#depth_svg\").attr(\"height\",document.body.getBoundingClientRect().width/2+\"px\")\n w_ticker.width=document.body.getBoundingClientRect().width\n w_ticker.height=document.body.getBoundingClientRect().width/2\n w_depth.width=document.body.getBoundingClientRect().width\n w_depth.height=document.body.getBoundingClientRect().width/2\n w_ticker.main_label.style(\"font-size\",document.body.getBoundingClientRect().width*24/944+\"pt\")\n w_ticker.price_label.style(\"font-size\",document.body.getBoundingClientRect().width*24/944+\"pt\")\n w_depth.main_label.style(\"font-size\",document.body.getBoundingClientRect().width*24/944+\"pt\")\n }\n return window.onresize\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"W={\n return document.body.getBoundingClientRect().width\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"H={\n return document.body.getBoundingClientRect().width/2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`\\[1\\] [C. Cossé, d3plot](https://ccosse.github.io)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}