JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<h1>Click the svg element to animate</h1>

CSS

svg
{
    margin-left: 30px;
    margin-top: 30px;
    border: 1px solid #ccc;
}

JavaScript

var svg = d3.selectAll("body").append("svg")
    .attr("width", 300)
    .attr("height", 300);

var arc = d3.svg.arc()
    .innerRadius(30)
    .outerRadius(120)
    .startAngle(120 * (Math.PI/180))
    .endAngle(240 * (Math.PI/180));

var plot = svg
    .append("g")
    .attr("class", "arc");

var gauge = plot
    .append("path")
    .attr("d", arc)
    .attr("class", "gauge")
    .style("fill", "#ddd")
    .attr("transform", "translate(150,130) rotate(180)")
    .on("click", turnNeedle);

var needle = svg
    .append("g")
    .attr("class", "needle")
    .attr("transform", "translate( 0 , 0 )")
    .append("path")
    .attr("class", "tri")
    .attr("d", "M" + (300/2 + 3) + " " + (120 + 10) + " L" + 300/2 + " 0 L" + (300/2 - 3) + " " + (120 + 10) + " C" + (300/2 - 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 10) + " Z")
    .attr("transform", "rotate(-60, " + 300/2 + "," + (120 + 10) + ")");

function turnNeedle()
{
    needle
        .transition()
        .duration(2000)
        .attr("transform", "rotate(40 150,130)");
}