User:Planemad/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{       //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')}  ); });