JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<html>
<head>
<script src="d3.js"></script>
</head>
<body>
<div id="riskMeter">

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="201px" height="107.07px" viewBox="0 0 201 107.07" xml:space="preserve">
<g id="Layer_1">
    <g>
        <g>
            <path fill="#FF0000" d="M171.335,29.915L100.75,100.5h99.75C200.5,72.95,189.357,48.001,171.335,29.915"/>
            <path fill="#DDFF00" d="M100.75,0.5l0,100l70.585-70.585C153.284,11.799,128.328,0.568,100.75,0.5"/>
            <path fill="#0DFF00" d="M100.75,0.5c-0.084,0-0.165,0-0.25,0C72.95,0.5,48,11.643,29.914,29.665
                C11.744,47.771,0.5,72.822,0.5,100.5h100.25L100.75,0.5z"/>
        </g>
    </g>
    <radialGradient id="SVGID_4_" cx="100.0044" cy="100.0044" r="98.9753" gradientUnits="userSpaceOnUse">
        <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.77"/>
        <stop  offset="0.5895" style="stop-color:#FFFFFF;stop-opacity:0.0765"/>
        <stop  offset="0.6545" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#000000;stop-opacity:0.29"/>
    </radialGradient>
    <path fill="url(#SVGID_4_)" stroke="#000000" stroke-miterlimit="10" d="M100.5,0.5c-55.229,0-100,44.771-100,100h200
        C200.5,45.271,155.728,0.5,100.5,0.5z"/>
    <g id="needleWrapper">
    <g id="needle"> 
        <g id="needleoffset">
                <path d="M102.271,72.93l-0.2-16.77c-0.055-4.575-0.124-9.15-0.219-13.725l6.055,2.572L100.5,27.452l-7.406,17.557l6.055-2.572
                    c-0.095,4.575-0.164,9.15-0.219,13.725l-0.2,16.77c-0.072,9.19-0.099,18.38-0.102,27.57h3.744
                    C102.37,91.31,102.342,82.12,102.271,72.93z"/>
        </g>
    </g>
         </g>
            <circle cx="100.75" cy="100.5" r="6.57"/>
 
</g>
<g id="Layer_2">
</g>
</svg>

</div>
</body>
</html>

JavaScript

var foo = [90];
d3.select("#needleWrapper")
    .attr("transform","translate(100,100)");
d3.select("#needleoffset")
    .attr("transform","translate(-100,-100)");
d3.select("#needle")
    
.data(foo)
    .transition()
    .duration(3000)
    .attr("transform",function(d){return  "rotate("+d+")"});