User:Planemad/hacks/d3maps.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

 
$.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')}
  );
 
    });