Widget:PlaceNamesChoropleths: Difference between revisions

From International Robin Hood Bibliography
mNo edit summary
mNo edit summary
 
(50 intermediate revisions by the same user not shown)
Line 85: Line 85:
var cur = d.colours[i];
var cur = d.colours[i];
if (val <= cur.limit) {
if (val <= cur.limit) {
colour = cur.rgb;
colour = "#" + cur.rgb;
break;
break;
}
}
Line 106: Line 106:
cur.totalcol = getColour(cur.totalidx);
cur.totalcol = getColour(cur.totalidx);
cur.pnperkm2col = getColour(cur.pnperkm2idx);
cur.pnperkm2col = getColour(cur.pnperkm2idx);
cur.pnperkm2popcol = getColour(cur.pnperkm2popidx);
cur.pnperkm2PopularCollection = getColour(cur.pnperkm2popidx);
}
}
}
}
Line 140: Line 140:
var PNs = res.query.results;
var PNs = res.query.results;
for (var key in PNs) {
for (var key in PNs) {
var admdiv = PNs[key].printouts.Pnadmdiv[0];
var admdiv = PNs[key].printouts.AdministrativeDivision[0];
var interest = PNs[key].printouts.Pninterest[0];
var interest = PNs[key].printouts.PlaceNamesInterest[0];
var admdivObj = d.counties[admdiv];
var admdivObj = d.counties[admdiv];
admdivObj.total++;
admdivObj.total++;
Line 158: Line 158:
if (!d.stats) {
if (!d.stats) {
w.map.addSpinner(get(w.map.curMap));
w.map.addSpinner(get(w.map.curMap));
var url = "https://www.irhb.org/wiki/api.php?action=ask&query=[[Category:English%20counties%20with%20place-names]]|?Area|?Population&format=json";
var url = "/w/api.php?action=ask&query=[[Category:English%20counties%20with%20place-names]]|?Area|?Population&format=json";
fetch(url).then(res => res.json()).then((jsnCty) => {
fetch(url).then(res => res.json()).then((jsnCty) => {
calcCounties(jsnCty);
calcCounties(jsnCty);
url = "https://www.irhb.org/wiki/api.php?action=ask&query=[[Category:English%20place-names]]|?Pninterest|?Pnadmdiv|sort=Pnadmdiv&format=json";
url = "/w/api.php?action=ask&query=[[Category:English%20place-names]]|?PlaceNamesInterest|?AdministrativeDivision|sort=AdministrativeDivision&format=json";
fetch(url).then(res => res.json()).then((jsnPN) => {
fetch(url).then(res => res.json()).then((jsnPN) => {
calcPlaceNames(jsnPN);
calcPlaceNames(jsnPN);
d.stats = true;
d.stats = true;
w.map.prepareMap();
w.map.prepareMap();
prepareDataTable();
}).catch(err => { throw err });
}).catch(err => { throw err });
}).catch(err => { throw err });
}).catch(err => { throw err });
Line 171: Line 172:
w.map.prepareMap();
w.map.prepareMap();
}
}
};
function prepareDataTable() {
var e = window.IRHB.data.England;
var c = window.IRHB.data.counties;
var tables = '<table class="bordertable expando" id="choropleth1" style="margin-bottom:-1px;">' +
'<tbody id="england">' +
'<tr class="header"><th colspan="2">England</th><th><span class="expando-c">&#x2014;&#xa0;</span><span class="expando-o">&#x25a2;&#xa0;</span></th></tr>' +
'<tr><td>Artifact</td><td colspan="2">' + e.Artifacts + '</td></tr>' +
'<tr><td>Literary locale</td><td colspan="2">' + e["Literary locale"] + '</td></tr>' +
'<tr><td>Local tradition</td><td colspan="2">' + e["Local tradition"] + '</td></tr>' +
'<tr><td>Miscellaneous</td><td colspan="2">' + e.Miscellaneous + '</td></tr>' +
'<tr><td>Robin Hood name</td><td colspan="2">' + e["Robin Hood name"] + '</td></tr>' +
'<tr><td>Area (km<sup>2</sup>)</td><td colspan="2">' + e.area + '</td></tr>' +
'<tr><td>Population</td><td colspan="2">' + e.population + '</td></tr>' +
'<tr><td>Pop. density/km<sup>2</sup></td><td colspan="2">' + e.popdensity + '</td></tr>' +
'<tr><td>Place-names (PN)</td><td colspan="2">' + e.total + '</td></tr>' +
'<tr><td>Counties</td><td colspan="2">' + e.counties + '</td></tr>' +
'<tr><td>Km<sup>2</sup>/person</td><td colspan="2">' + e.km2perperson + '</td></tr>' +
'<tr><td>Km<sup>2</sup>/PN</td><td colspan="2">' + e.km2perpn + '</td></tr>' +
'<tr><td>PN/km<sup>2</sup></td><td colspan="2">' + e.pnperkm2 + '</td></tr>' +
'<tr><td>PN/km<sup>2</sup> idx</td><td colspan="2">' + e.pnperkm2idx + '</td></tr>' +
'<tr><td>PN/county avg.</td><td colspan="2">' + e.pnpercounty + '</td></tr>' +
'</tbody>';
var counties = Object.keys(c);
var nCounties = counties.length;
var idxLeics = 19;
for (var i = 0; i < idxLeics; i++) {
var cty = counties[i];
tables += getCountyData(cty, c[cty]);
}
tables += '</table>';
tables += '<table class="bordertable expando" id="choropleth2">';
for (var i = idxLeics; i < nCounties; i++) {
var cty = counties[i];
tables += getCountyData(cty, c[cty]);
}
tables += '</table>';
get("dSet").innerHTML = tables;
window.IRHB.expando.init();
};
function getCountyData(cty, d) {
var txt = '<tbody id="' + cty + '"><tr class="header"><th colspan="2">' + cty + '</th>' +
'<th><span class="expando-c">—&nbsp;</span><span class="expando-o">▢&nbsp;</span></th></tr>' +
'<tr><td style="width:129px;">Area (km<sup>2</sup>)</td><td colspan="2">' + d.area + '</td></tr>' +
'<tr><td>Population</td><td colspan="2">' + d.population + '</td></tr>' +
'<tr><td>Pop. density/km<sup>2</sup></td><td colspan="2">' + d.popdensity + '</td></tr>' +
'<tr><td>Km<sup>2</sup>/PN</td><td colspan="2">' + d.km2perpn + '</td></tr>' +
'<tr><td>PN/km<sup>2</sup></td><td colspan="2">' + d.pnperkm2 + '</td></tr>' +
'<tr><td>RH names</td><td colspan="2">' + d["Robin Hood name"] + '</td></tr>' +
'<tr><td>Local traditions</td><td colspan="2">' + d["Local tradition"] + '</td></tr>' +
'<tr><td>Literary locales</td><td colspan="2">' + d["Literary locale"] + '</td></tr>' +
'<tr><td>Artifacts</td><td colspan="2">' + d.Artifacts+ '</td></tr>' +
'<tr><td>Miscellaneous</td><td colspan="2">' + d.Miscellaneous + '</td></tr>' +
'<tr><td>Total count</td><td colspan="2">' + d.total + '</td></tr>' +
'<tr><td>Count idx.</td><td>' + d.totalidx + '</td><td style="background-color:' + d.totalcol + '; width:1.5em;"></td></tr>' +
'<tr><td>PN/km<sup>2</sup> idx.</td><td>' + d.pnperkm2idx + '</td><td style="background-color:' + d.pnperkm2col + '; width:1.5em;"></td></tr>' +
'<tr><td>PN/km<sup>2</sup>/pop. idx.</td><td>' + d.pnperkm2popidx + '</td><td style="background-color:' + d.pnperkm2PopularCollection + '; width:1.5em;"></td></tr>' +
'</tbody>';
return txt;
}
}


}() );
}() );
Line 197: Line 262:
for (var key in d.counties) {
for (var key in d.counties) {
var cur = d.counties[key];
var cur = d.counties[key];
paths[cur.path].style.stroke = "#ffffff";
paths[cur.path].style.strokeWidth = "0px";
}
}
} else {
} else {
Line 204: Line 269:
var cur = d.counties[key];
var cur = d.counties[key];
paths[cur.path].style.fill = cur.totalcol;
paths[cur.path].style.fill = cur.totalcol;
paths[cur.path].style.stroke = "#ffffff";
paths[cur.path].style.strokeWidth = "0px";
}
}
} else if (w.nav.choroVar === "area") {
} else if (w.nav.choroVar === "area") {
Line 210: Line 275:
var cur = d.counties[key];
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2col;
paths[cur.path].style.fill = cur.pnperkm2col;
paths[cur.path].style.stroke = "#ffffff";
paths[cur.path].style.strokeWidth = "0px";
}
}
} else {
} else {
for (var key in d.counties) {
for (var key in d.counties) {
var cur = d.counties[key];
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2popcol;
paths[cur.path].style.fill = cur.pnperkm2PopularCollection;
paths[cur.path].style.stroke = "#ffffff";
paths[cur.path].style.strokeWidth = "0px";
}
}
}
}
Line 258: Line 323:
var mp = get(m.curMap);
var mp = get(m.curMap);
var width = 496, height = 550;
var width = 496, height = 550;
var projection = d3.geo.conicEqualArea()
var projection = d3.geo.conicEqualArea().scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]).parallels([49.95898294542323,55.81107189358492]).rotate([1.4602454263940616]).translate([202.798519176517,306.70813464248357]);
.scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008])
.parallels([49.95898294542323,55.81107189358492]).rotate([1.4602454263940616])
.translate([202.798519176517,306.70813464248357]);
var path = d3.geo.path().projection(projection);
var path = d3.geo.path().projection(projection);
var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height);
var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height);
Line 269: Line 331:
features = svg.append("g").attr("class","features");
features = svg.append("g").attr("class","features");
tooltip = d3.select("body").append("div").attr("class","ttip");
tooltip = d3.select("body").append("div").attr("class","ttip");
d3.json("/wiki/geo/england/country/England.json",function(error,geodata) {
d3.json("/w/geo/england/country/England.json",function(error,geodata) {
if (!error) {
if (!error) {
features.selectAll("path").data(geodata.features).enter().append("path")
features.selectAll("path").data(geodata.features).enter().append("path")
.attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip)
.attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip)
.on("mouseout",hideTooltip).on("click",clicked);
.on("mouseout",hideTooltip).on("click",clicked);
if (m.curMap === "navMap" || m.curMap === "choroMap") {
w.choro.choropleth();
w.choro.choropleth();
}
if (mp.childNodes.length > 1) {
if (mp.childNodes.length > 1) {
mp.removeChild(mp.childNodes[0]);
mp.removeChild(mp.childNodes[0]);
Line 296: Line 356:
m.addSpinner = function (elem) {
m.addSpinner = function (elem) {
var svg = '<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">';
var svg = '<svg version="1.1" id="spinner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">';
svg += '<path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">';
svg += '<path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">';
svg += '<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>';
svg += '<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>';
svg += '</path></svg>';
svg += '</path></svg>';
elem.innerHTML = svg;
elem.innerHTML = svg;
elem.firstElementChild.firstElementChild.style.strokeWidth = "0px";
};
};


Line 385: Line 445:
n.toggleNav = function() {
n.toggleNav = function() {
var t = event.target.id;
get("choroMapLegend1").innerHTML = choroLegend[n.choroVar].s1;
if (t === "nmnChoro") {
get("choroMapLegend2").innerHTML = choroLegend[n.choroVar].s2;
get("choroMapLegend1").innerHTML = choroLegend[n.choroVar].s1;
get("choroMapLegend3").innerHTML = choroLegend[n.choroVar].s3;
get("choroMapLegend2").innerHTML = choroLegend[n.choroVar].s2;
get("choroMap").style.display = "block";
get("choroMapLegend3").innerHTML = choroLegend[n.choroVar].s3;
get("choroMapLegend").style.display = "block";
get("choroMap").style.display = "block";
m.curMap = "choroMap";
get("choroMapLegend").style.display = "block";
}
if (t === "nmnChoro") {
m.curMap = "choroMap";
}
console.log("OKs");
m.initMap();
m.initMap();
};
};
Line 406: Line 460:
( function() {
( function() {


    if (location.href.includes("Place-name_choropleths")) {
        document.getElementsByClassName("mw-selflink")[0].style.display = "none";
    }
     var w = window.IRHB;
     var w = window.IRHB;
     var gjson = "https://www.irhb.org/wiki/geo/england/country/England.json";
     var gjson = "/w/geo/england/country/England.json";
     var script = document.createElement('script');
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.type = 'text/javascript';
     script.src = "https://www.irhb.org/wiki/js/d3js/d3.v3.min.js";
     script.src = "/w/js/d3js/d3.v3.min.js";
     script.onload = w.nav.prepareNav;
     script.onload = w.nav.prepareNav;
     document.head.appendChild(script);
     document.head.appendChild(script);

Latest revision as of 15:47, 6 November 2022

This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.