Files
Last update 5 years 8 months
by
Daniel Urencio
path.html<!DOCTYPE html> <meta charset="utf-8"> <style> @font-face { font-family: bebas; src: url("BebasNeue.otf"); } html,body { overflow:hidden; padding:0px; margin: 0px; background-color:black; } .tick text { fill: rgba(255,125,80,0.85); font-weight:bold; } .axis path, .axis line { fill: none; stroke: rgba(255,125,80,0.85); shape-rendering: crispEdges; } .line { fill:rgba(255,125,80,0.85); /* stroke: yellow; stroke-width: 1.5px; */ } </style> <body> <svg></svg> </body> <script src="//d3js.org/d3.v4.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var svg = d3.select("svg").attr("width",window.innerWidth).attr("height",window.innerHeight); var socket = io.connect(); var n = 40; var num = 0; var data = d3.range(n).map(function(d){ return num; }); var display = svg.append("text") .attr("x", window.innerWidth / 2) .attr("y", window.innerHeight / 2) .attr("font-size","300") .attr("font-family","bebas") .attr("fill", "rgba(255,255,255,0.95)"); socket.on("watts", function(d) { console.log(d); num = d; display.html(num + " <tspan font-size='70'>watts</tspan>") // d3.selectAll(".line").transition().duration(1000).style("stroke","blue"); }); </script> <script src="path.js"></script>