JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div id="container">
        <div id="searchbox">
            <input type="text" id="search_box">
            <button type="button" onclick="searchForTerms()">Search</button>
        </div>
        <div id="clearbutton">
            <button type="button" onclick="clearSelected()">Clear</button>
        </div>
    </div>
</body>

CSS

.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//Global variables
var width = 1000;
var height = 1000;
var padding = 50;
var xmin = 0;
var xmax = 100;
var ymin = 20;
var ymax = 70;
var xTicks = 10;
var yTicks = 5;
var xLabel = "% Male";
var yLabel = "Average Age (Yrs)";
var chartLabel = "Consumer Products by Gender and Age";

//Functions
function searchForTerms() {
    var searchTerms = document.getElementById('search_box').value.toUpperCase().split(" ");
    //To know for which circles to create text element label
    var circlesToAddLabel = [];

    //Highlight nodes that meet search term
    svg.selectAll("circle")
        .attr("fill", function (d, i) {
        if (this.getAttribute("selected") === "true") {
            return this.getAttribute("fill");
        }
        for (iter = 0; iter < searchTerms.length; iter++) {
            var term = searchTerms[iter];
            if (d.label.indexOf(term) !== -1) {
                circlesToAddLabel.push(this);
                return "#e00";
            }
        }
        return "#000";
    })
        .attr("selected", function (d, i) {
        if (this.getAttribute("selected") === "true") {
            return true;
        }
        for (iter = 0; iter < searchTerms.length; iter++) {
            var term = searchTerms[iter];
            if (d.label.indexOf(term) !== -1) {
                return true;
            }
        }
        return false;
    })

    //Add node labels
    for (i = 0; i < circlesToAddLabel.length; i++) {
        var circle = circlesToAddLabel[i];

        svg.append("text")
            .attr("id", "t-" + parseInt(circle.getAttribute("id")))
            .attr("class", "node label")
            .attr("x", parseFloat(circle.getAttribute("cx")) + 10)
            .attr("y", parseFloat(circle.getAttribute("cy")))
            .attr("fill", "red")
            .text(circle.getAttribute("label"));

        //Display text to left of node if on right half of graph
        if (parseFloat(circle.getAttribute("cx")) > (xScale(xmax) / 2.0)) {
         ...