US Choropleth Map

This was made from a dataset for 2011 US agriculture. Shows agricultural output for EACH STATE IN 2011. This is an example of a choropleth map

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <style type="text/css">
        /* On mouse hover, lighten state color */

path:hover {
            fill-opacity: .7;
        }

/* Style for Custom Tooltip */

.d3-tip {
            line-height: 1;
            font-weight: bold;
            padding: 12px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            border-radius: 2px;
            pointer-events: none;
        }

/* Creates a small triangle extender for the tooltip */

.d3-tip:after {
            box-sizing: border-box;
            display: inline;
            font-size: 10px;
            width: 100%;
            line-height: 1;
            color: rgba(0, 0, 0, 0.8);
            position: absolute;
            pointer-events: none;
        }

/* Northward tooltips */

.d3-tip.n:after {
            content: "\25BC";
            margin: -1px 0 0 0;
            top: 100%;
            left: 0;
            text-align: center;
        }

/* Eastward tooltips */

.d3-tip.e:after {
            content: "\25C0";
            margin: -4px 0 0 0;
            top: 50%;
            left: -8px;
        }

/* Southward
tooltips */

.d3-tip.s:after {
            content: "\25B2";
            margin: 0 0 1px 0;
            top: -8px;
            left: 0;
            text-align: center;
        }

/* Westward
tooltips */

.d3-tip.w:after {
            content: "\25B6";
            margin: -4px 0 0 -1px;
            top: 50%;
            left: 100%;
        }

/* Legend Font Style */

body {
            font: 11px sans-serif;
        }

/* Legend Position Style */

.legend {
            position: absolute;
            left: 800px;
            top: 350px;
        }
    </style>
</head>

<body>
    <hr>
    <hr>
    <div id="US"></div>
    <script src="choropleth_us.js"></script>
    <script type="text/javascript">
        d3.csv("agri.csv", function (data) {
            var us1 = new ChoroplethUSA(data, "#US", 500, "total", [13, 75, 120, 250, 600, 1500, 3000, 12000, 17000]);
        });
    </script>
</body>

</html>

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js