JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/novus/nvd3/v1.7.1/build/nv.d3.css">
<script src="https://rawgit.com/novus/nvd3/v1.7.1/build/nv.d3.js"></script>
<h1 id="title">Dynamic chart</h1>
<input type="submit" id="byBtn" value="Change" onclick="change()"/>
<div id="targetDiv" style="display: inline-block"/>

JavaScript

function change(){
    var height = 650;
    var width = 1050;
    var testdata = [
        {key: "One", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Two", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Three", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Four", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Five", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Six", y: Math.floor((Math.random() * 100) + 1)},
        {key: "Seven", y: Math.floor((Math.random() * 100) + 1)}
    ];

    var divElement = document.getElementById("targetDiv")
    divElement.innerHTML="";    
    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.setAttribute("width", "" + width + "px");
    svgElement.setAttribute("height", "" + height + "px")
    divElement.appendChild(svgElement);
    
    nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.key })
            .y(function(d) { return d.y })
            .width(width)
            .height(height);

        d3.select("svg")
            .datum(testdata)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);
        return chart;
    });
}