JSFiddle - React, Tailwind, and code Playground

by CoolBlue

CSS

body {font-family:'Courier New';}
svg {
    outline: 1px solid red;
}
#log, #log2, #log3 {
    background-color: #ccc;
    white-space: pre;
}

JavaScript

var width = window.innerWidth -16,
		    height = 300;
		svg = d3.select("body").append("svg")
		    .attr("width", width)
		    .attr("height", height)

		 var f = (function () {
		    var _fmt = "_>40,.2f";
		    return function f(x, fmt) {
                fmt = fmt || _fmt;
                return Array.isArray(x) ? x.map(function(x){return f(x,fmt)}) : d3.format(fmt)(Math.exp(x / 10));
		    }
		})(),
		    log = d3.select("body").append("div")
		        .attr("id", "log"),
		    log2 = d3.select("body").append("div")
		        .attr("id", "log2");
		    log3 = d3.select("body").append("div")
		        .attr("id", "log3");
		    svg.on("mousemove", function () {
		        var p = d3.mouse(svg.node());
		        log.text(f(p, "_>40,.2f"));
		        log2.text(f(p, " >40,.2f"));
		        log3.text(f(p, "40,.2f"));
		    });
window.onresize = function() {
    svg.attr("width", window.innerWidth - 16)
}