Widget:Test1: Difference between revisions

From International Robin Hood Bibliography
mNo edit summary
mNo edit summary
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude><div class="no-img">This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly><div id="navMapNav"></div><script>
<noinclude><div class="no-img">No current project.</div></noinclude><includeonly><script>
//Utility
( function() {
window.IRHB = window.IRHB || {};
 
window.IRHB.get = window.IRHB.get || function(elem) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
return elem;
};
}() );
 
 
 
//Data
( function() {
window.IRHB = window.IRHB || {};
var w = window.IRHB;
w.data = {};
var d = w.data;
d.stats = false;
var get = w.get;
 
d.colours = [
{limit: 10, rgb: "a30000"}, {limit: 20, rgb: "b70000"}, {limit: 30, rgb: "d11919"}, {limit: 40, rgb: "db4c4c"}, {limit: 50, rgb: "e06666"}, {limit: 60, rgb: "e57f7f"},
{limit: 70, rgb: "ea9999"}, {limit: 80, rgb: "efb2b2"}, {limit: 90, rgb: "f4cccc"}, {limit: 100, rgb: "f9e5e5"}, {limit: 110, rgb: "ffffff"}, {limit: 120, rgb: "f9faf9"},
{limit: 130, rgb: "f3f5f3"}, {limit: 140, rgb: "ecefec"}, {limit: 150, rgb: "d9e0da"}, {limit: 160, rgb: "c7d0c7"}, {limit: 170, rgb: "b4c1b5"}, {limit: 180, rgb: "a2b1a3"},
{limit: 190, rgb: "8fa290"}, {limit: 200, rgb: "7c927e"}, {limit: 300, rgb: "6a836b"}, {limit: 400, rgb: "577359"}, {limit: 500, rgb: "456447"}, {limit: 600, rgb: "3e5a3f"},
{limit: 700, rgb: "375038"}, {limit: 800, rgb: "304631"}, {limit: 900, rgb: "293c2a"}, {limit: 1000, rgb: "223223"}, {limit: 1500, rgb: "1b281c"}, {limit: 2000, rgb: "141e15"}
];
var nCols = d.colours.length;
d.England = {'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0};
d.counties = {
'Bedfordshire': {'path': 1, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Berkshire': {'path': 2, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Buckinghamshire': {'path': 3, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Cambridgeshire': {'path': 4, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Cheshire': {'path': 5, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Cornwall': {'path': 6, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Cumberland': {'path': 0, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Derbyshire': {'path': 7, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Devon': {'path': 8, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Dorset': {'path': 9, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Durham': {'path': 10, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Essex': {'path': 11, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Gloucestershire': {'path': 12, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Hampshire': {'path': 13, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Herefordshire': {'path': 14, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Hertfordshire': {'path': 15, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Huntingdonshire': {'path': 16, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Kent': {'path': 17, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Lancashire': {'path': 18, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Leicestershire': {'path': 19, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Lincolnshire': {'path': 20, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Middlesex': {'path': 21, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Norfolk': {'path': 22, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Northamptonshire': {'path': 23, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Northumberland': {'path': 24, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Nottinghamshire': {'path': 25, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Oxfordshire': {'path': 38, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Rutland': {'path': 26, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Shropshire': {'path': 27, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Somerset': {'path': 28, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Staffordshire': {'path': 29, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Suffolk': {'path': 30, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Surrey': {'path': 31, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Sussex': {'path': 32, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Warwickshire': {'path': 33, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Westmorland': {'path': 34, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Wiltshire': {'path': 35, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Worcestershire': {'path': 36, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0},
'Yorkshire': {'path': 37, 'Robin Hood name': 0, 'Local tradition': 0, 'Literary locale': 0, 'Artifacts': 0, 'Miscellaneous': 0, 'total': 0}
};
 
function getColour(val) {
var colour = "#000000";
for (var i = 0; i < nCols; i++) {
var cur = d.colours[i];
if (val <= cur.limit) {
colour = cur.rgb;
break;
}
}
return colour;
}
function calcCountyIndexes() {
d.England.pnperkm2idx = 100;
for (var key in d.counties) {
var cur = d.counties[key];
cur.pnperkm2 = cur.total / cur.area;
cur.km2perpn = cur.area / cur.total;
cur.pnperkm2idx = (cur.pnperkm2 / d.England.pnperkm2) * 100;
var expected = d.England.pnperkm2 * cur.area;
expected = (expected / d.England.popdensity) * cur.popdensity;
cur.pnperkm2popidx = (cur.total / expected) * 100;
cur.totalidx = cur.total !== 0 ? (cur.total / d.England.pnpercounty) * 100 : 0;
cur.totalcol = getColour(cur.totalidx);
cur.pnperkm2col = getColour(cur.pnperkm2idx);
cur.pnperkm2popcol = getColour(cur.pnperkm2popidx);
}
//console.log(d.counties);
//console.log(d.England);
}
function calcCounties(res) {
var counties = res.query.results;
var numCounties = 0;
var engArea = 0, engPop = 0;
for (var key in counties) {
if (key.indexOf("Riding") === -1 && key.indexOf("London") === -1) {
var cty = key.replace(" place-names", "");
numCounties++;
var a = counties[key].printouts.Area[0];
d.counties[cty].area = a;
engArea += a;
var p = counties[key].printouts.Population[0];
d.counties[cty].population = p;
d.counties[cty].popdensity = p / a;
d.counties[cty].km2perperson = a / p;
engPop += p;
}
}
d.England.area = engArea;
d.England.population = engPop;
d.England.popdensity = engPop / engArea;
d.England.km2perperson = engArea / engPop;
d.England.counties = numCounties;
}
function calcPlaceNames(res) {
var PNs = res.query.results;
for (var key in PNs) {
var admdiv = PNs[key].printouts.Pnadmdiv[0];
var interest = PNs[key].printouts.Pninterest[0];
var admdivObj = d.counties[admdiv];
admdivObj.total++;
d.England.total++;
admdivObj[interest]++;
d.England[interest]++;
}
d.England.km2perpn = d.England.area / d.England.total;
d.England.pnperkm2 = d.England.total / d.England.area;
d.England.pnpercounty = d.England.total / d.England.counties;
calcCountyIndexes();
}
d.calcStats = function() {
if (!d.stats) {
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";
fetch(url).then(res => res.json()).then((jsnCty) => {
calcCounties(jsnCty);
url = "https://www.irhb.org/wiki/api.php?action=ask&query=[[Category:English%20place-names]]|?Pninterest|?Pnadmdiv|sort=Pnadmdiv&format=json";
fetch(url).then(res => res.json()).then((jsnPN) => {
calcPlaceNames(jsnPN);
d.stats = true;
w.map.prepareMap();
}).catch(err => { throw err });
}).catch(err => { throw err });
} else {
w.map.prepareMap();
}
}
 
}() );
 
 
 
//Choropleth
( function() {
window.IRHB = window.IRHB || {};
var w = window.IRHB;
var d = w.data;
w.choro = {};
var c = w.choro;
var get = w.get;
c.choropleth = function() {
var curMap = w.map.curMap;
var mp = get(curMap);
var svg = mp.childNodes.length > 1 ? mp.firstChild.nextSibling.firstChild : mp.firstChild.firstChild;
var paths = svg.getElementsByTagName("path");
if (curMap === "navMap") {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.stroke = "#ffffff";
}
} else {
if (w.nav.choroVar === "count") {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.totalcol;
paths[cur.path].style.stroke = "#ffffff";
}
} else if (w.nav.choroVar === "area") {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2col;
paths[cur.path].style.stroke = "#ffffff";
}
} else {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2popcol;
paths[cur.path].style.stroke = "#ffffff";
}
}
}
};
 
}() );
 
 
 
//Map
( function() {
window.IRHB = window.IRHB || {};
var w = window.IRHB;
w.map = {};
var m = w.map, u = w.utility, d = w.data;
var tooltip, features, zoom, tooltipOffset;
m.curMap = false;
m.makeResponsive = function(div, svg) {
console.log("OK X");
var container = d3.select(svg.node().parentNode);
var w = parseInt(svg.style("width"));
var h = parseInt(svg.style("height"));
var aspect = w / h;
 
svg.attr("viewBox", "0 0 " + w + " " + h)
.attr("preserveAspectRatio", "xMinYMid")
.call(resize);
 
// to register multiple listeners for same event type,
// you need to add namespace, i.e., 'click.foo'
// necessary if you call invoke this function for multiple svgs
// api docs: https://github.com/mbostock/d3/wiki/Selections#on
d3.select(window).on("resize." + container.attr("id"), resize);
 
// get width of container and resize svg to fit it
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
};
m.prepareMap = function() {
var mp = w.get(m.curMap);
var width = 496, height = 550;
d3.xml("/wiki/geo/england/country/England.svg").mimeType("image/svg+xml").get(function(error, xml) {
if (!error) {
if (mp.childNodes.length !== 0) {
mp.innerHTML = "";
}
mp.appendChild(xml.documentElement);
mp.firstChild.style.display = "block";
mp.firstChild.onclick = mapClick;
} else {
throw error;
}
});
};
 
m.initMap = function() {
d.calcStats();
};
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">';
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 += '</path></svg>';
elem.innerHTML = svg;
};
 
function mapClick() {
console.log(event.target.class + " place-names");
console.log(event.currentTarget.class + " place-names");
console.log(event.target.className + " place-names");
console.log(event.currentTarget.className + " place-names");
console.log(event.target);
console.log(event.currentTarget);
//location.href = encodeURIComponent(event.target.className + " place-names");
}
 
 
function zoomed() {
//features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")").selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
}
 
 
function showTooltip(d) {
moveTooltip();
tooltip.style("display","block").text(d.properties.abbrev);
}
 
 
function moveTooltip() {
tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px").style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}
 
 
function hideTooltip() {
tooltip.style("display","none");
}
}() );
 
 
 
//Navigation
( function() {
window.IRHB = window.IRHB || {};
var w = window.IRHB;
w.nav = {};
var n = w.nav;
var get = w.get;
var m = w.map;
choroLegend = {
'count': { 's1': 'Count', 's2': 'Area', 's3': 'Area&ndash;Population'},
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area&ndash;Population'},
'areaPop': { 's1': 'Area&ndash;Population', 's2': 'Count', 's3': 'Area'}
}
n.choroVar = "count";
function selectChoroVar(event) {
var targId = event.target.id;
if (targId === "choroMapLegend2") {
if (n.choroVar !== "count") {
n.choroVar = "count";
} else {
n.choroVar = "area";
}
} else {
if (n.choroVar !== "areaPop") {
n.choroVar = "areaPop";
} else {
n.choroVar = "area";
}
}
get("choroMapLegend1").innerHTML = choroLegend[n.choroVar].s1;
get("choroMapLegend2").innerHTML = choroLegend[n.choroVar].s2;
get("choroMapLegend3").innerHTML = choroLegend[n.choroVar].s3;
w.choro.choropleth();
}
 
n.prepareNav = function() {
get("navMapNav").innerHTML = "<a id='nmnOverview'>Overview</a><a id='nmnNav'>Navigation</a><a id='nmnChoro'>Choropleths</a>";
/* Next 2 lines temporary, change CSS when implementing at site: */
get("ctyMapLegend").style.paddingBottom = 0;
get("navMapLegend").style.paddingBottom = 0;
get("nmnOverview").onclick = n.toggleNav;
get("nmnNav").onclick = n.toggleNav;
get("nmnChoro").onclick = n.toggleNav;
get("choroMapLegend2").onclick = selectChoroVar;
get("choroMapLegend2").style.fontWeight = 600;
get("choroMapLegend2").style.color = "#4d8375";
get("choroMapLegend2").style.cursor = "pointer";
get("choroMapLegend3").onclick = selectChoroVar;
get("choroMapLegend3").style.fontWeight = 600;
get("choroMapLegend3").style.color = "#4d8375";
get("choroMapLegend3").style.cursor = "pointer";
get("navMap").style.backgroundColor = "#f2f2f2";
get("choroMap").style.backgroundColor = "#f2f2f2";
};
n.toggleNav = function() {
var t = event.target.id;
var selfTarget = false;
var mainMap = window.getComputedStyle(get("ctyMapLegend"), null).getPropertyValue("display") === "block" ? true : false;
var navMap = window.getComputedStyle(get("navMapLegend"), null).getPropertyValue("display") === "block" ? true : false;
var choroMap = window.getComputedStyle(get("choroMapLegend"), null).getPropertyValue("display") === "block" ? true : false;
if ((t === "nmnOverview" && mainMap) || (t === "nmnNav" && navMap) || (t === "nmnChoro" && choroMap)) {
selfTarget = true;
}
if (!selfTarget) {
if (t === "nmnOverview") {
get("ctyMapLegend").style.display = "block";
get("map_leaflet_1").style.display = "block";
} else if (t === "nmnNav") {
get("navMap").style.display = "block";
get("navMapLegend").style.display = "block";
} else if (t === "nmnChoro") {
get("choroMapLegend1").innerHTML = choroLegend[n.choroVar].s1;
get("choroMapLegend2").innerHTML = choroLegend[n.choroVar].s2;
get("choroMapLegend3").innerHTML = choroLegend[n.choroVar].s3;
get("choroMap").style.display = "block";
get("choroMapLegend").style.display = "block";
}
if (t !== "nmnOverview") {
get("ctyMapLegend").style.display = "none";
get("map_leaflet_1").style.display = "none";
}
if (t !== "nmnNav") {
get("navMap").style.display = "none";
get("navMap").innerHTML = "";
get("navMapLegend").style.display = "none";
}
if (t !== "nmnChoro") {
get("choroMap").style.display = "none";
get("choroMap").innerHTML = "";
get("choroMapLegend").style.display = "none";
}
if (t === "nmnNav") {
m.curMap = "navMap";
} else if (t === "nmnChoro") {
m.curMap = "choroMap";
}
if (t !== "nmnOverview") {
m.initMap();
}
}
};
 
}() );
 
 
 
( function() {
 
    var w = window.IRHB;
    var gjson = "https://www.irhb.org/wiki/geo/england/country/England.json";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://www.irhb.org/wiki/js/d3js/d3.v3.min.js";
    //script.onreadystatechange = w.map.initMaps;
    script.onload = w.nav.prepareNav;
    document.head.appendChild(script);
}() );
</script></includeonly>
</script></includeonly>

Latest revision as of 13:03, 6 June 2019

No current project.