JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>

JavaScript

var w = 400;
var h = 300;
var diamond = {
    width: w/10,
    x: 250,
    y: 100
};
var rotation = 30;


var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 300);
        svg         
            .append("text")
            .text("click the square")
            .attr("x", w/2)
            .attr("y", w/2)
        svg
            .append("rect")
            .attr("transform", "rotate(" + rotation + "," + (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")")
            .attr("x", diamond.x)
            .attr("y", diamond.y)
            .attr("height", diamond.width)
            .attr("width", diamond.width)
            .attr("fill", "teal")
            .on("mousedown", function(){
              d3.select(this)
                  .attr("transform", "rotate("+ (rotation+=15) +","+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")")
            
            });