JSFiddle - React, Tailwind, and code Playground

by adamehirsch

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    
<h3>How many people are in each of Wisconsin's tax brackets?</h3>

    <div id="TaxBrackets">
        <div id="bracketsTip" class="hidden">
            <p><span id="bracketsCount"></span> people
                <br />earn <span id="bracketBounds"></span>

            </p>
            <p><span id="bracketsPct"></span> of all residents</p>
        </div>
    </div>
</body>

CSS

text {
    font-family: sans-serif;
    font-size: 12px;
    fill: white;
}
h3 {
    font-family: sans-serif;
    font-style: bold;
}
.node {
    border: solid 1px #333;
    font-family:'Roboto Condensed', sans-serif;
    font-size: 11px;
    line-height: 22px;
    text-indent: 5px;
    overflow: hidden;
    position: absolute;
}
#tooltip, #bracketsTip {
    position: absolute;
    width: auto;
    height: auto;
    padding: 10px;
    z-index: 4;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.hidden {
    opacity: 0.0;
}
#tooltip p, #bracketsTip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
}
div.inTree {
    font-size: 12px;
    padding: 5px;
    margin: 5px;
    text-indent: 0px;
    background: rgba(100, 100, 100, .3);
}

JavaScript

var data = [{
    "taxbracket": "under $5,000",
        "count": "490561",
        "percentage": "16.90",
        "textlabel": "Under $5K"
}, {
    "taxbracket": "$5,000 - $10,000",
        "count": "259629",
        "percentage": "8.94",
        "textlabel": "$5K-$10K"
}, {
    "taxbracket": "$10,000 - $15,000",
        "count": "211490",
        "percentage": "7.28",
        "textlabel": "$10K-$15K"
}, {
    "taxbracket": "$15,000 - $20,000",
        "count": "191602",
        "percentage": "6.60",
        "textlabel": "$15K-$20K"
}, {
    "taxbracket": "$20,000 - $25,000",
        "count": "174854",
        "percentage": "6.02",
        "textlabel": "$20K-$25K"
}, {
    "taxbracket": "$25,000 - $30,000",
        "count": "164801",
        "percentage": "5.68",
        "textlabel": "$25K-$30K"
}, {
    "taxbracket": "$30,000 - $40,000",
        "count": "280618",
        "percentage": "9.67",
        "textlabel": "$30K-$40K"
}, {
    "taxbracket": "$40,000 - $60,000",
        "count": "389044",
        "percentage": "13.40",
        "textlabel": "$40K-$60K"
}, {
    "taxbracket": "$60,000 - $80,000",
        "count": "264122",
        "percentage": "9.10",
        "textlabel": "$60K-$80K"
}, {
    "taxbracket": "$80,000 - $100,000",
        "count": "174160",
        "percentage": "6.00",
        "textlabel": "$80K-$100K"
}, {
    "taxbracket": "$100,000 - $150,000",
        "count": "190155",
        "percentage": "6.55",
        "textlabel": "$100K-$150K"
}, {
    "taxbracket": "$150,000 - $200,000",
        "count": "52599",
        "percentage": "1.81",
        "textlabel": "$150K-$200K"
}, {
    "taxbracket": "over $200,000",
        "count": "59795",
        "percentage": "2.06",
        "textlabel": "Over $200K"
}]


var margin = {
    top: 40,
    right: 10,
    bottom: 10,
    left: 10
},
width = 1024 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom,
    radius = Math.min(width, height) / 2,
    outerRadius = 100,
    labelr...