florida circuit drug map

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text{
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

.legend {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 60%;
    }

rect {
        stroke-width: 12;
    }

text {
        font: 10px sans-serif;
    }

.axis text {
        font: 10px sans-serif;
    }

.axis path{
        fill: none;
        stroke: #none;
    }

.axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

.axis .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, .7);
    }

.axisHorizontal path{
        fill: none;
        stroke: #000;
    }

.axisHorizontal line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

.axisHorizontal .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }

.bar {
        fill: steelblue;
        fill-opacity: .9;
    }

.x.axis path {
        stroke: #000;
    }

.toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: rgba(0, 0, 0, 0.8);
        border: 0 none;
        border-radius: 2px;
        box-shadow: -3px 3px 15px #888888;
        color: white;
        font-size: 16px;
        padding: 5px;
        text-align: center;
    }

text.h3 {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-align: center;
        fill: #555;
        font-size: 18px;
        font-weight: 700;
    }
    .form {
        text-align: center
    }

</style>
<svg width="960" height="500"></svg>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: (39), right: (40), bottom: (30), left: (40)},
       width = 960 - margin.left - margin.right,
       height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
        .range([height, 0]);

var formatcomma = d3.format(",.0f")	;

var z = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
        .scale(x0)
        .orient("bottom")
        .tickFormat(null)
        .outerTickSize(0);

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(8, "s");

var divTooltip = d3.select("body").append("div").attr("class", "toolTip");

var svg = d3.select("svg").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

dataset = [
        {
            "circuit": "15",
            "white": "177.12",
            "latino": "51.15",
            "black": "1197.17"
        },
        {
            "circuit": "17",
            "white": "276.99",
            "latino": "55.49",
            "black": "1198.83"
        },
        {
            "circuit": "11",
            "white": "174.00",
            "latino": "32.63",
            "black": "1226.48"
        },
        {
            "circuit": "9",
            "white": "301.46",
            "latino": "176.61",
            "black": "1389.07"
        },
        {
            "circuit": "20",
            "white": "313.94",
            "latino": "103.66",
            "black": "2045.25"
        },
        {
            "circuit": "13",
            "white": "351.65",
            "latino": "234.77",
            "black": "2076.21"
        },
        {
            "circuit": "2",
            "white": "437.32",
            "latino": "144.41",
            "black": "2267.83"
        },
        {
            "circuit": "3",
            "white": "802.55",
            "latino": "188.93",
            "black": "2326.89"
        },
        {
            "circuit": "10",
            "white": "592.99",
            "latino": "295.92",
            "black": "2327.67"
        },
        {
            "circuit": "ALL",
            "white": "437.44",
            "latino": "176.72",
            "black": "2388.29"
        },
        {
            "circuit": "1",
            "white": "448.86",
            "latino": "132.58",
            "black": "2454.63"
        },
        {
            "circuit": "18",
            "white": "435.05",
            "latino": "164.58",
            "black": "2512.35"
        },
        {
            "circuit": "7",
            "white": "462.92",
            "latino": "157.86",
            "black": "2517.35"
        },
        {
            "circuit": "4",
            "white": "512.70",
            "latino": "197.78",
            "black": "2533.05"
        },
        {
            "circuit": "14",
            "white": "930.91",
            "latino": "285.69",
            "black": "2589.56"
        },
        {
            "circuit": "5",
            "white": "487.32",
            "latino": "299.54",
            "black": "2676.32"
        },
        {
            "circuit": "8",
            "white": "424.19",
            "latino": "94.89",
            "black": "2880.66"
        },
        {
            "circuit": "12",
            "white": "363.52",
            "latino": "243.36",
            "black": "2884.21"
        },
        {
            "circuit": "6",
            "white": "436.48",
            "latino": "223.60",
            "black": "3107.75"
        },
        {
            "circuit": "16",
            "white": "449.61",
            "latino": "134.60",
            "black": "3451.65"
        },
        {
            "circuit": "19",
            "white": "369.20",
            "latino": "316.40",
            "black": "4102.88"
        }
    ];

var options = d3.keys(dataset[0]).filter(function(key) { return key !== "circuit"; });

dataset.forEach(function(d) {
        d.valores = options.map(function(name) { return {name: name, value: +d[name]}; });
    });

x0.domain(dataset.map(function(d) { return d.circuit; }));
    x1.domain(options).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(dataset, function(d) { return d3.max(d.valores, function(d) { return d.value; }); })]);

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", 0)
        .attr("y", 10)
        .attr("dy", ".32em")
        .style("text-anchor", "end")
        .attr("font-weight", "normal")
        .text("Prisoners per 100k Adult Residents");

svg.append("text")
       .attr("x", (width / 2))
       .attr("y", 120)
       .attr("width", 400)
       .attr("text-anchor", "middle")
       .style("font-size", "13px")
       .attr("font-weight", "strong")
       .text("Statewide, blacks are 5.5 times more likely to be incarcerated than whites.")
       ;

var bar = svg.selectAll(".bar")
        .data(dataset)
        .enter().append("g")
        .attr("class", "rect")
        .attr("transform", function(d) { return "translate(" + x0(d.circuit) + ",0)"; });

bar.selectAll("rect")
        .data(function(d) { return d.valores; })
        .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("x", function(d) { return x1(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("value", function(d){return d.name;})
        .attr("height", function(d) { return height - y(d.value); })
        .style("fill", function(d) { return z(d.name); })

.on("mouseover", function(d) {
            if(d3.select(this).style("opacity") != 0){
                div.transition()
                    .duration(200)
                    .style("opacity", .8);
                div .html(d.datetime.substring(0,10) )
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 24) + "px");
            }
        })

bar
        .on("mousemove", function(d){
            divTooltip.style("left", d3.event.pageX - 50 +"px");
            divTooltip.style("top", d3.event.pageY-150+"px");
            divTooltip.style("display", "inline-block");
            var x = d3.event.pageX, y = d3.event.pageY
            var elements = document.querySelectorAll(':hover');
            l = elements.length
            l = l-1
            elementData = elements[l].__data__
            divTooltip.html("In Circuit " + (d.circuit)+",<br> <span style='color:red'><strong> 1 in " +
                formatcomma(100000/ elementData.value) + "</strong><br/></span>" +
                elementData.name + " adults<br>is imprisoned");
        });

bar
        .on("mouseout", function(d){
            divTooltip.style("display", "none");
        });

var legend = svg.selectAll(".legend")
        .data(options.slice())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
        .attr("x", width - 70)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", z);

legend.append("text")
        .attr("x", width - 75)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });
  
   svg.append("text")
       .attr("class", "h3")
       .attr("x", width/2)
       .attr('y', 10)
       .attr("text-anchor", "middle")
       .text("Imprisonment Rates per 100k Adults, by Circuit and Race");

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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