JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/9622651/site/d3.v3.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9622651/site/d3-tip.js"></script>
<div id="tab">
		<ul>
			<li><button id="total">Total Drug Cost Per Person</button></li>
    		<li><span style="padding-left:8%;padding-right:4%"><button id="brand">Brand-name Drug Cost Per Person</span></button></li>
    		<li><span style="padding-left:20%;"><button id="generic">Generic Drug Cost Per Person</button></span></li>
		</ul>
	</div>
		</br>	
        </br>
		<p id="title">Total Drug Cost Per Person</p>
		
		<div id="map"></div>
		<img id="legend" src="https://dl.dropboxusercontent.com/u/9622651/site/legend1.svg" style="width:250px;margin-left:20%;">

CSS

.d3-tip {
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    border-radius: 10px;
    pointer-events: none;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {      
      box-sizing: border-box;
      display: inline;
      font-size: 8px;
      width: 100%;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.6);
      position: absolute;
      pointer-events: none;
    }

			button {
		      color: white;
		      border-radius: 15px;
		      border: #009925;
		      font-family: helvetica;
		      font-size:0.8em;
		      background: #009925;
		      padding: 2% 2%  2% 2%;
		      text-decoration: none;
		      width:80%;
		    }

		    ul {
		    	list-style-type: none;
		    }

		    li {
		    	float: left;
		    }

		    #tab {
		    	width: 90%;
		    	margin-top: 3%;
		    }

		    #title {
		    	margin-top: 3%;
                margin-left:5%;
		    	font-size:1.3em;
		    	color:grey;
		    }

		    #map {
		        padding-left:3%;
		    }

JavaScript

//define tooltip 
			var tip = d3.tip()
					.attr('class','d3-tip')
					.offset([-10,0])
					.html(function(d) {
						return d.properties.name +"<br>"+"<strong>Drug Cost Per Person:</strong>"+ "$"+d.properties.value;
					})
		
			//Width and height
			var w = 500;
			var h = 300;

			//Define map projection
			var projection = d3.geo.albersUsa()
								   .translate([w/2, h/2])
								   .scale([600]);

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);
							 
			//Define quantize scale to sort data values into buckets of color
			var color = d3.scale.quantize()
								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

			var color2 = d3.scale.quantize()
								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

			var color3 = d3.scale.quantize()
								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

			//Create SVG element
			var svg = d3.select("#map")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			svg.call(tip);

			//Load in PartD data
			d3.csv("https://dl.dropboxusercontent.com/u/9622651/site/drugcostperperson_bystate_51states.csv", function(data) {

		color.domain([
					d3.min(data, function(d) { return Number(d.value); }), 
					d3.max(data, function(d) { return Number(d.value); })
				]);

				//Load in GeoJSON data
				d3.json("https://dl.dropboxusercontent.com/u/9622651/site/us-states.json", function(json) {

					//Loop through once for each data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab state name
						var dataState = data[i].name;
						
						//Grab data value, and convert from string to float
						var dataValue = parseFloat(data[i].value);
				
						//Find the corresponding state inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							var jsonState =...