User:Guaka/hacks/d3maps.js

$.when($.getScript("//en.wikipedia.org/w/index.php?title=User:Planemad/hacks/d3.min.js&action=raw&ctype=text/javascript"),   $.getScript("//en.wikipedia.org/w/index.php?title=User:Planemad/hacks/topojson.js&action=raw&ctype=text/javascript"),    $.getScript("//en.wikipedia.org/w/index.php?title=User:Planemad/hacks/india.json&action=raw&ctype=text/json")) .done(function{

var width = 500, height = 600, centered; var projection = d3.geo.albers .scale(50) .translate([width / 2, height / 2]); var projection = d3.geo.mercator .center([82.7,23]) .scale(800) .translate([width / 2, height / 2]); var path = d3.geo.path .projection(projection); var svg = d3.select("#map").append("svg") .attr("width", width) .attr("height", height); var indiamap=topojson.feature(india, india.objects.indiamap).features; //focus state clickState=function(d){ $("article").slideUp; var stateName=$("text[data='"+d.id+"']")[0].textContent; $("article h3:contains('"+stateName+"')").parent.slideDown; d3.selectAll("svg text").classed("focus",false); d3.selectAll("svg path").classed("focus",false); d3.selectAll("[data='"+d.id+"']").classed("focus",true); }; //create state paths svg.selectAll(".subunit") .data(topojson.feature(india, india.objects.indiamap).features) .enter.append("path") .attr("data", function(d) { return d.id; }) .attr("d", path) //-interactions //-click path navigator .on("click", clickState) .on("mouseover", function(d,i){   d3.selectAll("path").classed("active",false);    d3.selectAll("text[data='"+d.id+"']").classed("active",true);    d3.select("text[data='"+d.id+"']").transition.styleTween("font-size", function { return d3.interpolate("100%", "150%"); });  }) .on("mouseout", function(d,i){   d3.selectAll("text").classed("active",false);    d3.select("text[data='"+d.id+"']").transition.styleTween("font-size", function { return d3.interpolate("150%", "100%"); });  }); //text labels: create for all states svg.selectAll("text") .data(topojson.feature(india, india.objects.indiamap).features) .enter .append("text") .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("class", function(d) { return d.properties.ENGTYPE_1}) .attr("data", function(d) { return d.id}) .text(function(d) { return d.properties.NAME_1; }) //-interactions //-click text map navigator .on("click", clickState) //-highlight corresponding state path .on("mouseover", function(d,i){  d3.selectAll("text").classed("active",false);   d3.selectAll("path[data='"+d.id+"']").classed("active",true); }) //-dim all state paths .on("mouseout", function(d,i){   d3.selectAll("path[data='"+d.id+"']").classed("active",false);  }); });