$.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(){
//Load the map data
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(900)
.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;
//return wikidata key from shape
wikidata=function(d){
return d.properties.wikidata;
};
//add wikidata id to data attribute from existing labels
linkwikidata=function(lang){
};
//Returns a label for a wikidata id and language code
wdLabel=function(q,lang){
$.ajax({
dataType: "json",
url: "http://www.wikidata.org/w/api.php?action=wbgetentities&sites=enwiki&ids="+q+"&languages="+lang+"&props=labels&format=json&callback=?" ,
}).done(function ( data) {
// do my stuff
for(var q in data.entities);
//console.log(data.entities[q].labels[lang].value);
return data.entities[q].labels[lang].value;
});
};
//Change map language
wdLang= function(lang){
$("text[data]").each(function(){
$.ajax({
dataType: "json",
url: "http://www.wikidata.org/w/api.php?action=wbgetentities&sites=enwiki&ids="+this.getAttribute("data")+"&languages="+lang+"&props=labels&format=json&callback=?" ,
}).done(function ( data) {
// do my stuff
for (var q in data.entities)
$("text[data='"+q+"']")[0].textContent=data.entities[q].labels[lang].value;
// console.log($("text[data='"+q+"']").textContent);
// console.log(data.entities[q].labels[lang].value);
console.log(data);
});
});
};
//focus state
clickState=function(d){
$("table tbody tr").slideUp();
var stateName=$("text[data='"+wikidata(d)+"']")[0].textContent;
$("tbody tr a:contains('"+stateName+"')").parent().parent().slideDown();
d3.selectAll("svg text").classed("focus",false);
d3.selectAll("svg path").classed("focus",false);
d3.selectAll("[data='"+wikidata(d)+"']").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 wikidata(d); })
.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='"+wikidata(d)+"']").classed("active",true);
d3.select("text[data='"+wikidata(d)+"']").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='"+wikidata(d)+"']").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 wikidata(d);})
.text(function(d) { label= wdLabel(wikidata(d),"en");
console.log(label);
return label;
})
//-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='"+wikidata(d)+"']").classed("active",true);
})
//-dim all state paths
.on("mouseout", function(d,i){
d3.selectAll("path[data='"+wikidata(d)+"']").classed("active",false);
});
wdLang("en");
//Legend teaser
$('.subheader span').hover(
function(){$('svg .'+$(this).attr('class')).attr('class','active')},
function(){$('svg .active').removeAttr('class','active')}
);
});