My first adventure with trying to do some transformations of my map on click events. It got pretty sloppy and I was kept re adding rectangles because I was setting them to display:none and I guess there’s no going back from that. http://svg-whiz.com/svg/HideShow.svg
I did get the So Cal bounding box to come back without redrawing but decided not to fix all of it because it’s a weird example of different ways of doing stuff. Even if it’s a bit of a mess I think I can learn something from it.
Click on the Bay Area to zoom in then on the green box to zoom back out and then repeat to your hearts desire.
Better yet show me how I should have coded it….
The map is of California Congressional Assembly Districts until 2020.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
.casubun {
stroke-width:.3px;
stroke:black;
}
.bords{
fill:none;
stroke-width:5px;
stroke:white;
shape-rendering:crispEdges;
}
.infor {
position:absolute;
background:white;
text:black;
margin-top:10px;
}
svg{
z-index:0;
}
</style>
<body class='zoomO'>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<div class="infor"></div>
<script>
var zoom = 0;
/* JavaScript goes here. */
//choose dimensions of my svg thing
var width = 960,
height = 600;
// so category20 will make an array of 20 colors
var color = d3.scale.category20();
color.range(color.range().slice(0,120));
//Choosing mercator because that's what I made the data in and also scale and center setting
var projection = d3.geo.mercator()
.scale(2000)
.translate([width / 2, height / 2])
.center([-120,36])
;
// So now when I call path on jam it will use this projection and stuff
var path = d3.geo.path()
.projection(projection);
// Appending the actual SVG to the body of the page w/ height width
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var infor = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
var districts = topojson.feature(cali, cali.objects.assemD2011).features;
console.log(typeof(districts));
//console.log(d3.values(d3.values(districts)));
var numdist = [];
for(ohh in districts){
// console.log(districts[ohh].properties.DISTRICT);
var distnum = districts[ohh].properties;
numdist.push(distnum);
}
console.log(numdist)
g.append("path")
.datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
return a === b;
}))
.attr("d",path)
.attr("class", "bords");
g.selectAll(".casubun")
.data(districts)
.enter().append("path")
.attr("d", path)
.style("fill",function(d,i){
return color(d.color=d3.max(neighbors[i],function(n){
return districts[n].color;
})
+ 1 | 0
);
})
.attr("class", function(d) { return "casubun"; })
.on('click',function(d){
console.log(d)
})
.on('mouseover',function(d,i){
d3.select('.infor')
.style({
height:'50',
left:'65%',
top:'15%',
color:"purple"
})
.classed("hidden",false)
.text('District ' + d.properties.DISTRICT + ' has ' +'a population of' + d.properties.POP)
})
.on('mouseout',function(){
d3.select(".infor").classed("hidden",true);
})
svg.append('rect')
.attr("x", 365)
.attr("y", 180)
.attr("width", 80)
.attr("height", 89)
.style("fill","yellow")
.style('fill-opacity', 0)
.style('stroke', 'orange')
.style('stroke-width',2)
.attr("class", "bayArea")
.on("click", bayclick);
svg.append('rect')
.attr("x", 490)
.attr("y", 360)
.attr("width", 130)
.attr("height", 99)
.style('fill-opacity', 0)
.style('stroke', 'blue')
.style('stroke-width',2)
.attr("class", "socal")
;
d3.select('body.zoomed')
.on('click', unzoom)
});
var moverx = -680;
var movery = -370;
zoomer = 0;
function bayclick (){
console.log('clicked on the bay rec');
d3.select('g')
// .attr("class", "zoomed")
.attr("transform", 'translate(' + moverx +','+ movery +')scale('+ 2.5+ ')')
// console.log(projection);
// projection.center([-120,36])
d3.selectAll('rect')
.style('opacity', 0)
// .style('display','none');
d3.selectAll('svg')
.append('rect')
.attr('x',20)
.attr('y',9)
.attr('height',2000)
.attr('width',80)
.attr('fill','green')
.on('click',unzoom)
.attr('class','zoomed')
return zoom += 1;
}
function unzoom(d){
console.log('gotta undo that done xoom');
d3.selectAll('g')
.attr("transform", 'translate(' + 0 +','+ 0 +')scale('+ 1+ ')');
console.log(projection);
d3.selectAll('.zoomed')
.style('opacity', 0);
zoom = 0;
d3.selectAll('rect.zoomed')
.style('opacity', 1)
.style('display','none');
svg.append('rect')
.attr("x", 365)
.attr("y", 180)
.attr("width", 80)
.attr("height", 89)
.style("fill","yellow")
.style('fill-opacity', 0)
.style('stroke', 'orange')
.style('stroke-width',2)
.attr("class", "bayArea")
.on("click", bayclick);
d3.select('rect.socal')
.style({'opacity':1})
}
// selecting the whole body to change the background color
d3.select("body")
.transition()
.style("background-color", "black");
</script>
</body>