|
<!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="http://d3js.org/d3.v3.js"></script> |
|
<script src="http://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> |
