xxxxxxxxxx
<meta charset="utf-8">
<style type="text/css">
body {
background: #FBB448;
font-family: futura;
font-size: 12px;
fill: white;
}
h1, h2, h3, h4, h5, h6 {
font-family: futura;
color: white;
text-align: left;
}
/*.counties {
fill: none;
stroke: #000;
stroke-width: .25;
stroke-dasharray: 1, 1;
}*/
.counties {
stroke: #F5DD7B;
stroke-width: .25;
fill: #F5DD7B;
}
.states {
stroke: #F5DD7B;
stroke-width: .15;
stroke-dasharray: 1px 1px;
fill: none;
}
.background {
fill: none;
}
.fill {
fill: #59A985 ;
}
.graticule {
fill: none;
stroke: #F5DD7B;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
#countyText {
position: absolute;
text-align: center;
padding: 2px;
font-family: Futura;
font-size: 12px;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
}
.bubbles {
fill-opacity: .25;
stroke: white;
pointer-events: none;
}
.land {
fill:#FBB448 ;
}
.boundary {
fill: none;
stroke: #F5DD7B;
stroke-width: 0.5px;
}
.stroke {
fill: none;
stroke: #F5DD7B;
stroke-width: 1px;
}
#sliderValue {
font-family: Futura;
}
</style>
<body>
<div class="g-chart-container" id="header">
<h1>Chicago Gun Traces</h1>
</div>
<input type="range" min='0' max='50' id='slider' value='0'/>
<span id='sliderValue'>0</span>
<div> Guns </div>
<div id='countyText'> </div>
<div id='map'> </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script type="text/javascript">
var width = 960,
height = 500,
centered;
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
// var colorScale = d3.scale.threshold()
// .domain([1,910,1107,1880,2716,15782])
// .range(["#fff","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a"]);
var colorScale = d3.scaleOrdinal()
.range(colorbrewer.PuOr[2,8].reverse());
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", clicked);
var g = svg.append("g")
queue()
.defer(d3.csv, "guns-history.csv")
.defer(d3.json, "us.json")
.await(ready);
d3.select("#slider")
.on("input", function() {
var myValue = this.value
d3.selectAll(".counties")
.style("fill", function(d) {
return gunsLookup[d.id] > myValue ? "#bfbfbf" : "#fff" ;
})
d3.selectAll(".circles")
.attr("r", function(d) {
return gunsLookup[d.id] > myValue ? Math.sqrt(gunsLookup[d.id])/Math.PI : 0;
})
d3.select("#sliderValue").text(myValue);
})
function ready(error, guns, us) {
if (error) return console.warn(error);
var countyFeatures = topojson.feature(us, us.objects.counties).features;
var stateFeatures = topojson.feature(us, us.objects.states).features;
gunsLookup = {};
locationLookup = {};
guns.forEach(function(d) {
d.count3 = +d.count3;
gunsLookup[d.FIPS] = d.count3;
locationLookup[d.FIPS] = d.county;
})
g.append("g")
.attr("id", "county")
.selectAll(".counties")
.data(countyFeatures)
.enter().append("path")
.attr("class","counties")
.attr("d", path)
.style("fill", function(d) {
return gunsLookup[d.id] > 0 ? "#bfbfbf" : "#fff" ;
})
.on("click", clicked)
.on("mouseenter", function(d) {
d3.select(this)
.style("stroke-width", 1.5)
.style("stroke-dasharray", 0)
d3.select("#countyText")
.transition()
.style("opacity", 1)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px")
.text(locationLookup[d.id])
})
.on("mouseleave", function(d) {
d3.select(this)
.style("stroke-width", .25)
.style("stroke-dasharray", ".5px .5px")
d3.select("#countyText")
.transition()
.style("opacity", 0);
});
g.append("g")
.attr("id", "state")
.selectAll(".states")
.data(stateFeatures)
.enter().append("path")
.attr("class","states")
.attr("d", path)
.style("fill", "none")
.style("stroke","#000")
g.selectAll(".bubbles")
.data(countyFeatures)
.enter().append("g")
.attr("class","bubbles")
.attr("transform",function(d)
{ return "translate(" + path.centroid(d) + ")"})
.append("circle")
.attr("class","circles")
.attr("r", function(d) {
return Math.sqrt(gunsLookup[d.id])/Math.PI;
})
.style("fill", function(d) {
return colorScale(gunsLookup[d.id]);
});
}
function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.transition()
.duration(750)
.ease(d3.easePoly)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1 / k + "px");
}
</script>
Modified http://d3js.org/d3.v4.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
Modified http://d3js.org/colorbrewer.v1.min.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/colorbrewer.v1.min.js