<div id="menu">
<button id="btnMaps">Maps</button>
<button id="btnCharts">Charts</button>
<button id="btnTables">Tables</button>
<span id="menuTables">
<details >
<summary>Settings</summary>
<div>
<div style="display: inline-block; vertical-align: top; border-right: 1px solid black; padding: 0 0.25rem;">
Columns:
<ul id="columns">
<li><input type="checkbox"/>City</li>
<li><input type="checkbox"/>Country</li>
<li><input type="checkbox"/>LNG</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: top; border-right: 1px solid black; padding: 0 0.25rem;">
Data:
<ul >
<li><input id="table-data-value" type="checkbox" checked/>Value</li>
<li><input id="table-data-rank" type="checkbox"/>Rank</li>
<li><input id="table-data-std" type="checkbox"/>St. Dev</li>
</ul>
</div>
</div>
</details>
<details >
<summary>Info</summary>
<div>
Click a column header to sort by that column. In the settings dropdown, you can choose to display the rank within each category among these cities and/or the population-weighted standard deviation from the mean across all populated areas. You can also change the displayed columns and units in the settings.
<p>
Temperature is Farenheit by default but can be changed to Celsius (or Kelvin) from the settings dropdown. Precipitation is inches per month by default but can be changed to mm or attolight-years(1e-18 light-years) per month.
<ul><li><b>Temp</b> is the average temperature for the year.</li><li><b>Temp Min</b> is the average low temperature in the coldest month of the year.</li><li><b>Temp Max</b> is the average high temperature in the warmest month.</li><li><b>Wet Bulb Max</b> is the average wet bulb temperature in the month with the highest wet bulb average.</li><li><b>Diurnal Temp</b> is the average difference between the high and low temps each day.</li><li><b>Wet Days</b> is the average number of days with precipitation each month.</li><li><b>Precipitation</b> is the average per month.</li><li><b>Frost Free</b> is an estimate of the longest streak of days each year without a freeze.</li>
</ul>
</p>
Data comes from the <a href="https://crudata.uea.ac.uk/cru/data/hrg/">Climate Research Unit</a> at the University of East Anglia and is based on 0.5° grids so not just the city itself. The list of 200 cities is a bespoke collection of 200 large cities selected to offer some geographic diversity.
</div>
</details>
</span>
<span id="menuMaps">
<details>
<summary>Settings</summary>
<div>
Choose a stat.
<select id="map-stat" onchange="makeMap()">
<option value="tmp">Avg Temp</option>
<option value="tmpMin">Temp Min</option>
<option value="tmpMax">Temp Max</option>
<option value="wbt">Wet Bulb Max</option>
<option value="dtr">Diurnal Range</option>
<option value="wet">Wet Days</option>
<option value="pre">Precipitation</option>
<option value="frs">Frost Free</option>
</select>
</div>
</details>
<details>
<summary>Info</summary>
<div>In the settings menu, change the stat to showcase. Change the units in the units menu. Stats are grouped by decile and determine the hue with red being small values, blue large values, and green in between. Darker areas have larger populations.
<p>Click a location on map to display how similar the rest of the world is across all 8 dimensions. Red means very different, blue is very similar, and darker areas again represent larger populations. Also the key will display the stats for that 0.5° grid. Only populated areas are clickable.</p>
<ul><li><b>Temp</b> is the average temperature for the year.</li><li><b>Temp Min</b> is the average low temperature in the coldest month of the year.</li><li><b>Temp Max</b> is the average high temperature in the warmest month.</li><li><b>Wet Bulb Max</b> is the average wet bulb temperature in the month with the highest wet bulb average.</li><li><b>Diurnal Temp</b> is the average difference between the high and low temps each day.</li><li><b>Wet Days</b> is the average number of days with precipitation each month.</li><li><b>Precipitation</b> is the average per month.</li><li><b>Frost Free</b> is an estimate of the longest streak of days each year without a freeze.</li>
</ul>
</div>
</details>
</span>
<span id="menuCharts">
<details>
<summary>Settings</summary>
<div>
Chart Type:
<input type="radio" name="chart" value="line"/>Line
<input type="radio" name="chart" value="bubble" checked/>Bubble
<input type="radio" name="chart" value="donut"/>Donut
<input type="radio" name="chart" value="radar"/>Radar
<div id="chart-radar-options" class="chart-options">
Select up to 5 locations. Enter a prelocated city or add your own coordinates.
<div id="radar-0">Name: <input class="awesomplete" list="citylist" data-autofirst="true"/>Lat:<input class="lat" type="text"/>Lng:<input class="lng" type="text"/></div>
<div id="radar-1">Name: <input class="awesomplete" list="citylist" data-autofirst="true"/>Lat:<input class="lat" type="text"/>Lng:<input class="lng" type="text"/></div>
<div id="radar-2">Name: <input class="awesomplete" list="citylist" data-autofirst="true"/>Lat:<input class="lat" type="text"/>Lng:<input class="lng" type="text"/></div>
<div id="radar-3">Name: <input class="awesomplete" list="citylist" data-autofirst="true"/>Lat:<input class="lat" type="text"/>Lng:<input class="lng" type="text"/></div>
<div id="radar-4">Name: <input class="awesomplete" list="citylist" data-autofirst="true"/>Lat:<input class="lat" type="text"/>Lng:<input class="lng" type="text"/></div>
<datalist id="citylist">
</datalist>
</div>
<div id="chart-bubble-options" class="chart-options">
Choose two stats.
<div>X-axis:
<select id="x-axis">
<option value="tmp">Avg Temp</option>
<option value="tmpMin">Temp Min</option>
<option value="tmpMax">Temp Max</option>
<option value="wbt">Wet Bulb Max</option>
<option value="dtr">Diurnal Range</option>
<option value="wet">Wet Days</option>
<option value="pre">Precipitation</option>
<option value="frs">Frost Free</option>
</select>
</div>
<div>Y-axis:
<select id="y-axis">
<option value="tmp">Avg Temp</option>
<option value="tmpMin">Temp Min</option>
<option value="tmpMax">Temp Max</option>
<option value="wbt">Wet Bulb Max</option>
<option value="dtr">Diurnal Range</option>
<option value="wet">Wet Days</option>
<option value="pre" selected>Precipitation</option>
<option value="frs">Frost Free</option>
</select>
</div>
</div>
<div id="chart-line-options" class="chart-options">
Choose a stat.
<select id="the-stat">
<option value="tmp">Avg Temp</option>
<option value="tmpMin">Temp Min</option>
<option value="tmpMax">Temp Max</option>
<option value="wbt">Wet Bulb Max</option>
<option value="dtr">Diurnal Range</option>
<option value="wet">Wet Days</option>
<option value="pre">Precipitation</option>
<option value="frs">Frost Free</option>
</select>
</div>
<div id="chart-donut-options" class="chart-options">
Choose categories by entering a formula like "t>40", "tmin<0", or "wb > 80 and p < 5".
<details style="display:block;"><summary>Variables</summary>
<ul>
<li>t: Avg temperature</li>
<li>tmin: Avg Low temp in coldest month</li>
<li>tmax: Avg Hi temp in warmest month</li>
<li>wb: Avg Wet Bulb temperature in highest month</li>
<li>d: Avg daily temp change</li>
<li>w: Avg # of days with precip each month</li>
<li>p: Avg monthly precipitation</li>
<li>f: Expected # of consecutive frost free days</li>
</ul>
</details>
<table>
<thead><tr><th>Formula</th><th>Label</th><th>Color</th></tr></thead>
<tbody id="donut-formulas">
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#CC0000"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#00CC00"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#0000CC"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#CCCC00"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#CC00CC"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#00CCCC"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#888888"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#444444"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#000000"/></td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td><td><input type="color" value="#CCCCCC"/></td></tr>
</tbody>
</table>
</div>
<button onclick="updateChart()">Update</button>
</div>
</details>
<details>
<summary>Info</summary>
<div></div>
</details>
</span>
<span>
<details>
<summary>Units</summary>
<ul>
<li><input type="radio" name="deg" value="F" checked/>°F<input type="radio" name="deg" value="C" />°C<input type="radio" name="deg" value="K" />K</li>
<li><input type="radio" name="dist" value="in" checked/>inches<input type="radio" name="dist" value="mm"/>mm<input type="radio" name="dist" value="ly"/>aly</li>
</ul>
</details>
</span>
</div>
<div id="maps">
<div>
<svg id="mapSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1440px" height="600px" viewBox="0 30 720 300">
<g id="map" >
</g>
<image id="topMap" href="https://triplelog.b-cdn.net/blog/map.svg" height="300" width="720" y="30" />
<g id="key"></g>
</svg>
</div>
</div>
<div id="tables"><table id="dataTable"></table></div>
<div id="charts"><canvas id="myChart"></canvas></div>
<script src="https://triplelog.b-cdn.net/blog/weather-data.js"></script>
<script src="https://triplelog.b-cdn.net/blog/awesomplete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://triplelog.b-cdn.net/blog/mathzetta.js"></script>
<script src="https://triplelog.b-cdn.net/blog/strToFunction.js"></script>#maps, #tables, #charts, #menuMaps, #menuTables, #menuCharts {
display: none;
}
#maps {
display: block;
}
#menuMaps {
display: inline-block;
}
#menu {
z-index: 2;
position: relative;
height: 1.5rem;
overflow: visible;
}
details {
max-width: 60ch;
display: inline-block;
vertical-align: top;
border: 1px solid black;
background: #EEE;
}
summary {
background: white;
padding: 2px 0.5rem 2px 0;
}
details > div {
padding: 0.5rem 0.5rem;
}
details ul {
list-style-type: none;
padding: 0;
}
.chart-options {
display: none;
}
.lat, .lng {
width: 6rem;
}
input[name=chart][value=line]:checked ~ #chart-line-options {
display: block;
}
input[name=chart][value=bubble]:checked ~ #chart-bubble-options {
display: block;
}
input[name=chart][value=donut]:checked ~ #chart-donut-options {
display: block;
}
input[name=chart][value=radar]:checked ~ #chart-radar-options {
display: block;
}
html {
padding: 0;
margin: 0;
overflow-y: hidden;
}
table {
max-width: 100%;
border-collapse: collapse;
max-height: calc(100vh - 3.5rem);
overflow: auto;
display: inline-block;
background: #88F;
}
thead {
background:rgba(128,128,255,0.67);
border-bottom: 1px solid black;
position: sticky;
top: 0;
}
tbody {
}
tr {
border-right: 1px solid #888;
white-space: nowrap;
}
th {
cursor: pointer;
}
td, th {
border-left: 1px solid black;
padding: 2px 4px;
max-width: 8rem;
overflow:clip;
}
td {
text-align: right;
}
td:nth-child(1), td:nth-child(2) {
text-align: left;
}
tbody tr:nth-child(2n-1) {
background: #EEE;
}
tbody tr:nth-child(2n-2) {
background: #DDD;
}
tbody td.secondary {
border-left: 1px dotted gray;
}
#myChart {
max-width: min(80rem,90vw);
max-height: min(80rem,90vh);
}
#mapSVG {
width: min(216vh,96vw);
height: min(90vh,40vw);
}
#topMap {
mix-blend-mode:darken;
}
let tableSettings = {
sort: -1,
deg: "F",
dist: "in"
};
function makeTable() {
var e = ["City", "Country", "LNG", "LAT", "Temp", "Temp Min", "Temp Max", "Wet Bulb Max", "Diurnal Temp", "Wet Days", "Precipitation", "Frost Free"],
t = document.getElementById("columns");
t.innerHTML = "";
for (var a = 0; a < e.length; a++) {
var n = document.createElement("li"),
d = document.createElement("input"),
d = (d.setAttribute("type", "checkbox"), d.setAttribute("checked", "true"), d.setAttribute("id", "column-" + a), d.addEventListener("click", updateTable), n.appendChild(d), document.createElement("span"));
d.textContent = e[a], n.appendChild(d), t.appendChild(n)
}
for (var i = 0; i < cities.length; i++)
for (var r = Math.floor(2 * cities[i][3]), c = Math.floor(2 * cities[i][2]), l = data[r][c], o = ["tmp", "tmpMin", "tmpMax", "wbt", "dtr", "wet", "pre", "frs"], a = 0; a < o.length; a++) cities[i].push(l[o[a]]), cities[i].push(0), cities[i].push(Math.round((l[o[a]] - stats[o[a]].mean) / stats[o[a]].sd * 100) / 100);
for (var s = 4; s < 27; s += 3) {
cities.sort((e, t) => t[s] > e[s]);
for (i = 0; i < cities.length; i++) cities[i][s + 1] = i + 1
}
document.getElementById("table-data-value").addEventListener("click", updateTable), document.getElementById("table-data-rank").addEventListener("click", updateTable), document.getElementById("table-data-std").addEventListener("click", updateTable), document.querySelectorAll("input[name=deg]").forEach(e => {
e.addEventListener("change", updateTable)
}), document.querySelectorAll("input[name=dist]").forEach(e => {
e.addEventListener("change", updateTable)
}), updateTable()
}
function updateTable() {
tableSettings.deg = document.querySelector("input[name=deg]:checked").value, tableSettings.dist = document.querySelector("input[name=dist]:checked").value;
var e = document.getElementById("dataTable"),
t = (e.innerHTML = "", document.createElement("thead")),
a = (e.appendChild(t), document.createElement("tbody")),
n = (e.appendChild(a), document.createElement("tr")),
d = (t.appendChild(n), ["City", "Country", "LNG", "LAT", "Temp", "Temp Min", "Temp Max", "Wet Bulb Max", "Diurnal Temp", "Wet Days", "Precipitation", "Frost Free"]),
i = new Set;
document.querySelector("#table-data-value").checked && i.add(0), document.querySelector("#table-data-rank").checked && i.add(1), document.querySelector("#table-data-std").checked && i.add(2);
for (var r, c = 0; c < d.length; c++) document.querySelector("#columns #column-" + c).checked && ((r = document.createElement("th")).setAttribute("data-col", c + 1), r.addEventListener("click", updateSort), r.textContent = d[c], 3 < c && r.setAttribute("colspan", i.size), n.appendChild(r));
if (tableSettings.sort < 0) {
let a = -1 * tableSettings.sort - 1;
3 < a && (a = 4 + 3 * (a - 4)), cities.sort((e, t) => e[a] > t[a])
} else {
let a = tableSettings.sort - 1;
3 < a && (a = 4 + 3 * (a - 4)), cities.sort((e, t) => t[a] > e[a])
}
for (var l = 0; l < cities.length; l++) {
var o = document.createElement("tr");
a.appendChild(o);
for (var s, c = 0; c < 4; c++) document.querySelector("#columns #column-" + c).checked && ((s = document.createElement("td")).textContent = cities[l][c], o.appendChild(s));
for (var u = Math.floor(2 * cities[l][3]), m = Math.floor(2 * cities[l][2]), p = (data[u][m], ["tmp", "tmpMin", "tmpMax", "wbt", "dtr", "wet", "pre", "frs"]), c = 0; c < p.length; c++)
if (document.querySelector("#columns #column-" + (4 + c)).checked) {
let e = !1;
for (var b, h = 0; h < 3; h++) i.has(h) && ((b = document.createElement("td")).textContent = c < 5 ? toDeg(cities[l][4 + h + 3 * c]) : 6 == c ? toDist(cities[l][4 + h + 3 * c]) : cities[l][4 + h + 3 * c], e && b.classList.add("secondary"), o.appendChild(b), e = !0)
}
}
}
function updateSort(e) {
e = parseInt(e.currentTarget.getAttribute("data-col"));
tableSettings.sort == e ? tableSettings.sort = -1 * e : tableSettings.sort == -1 * e ? tableSettings.sort = e : tableSettings.sort = e < 3 ? -1 * e : e, updateTable()
}
function toDeg(e) {
return "F" == tableSettings.deg ? Math.round(9 * e / 5 + 32) : "C" == tableSettings.deg ? e : "K" == tableSettings.deg ? Math.round(10 * (e + 273.15)) / 10 : void 0
}
function toDist(e) {
return "in" == tableSettings.dist ? Math.round(.03937008 * e * 100) / 100 : "ly" == tableSettings.dist ? Math.round(1057004e-25 * e * 1e20) / 100 : "mm" == tableSettings.dist ? e : void 0
}
const ctx = document.getElementById("myChart");
let myChart = !1,
cityNameMap = {};
function makeChart() {
for (var e = document.getElementById("citylist"), t = 0; t < cities.length; t++) {
var a = document.createElement("option");
a.textContent = cities[t][0] + ", " + cities[t][1], e.appendChild(a), cityNameMap[cities[t][0] + ", " + cities[t][1]] = [cities[t][2], cities[t][3]]
}
for (t = 0; t < 5; t++) document.querySelector("#radar-" + t + " input.awesomplete").addEventListener("change", chgRadar), document.querySelector("#radar-" + t + " input.awesomplete").addEventListener("awesomplete-selectcomplete", chgRadar);
makeBubble()
}
makeChart();
let fn = !1;
function makeBubble() {
for (var e = Math.min(window.innerWidth / 50, 2 * window.innerHeight / 50), a = ["tmp", "pre"], r = (a[0] = document.getElementById("x-axis").value, a[1] = document.getElementById("y-axis").value, {}), o = 0; o < 10; o++) {
r[o] = {};
for (var d = 0; d < 10; d++) r[o][d] = {
pop: 0,
area: 0
}
}
let n = 0;
var l = {
pop: 0,
area: 0
};
for (d in data) {
var i = computeArea(d / 2);
for (o in data[d]) {
let e = 9;
for (var p = 0; p < 9; p++)
if (data[d][o][a[0]] < deciles[a[0]][p]) {
e = p;
break
} let t = 9;
for (p = 0; p < 9; p++)
if (data[d][o][a[1]] < deciles[a[1]][p]) {
t = p;
break
} r[e][t].pop += data[d][o].pop, r[e][t].pop > n && (n = r[e][t].pop), r[e][t].area += i, l.pop += data[d][o].pop, l.area += i
}
}
for (var t = [], o = 0; o < 10; o++)
for (d = 0; d < 10; d++) {
var u = 255 - 128 * Math.sqrt(r[o][d].pop / r[o][d].area / (l.pop / l.area));
t.push({
label: !1,
data: [{
x: o + .5,
y: d + .5,
r: e * Math.sqrt(r[o][d].pop / n)
}],
backgroundColor: "rgb(255, " + u + "," + u + ")"
})
}
var c = {
type: "bubble",
data: {
datasets: t
},
options: {
responsive: !0,
plugins: {
legend: !1
},
scales: {
x: {
title: {
display: !0,
text: document.querySelector("#x-axis option:checked").textContent + " deciles"
}
},
y: {
title: {
display: !0,
text: document.querySelector("#y-axis option:checked").textContent + " deciles"
}
}
}
}
};
myChart && myChart.destroy(), myChart = new Chart(ctx, c)
}
function makeLine() {
for (var t = document.getElementById("the-stat").value, a = {}, r = 0; r < 10; r++) a[r] = {
pop: 0,
area: 0
};
for (var o in data) {
var d = computeArea(o / 2);
for (r in data[o]) {
let e = 9;
for (var n = 0; n < 9; n++)
if (data[o][r][t] < deciles[t][n]) {
e = n;
break
} a[e].pop += data[o][r].pop, a[e].area += d
}
}
for (var e = [], r = 0; r < 10; r++) e.push(a[r].pop / a[r].area);
for (var l = ["0%"], n = 0; n < 9; n++) "t" == t[0] || "wbt" == t || "dtr" == t ? l.push(10 * n + 10 + "% (" + toDeg(deciles[t][n]) + ")") : "pre" == t[0] ? l.push(10 * n + 10 + "% (" + toDist(deciles[t][n]) + ")") : l.push(10 * n + 10 + "% (" + deciles[t][n] + ")");
var i = {
type: "line",
data: {
labels: l,
datasets: [{
data: e,
label: t,
fill: !1,
borderColor: "rgb(75, 192, 192)",
tension: .1
}]
},
options: {
scales: {
x: {
title: {
display: !0,
text: document.querySelector("#the-stat option:checked").textContent + " deciles (value)"
}
},
y: {
title: {
display: !0,
text: "Pop density (per km^2)"
}
}
}
}
};
myChart && myChart.destroy(), myChart = new Chart(ctx, i)
}
function makeDonut() {
let a = [],
r = [],
o = [],
d = [];
for (var e in document.querySelectorAll("#donut-formulas tr").forEach(e => {
var t = e.querySelector("td:nth-of-type(1) input").value;
0 < t.trim().length && strToFunction(mathzettaHeader, t) && (d.push(strToFunction(mathzettaHeader, t)), 0 < e.querySelector("td:nth-of-type(2) input").value.trim().length ? a.push(e.querySelector("td:nth-of-type(2) input").value.trim()) : a.push(t.trim()), r.push(e.querySelector("td:nth-of-type(3) input").value), o.push(0))
}), o.push(0), a.push("None"), r.push("#EEEEEE"), data)
for (var t in data[e])
for (var n = [toDeg(data[e][t].tmp), toDeg(data[e][t].tmpMin), toDeg(data[e][t].tmpMax), toDeg(data[e][t].wbt), toDeg(data[e][t].dtr), data[e][t].wet, toDist(data[e][t].pre), data[e][t].frs], l = 0; l < d.length; l++) {
if (d[l](n)) {
o[l] += data[e][t].pop;
break
}
l == d.length - 1 && (o[l + 1] += data[e][t].pop)
}
o[o.length - 1] < 1 && (o.pop(), a.pop(), r.pop());
var i = {
type: "doughnut",
data: {
labels: a,
datasets: [{
data: o,
backgroundColor: r,
hoverOffset: 4
}]
}
};
myChart && myChart.destroy(), myChart = new Chart(ctx, i)
}
function makeRadar() {
for (var a = [], r = [], o = ["255, 100, 100", "100, 100, 255", "0, 255, 255", "0, 255, 100", "255, 0, 100"], d = 0; d < 5; d++) {
let t = document.querySelector("#radar-" + d + " input.awesomplete");
if (0 != t.value.trim().length) {
var n = t.value.trim();
if (0 != (t = document.querySelector("#radar-" + d + " .lng")).value.trim().length) {
let e = [parseFloat(t.value.trim()), 0];
isNaN(e[0]) || 0 == (t = document.querySelector("#radar-" + d + " .lat")).value.trim().length || (e[1] = parseFloat(t.value.trim()), isNaN(e[1])) || (e = [Math.floor(2 * e[0]), Math.floor(2 * e[1])], data[e[1]] && data[e[1]][e[0]] && (a.push(e), r.push({
label: n,
data: [],
fill: !0,
backgroundColor: "rgba(" + (n = o[d]) + ", 0.2)",
borderColor: "rgb(" + n + ")",
pointBackgroundColor: "rgb(" + n + ")",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgb(" + n + ")"
})))
}
}
}
var e = new Set,
t = (e.add("tmpMin"), e.add("tmpMax"), e.add("tmp"), e.add("wet"), e.add("pre"), e.add("frs"), e.add("dtr"), e.add("wbt"), []);
for (d of e) {
t.push(d);
for (var l = 0; l < r.length; l++) {
var i = a[l],
p = data[i[1]][i[0]][d];
let e = 10;
for (var u = 0; u < 9; u++)
if (p < deciles[d][u]) {
e = u + 1;
break
} r[l].data.push(e)
}
}
e = {
type: "radar",
data: {
labels: t,
datasets: r
},
options: {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
angleLines: {
display: !1
},
suggestedMin: 0,
suggestedMax: 10
}
}
}
};
myChart && myChart.destroy(), myChart = new Chart(ctx, e)
}
function updateChart() {
tableSettings.deg = document.querySelector("input[name=deg]:checked").value, tableSettings.dist = document.querySelector("input[name=dist]:checked").value;
var e = document.querySelector("input[name=chart]:checked").value;
"donut" == e && makeDonut(), "bubble" == e && makeBubble(), "line" == e && makeLine(), "radar" == e && makeRadar()
}
function chgRadar(t) {
var a = t.currentTarget.value;
if (cityNameMap[a]) {
let e = t.currentTarget.parentElement;
(e = (e = e.id ? e : e.parentElement).id ? e : e.parentElement).querySelector(".lat").value = cityNameMap[a][1], e.querySelector(".lng").value = cityNameMap[a][0]
}
}
function makeMap() {
tableSettings.deg = document.querySelector("input[name=deg]:checked").value, tableSettings.dist = document.querySelector("input[name=dist]:checked").value;
var t, e = document.getElementById("map-stat").value,
n = document.getElementById("map"),
l = (n.innerHTML = "", ["rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)", "rgb(255,255,255)"]);
for (t in data)
for (var r in data[t]) {
for (var i = parseInt(data[t][r].pop), u = document.createElementNS("http://www.w3.org/2000/svg", "rect"), a = 9, d = 0; d < 9; d++)
if (data[t][r][e] < deciles[e][d]) {
a = d;
break
} var s = 230 - 25 * a,
i = 100 - 5 * Math.pow(i, .2),
i = "hsl(" + s + ",50%, " + (i = i < 20 ? 20 : i) + "%)";
a, l[a] = "hsl(" + s + ",50%, 50%)", u.setAttributeNS(null, "x", parseInt(r) + 360), u.setAttributeNS(null, "y", 180 - parseInt(t)), u.setAttributeNS(null, "width", "1"), u.setAttributeNS(null, "height", "1"), u.setAttributeNS(null, "stroke", "none"), u.setAttributeNS(null, "fill", i), n.appendChild(u)
}
var o = document.getElementById("key");
o.innerHTML = "", (u = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttributeNS(null, "x", -1), u.setAttributeNS(null, "y", 150), u.setAttributeNS(null, "width", "110"), u.setAttributeNS(null, "height", "200"), u.setAttributeNS(null, "stroke", "none"), u.setAttributeNS(null, "fill", "white"), o.appendChild(u);
for (d = 0; d < 10; d++) {
(u = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttributeNS(null, "x", 10), u.setAttributeNS(null, "y", 160 + 14 * d), u.setAttributeNS(null, "width", "14"), u.setAttributeNS(null, "height", "14"), u.setAttributeNS(null, "stroke", "black"), u.setAttributeNS(null, "fill", l[d]), o.appendChild(u);
var c = document.createElementNS("http://www.w3.org/2000/svg", "text");
c.setAttributeNS(null, "x", 30), c.setAttributeNS(null, "y", 171.5 + 14 * d), c.setAttributeNS(null, "font-size", 8), d < 9 ? "t" == e[0] || "wbt" == e || "dtr" == e ? c.textContent = e + " <" + toDeg(deciles[e][d]) : c.textContent = "pre" == e ? e + " <" + toDist(deciles[e][d]) : e + " <" + deciles[e][d] : "t" == e[0] || "wbt" == e || "dtr" == e ? c.textContent = e + " > " + toDeg(deciles[e][8]) : c.textContent = "pre" == e ? e + " > " + toDist(deciles[e][8]) : e + " > " + deciles[e][8], o.appendChild(c)
}
}
function makeSimilarMap(e, n) {
tableSettings.deg = document.querySelector("input[name=deg]:checked").value, tableSettings.dist = document.querySelector("input[name=dist]:checked").value;
var l = document.getElementById("map"),
r = (l.innerHTML = "", {}),
i = new Set;
i.add("tmpMin"), i.add("tmpMax"), i.add("tmp"), i.add("wet"), i.add("pre"), i.add("frs"), i.add("dtr"), i.add("wbt");
for (o of i) r[o] = data[n][e][o];
for (n in data)
for (var e in data[n]) {
var u = parseInt(data[n][e].pop);
let t = 0;
for (o of i) t += Math.pow((data[n][e][o] - r[o]) / stats[o].sd, 2);
t = Math.sqrt(t);
var a = document.createElementNS("http://www.w3.org/2000/svg", "rect"),
d = 240 - 32 * t,
u = 100 - 5 * Math.pow(u, .2),
d = "hsl(" + d + ",50%, " + (u = u < 20 ? 20 : u) + "%)";
a.setAttributeNS(null, "x", parseInt(e) + 360), a.setAttributeNS(null, "y", 180 - parseInt(n)), a.setAttributeNS(null, "width", "1"), a.setAttributeNS(null, "height", "1"), a.setAttributeNS(null, "stroke", "none"), a.setAttributeNS(null, "fill", d), l.appendChild(a)
}
var t = document.getElementById("key");
t.innerHTML = "";
(a = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttributeNS(null, "x", -1), a.setAttributeNS(null, "y", 150), a.setAttributeNS(null, "width", "110"), a.setAttributeNS(null, "height", "200"), a.setAttributeNS(null, "stroke", "none"), a.setAttributeNS(null, "fill", "white"), t.appendChild(a);
var s, o = 0;
for (s of i) {
var c = document.createElementNS("http://www.w3.org/2000/svg", "text");
c.setAttributeNS(null, "x", 20), c.setAttributeNS(null, "y", 171.5 + 14 * o), c.setAttributeNS(null, "font-size", 8), "t" == s[0] || "wbt" == s || "dtr" == s ? c.textContent = s + " = " + toDeg(r[s]) : c.textContent = "pre" == s ? s + " = " + toDist(r[s]) : s + " = " + r[s], t.appendChild(c), o++
}
}
function resizeSvg(t = !0) {
var e = 100 * (rect = svg.getBoundingClientRect()).width / rect.height;
t && svg.setAttribute("viewBox", "0 0 " + e + " 100")
}
function clickMap(t) {
rect = document.getElementById("mapSVG").getBoundingClientRect();
var e = 720 * (t.clientX - rect.x) / rect.width,
t = 30 + 300 * (t.clientY - rect.y) / rect.height,
e = Math.floor(e - 360),
t = Math.floor(180 - t);
data[t] && data[t][e] && makeSimilarMap(e, t)
}
makeMap(), document.getElementById("topMap").addEventListener("click", clickMap);
makeTable();
document.getElementById('btnMaps').addEventListener('click', showMaps);
document.getElementById('btnCharts').addEventListener('click', showCharts);
document.getElementById('btnTables').addEventListener('click', showTables);
function showMaps() {
document.getElementById('maps').style.display = 'block';
document.getElementById('tables').style.display = 'none';
document.getElementById('charts').style.display = 'none';
document.getElementById('menuMaps').style.display = 'inline-block';
document.getElementById('menuTables').style.display = 'none';
document.getElementById('menuCharts').style.display = 'none';
}
function showTables() {
document.getElementById('maps').style.display = 'none';
document.getElementById('tables').style.display = 'block';
document.getElementById('charts').style.display = 'none';
document.getElementById('menuMaps').style.display = 'none';
document.getElementById('menuTables').style.display = 'inline-block';
document.getElementById('menuCharts').style.display = 'none';
}
function showCharts() {
document.getElementById('maps').style.display = 'none';
document.getElementById('tables').style.display = 'none';
document.getElementById('charts').style.display = 'block';
document.getElementById('menuMaps').style.display = 'none';
document.getElementById('menuTables').style.display = 'none';
document.getElementById('menuCharts').style.display = 'inline-block';
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.