Widget:PlaceNamesChoropleths: Difference between revisions
From International Robin Hood Bibliography
mNo edit summary |
mNo edit summary |
||
(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: | '<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: | '<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: | '<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–Population'}, | |||
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area–Population'}, | |||
'areaPop': { 's1': 'Area–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> |
Revision as of 19: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.