JSFiddle - React, Tailwind, and code Playground

by christopheviau

HTML

<p><u>Select this panel</u> and type ‘w’, ‘a’, ‘s’ or ‘d’</p>
<svg width="960" height="500">
    <circle id="circle" cx="250" cy="100"  r="30" />
</svg>

CSS

p {
    font: 14pt sans-serif;
    color: maroon;
    padding-left:3em;
}
#circle {
    fill:red;
}

JavaScript

var circle = d3.select('#circle');
var moveSpeed = 5;
var move = {
    W: ['cy', -moveSpeed],
    A: ['cx', -moveSpeed],
    S: ['cy', moveSpeed],
    D: ['cx', moveSpeed],
}
d3.select('body').on("keydown", function(){
    var key = String.fromCharCode(d3.event.keyCode);
    if(move[key]){
        circle.attr(move[key][0], function(){
        return ~~d3.select(this).attr(move[key][0]) + move[key][1];
    });
  }
});