Jump to: navigation, search

Difference between revisions of "Widget:PnChoropleths"

m
m
 
(5 intermediate revisions by the same user not shown)
Line 13: Line 13:
 
 
 
}() );
 
}() );
 +
  
  
Line 231: Line 232:
 
'<tr><td>Miscellaneous</td><td colspan="2">' + d.Miscellaneous + '</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>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>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> 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.pnperkm2popcol + '; width:1.5em;"></td></tr>' +  
+
'<tr><td>PN/km<sup>2</sup>/pop. idx.</td><td>' + d.pnperkm2popidx + '</td><td style="background-color:' + d.pnperkm2popcol + '; width:1.5em;"></td></tr>' +  
 
'</tbody>';
 
'</tbody>';
 
return txt;
 
return txt;
 
}
 
}
  
 +
}() );
 +
 +
 +
 +
//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, d = w.data, get = w.get;
 +
var tooltip, features, zoom, tooltipOffset;
 +
m.curMap = false;
 +
 +
 +
function makeResponsive(svg) {
 +
var container = d3.select(svg.node().parentNode),
 +
w = parseInt(svg.style("width")),
 +
h = parseInt(svg.style("height")),
 +
aspect = w / h;
 +
svg.attr("viewBox", "0 0 " + w + " " + h)
 +
.attr("preserveAspectRatio", "xMinYMid")
 +
.call(resize);
 +
d3.select(window).on("resize." + container.attr("id"), resize);
 +
 +
function resize() {
 +
var targetWidth = parseInt(container.style("width"));
 +
svg.attr("width", targetWidth);
 +
svg.attr("height", Math.round(targetWidth / aspect));
 +
}
 +
}
 +
 +
 +
m.prepareMap = function() {
 +
var mp = get(m.curMap);
 +
var width = 496, height = 550;
 +
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]);
 +
var path = d3.geo.path().projection(projection);
 +
var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height);
 +
if (mp.childNodes.length > 1) {
 +
mp.firstChild.nextSibling.style.display = "none";
 +
}
 +
features = svg.append("g").attr("class","features");
 +
tooltip = d3.select("body").append("div").attr("class","ttip");
 +
d3.json("/wiki/geo/england/country/England.json",function(error,geodata) {
 +
if (!error) {
 +
features.selectAll("path").data(geodata.features).enter().append("path")
 +
.attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip)
 +
.on("mouseout",hideTooltip).on("click",clicked);
 +
w.choro.choropleth();
 +
if (mp.childNodes.length > 1) {
 +
mp.removeChild(mp.childNodes[0]);
 +
}
 +
mp.firstChild.style.display = "block";
 +
makeResponsive(svg);
 +
} else {
 +
return console.log(error);
 +
}
 +
});
 +
tooltipOffset = {x: 5, y: -25};
 +
}
 +
 +
 +
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;
 +
elem.firstElementChild.firstElementChild.style.strokeWidth = "0px";
 +
};
 +
 +
 +
 +
function clicked(d, i) {
 +
location.href = encodeURIComponent(d.properties.name) + " place-names";
 +
}
 +
 +
 +
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;
 +
var 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() {
 +
var d = get("choroMapLegend2");
 +
d.onclick = selectChoroVar;
 +
d.style.fontWeight = 600;
 +
d.style.color = "#4d8375";
 +
d.style.cursor = "pointer";
 +
d = get("choroMapLegend3");
 +
d.onclick = selectChoroVar;
 +
d.style.fontWeight = 600;
 +
d.style.color = "#4d8375";
 +
d.style.cursor = "pointer";
 +
get("choroMap").style.backgroundColor = "#f9fafa";
 +
n.toggleNav();
 +
};
 +
 +
 +
n.toggleNav = function() {
 +
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";
 +
m.curMap = "choroMap";
 +
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.onload = w.nav.prepareNav;
 +
    document.head.appendChild(script);
 +
 
}() );
 
}() );
 
</script></includeonly>
 
</script></includeonly>

Latest revision as of 15:09, 7 June 2019

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