Skip to content

Instantly share code, notes, and snippets.

@cyrusobrien

cyrusobrien/.block

Last active May 1, 2017 21:51
Show Gist options
  • Save cyrusobrien/0bd185cf0724a6dafcf4fbd2219557d1 to your computer and use it in GitHub Desktop.
Save cyrusobrien/0bd185cf0724a6dafcf4fbd2219557d1 to your computer and use it in GitHub Desktop.
Download ZIP
florida circuit drug map
Raw
.block
license: mit
Raw
index.html
<!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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment