D3OG

All examples By author By category About

sarubenfeld

Full window Github gist

chicago gun traces : zoom and slider (adapted from pstuffa)

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

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>

</body>

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