{"id":5089,"date":"2023-03-29T13:32:32","date_gmt":"2023-03-29T17:32:32","guid":{"rendered":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/?page_id=5089"},"modified":"2023-05-16T15:41:17","modified_gmt":"2023-05-16T19:41:17","slug":"copd-in-toronto","status":"publish","type":"page","link":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/copd-in-toronto\/","title":{"rendered":"COPD in Toronto"},"content":{"rendered":"\n   <title>COPD in Toronto <\/title>\n<!-- ------------------ Some JavaScript Libraries ---------------------- --> \n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/apexcharts\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.js\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\n     \n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.css\" integrity=\"sha256-sA+zWATbFveLLNqWO2gtiw3HL\/lh1giY\/Inf1BJ0z14=\" crossorigin=\"\">\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.js\" integrity=\"sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=\" crossorigin=\"\"><\/script>\n\n<script src=\"https:\/\/acadic-portal.github.io\/Jane&amp;Finch\/copd.js\"><\/script>\n\n<script>\nvar mycopd = copd[\"features\"];\n\n\nvar map1; var map2; var map3; var map4;\nvar geojson1; var geojson2; var geojson3; var geojson4;\nvar info1; var info2; var info3; var info4;\nvar legend1; var legend2; var legend3; var legend4;\n\n\/\/ for ranges:\nvar female1; var female2; var male1; var male2;\n\/\/ for colors:\nvar mx_female1; var mx_female2; var mx_male1; var mx_male2;\n\nfunction femaleColor(d, n) { return d > 9*n  ? '#50003B' :\n                                   d > 8*n  ? '#860063' :\n                                   d > 7*n  ? '#B00082' :\n                                   d > 6*n  ? '#DA00A1' :\n                                   d > 5*n  ? '#F600B6' :\n                                   d > 4*n  ? '#FF21C5' :\n                                   d > 3*n  ? '#FF4BD0' :\n                                   d > 2*n  ? '#FF79DC' :\n                                   d > n    ? '#FF9FE6' :\n                                   d >  0   ? '#FFBDEE' :\n                                   d ==  0  ? '#FFDDF6' :\n                                              '#FBF8F3'; }\nfunction maleColor(d, n) { return d > 9*n ? '#003228' :\n                                    d > 8*n  ? '#005041' :\n                                    d > 7*n  ? '#00705B' :\n                                    d > 6*n  ? '#008E73' :\n                                    d > 5*n  ? '#00A485' :\n                                    d > 4*n  ? '#00BC98' :\n                                    d > 3*n  ? '#00D0A8' :\n                                    d > 2*n  ? '#00F6C7' :\n                                    d > n    ? '#53FFDE' :\n                                    d > 0    ? '#D9FFF8' :\n                                    d == 0   ? '#FAF7FF' :\n                                               '#FBF8F3'; }\nfunction getOpacity(d) { return d == 0 ? 0 : 1; }\n\nfunction femaleStyle1 (feature) { return { fillColor: femaleColor (feature.properties[female1], Math.floor(mx_female1\/10)), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[female1]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[female1]) }; }\nfunction maleStyle1 (feature) { return { fillColor: maleColor (feature.properties[male1], Math.floor(mx_male1\/10)), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[male1]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[male1]) }; }\n\nfunction femaleStyle2 (feature) { return { fillColor: femaleColor (feature.properties[female2], Math.floor(mx_female2\/10)), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[female2]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[female2]) }; }\nfunction maleStyle2 (feature) { return { fillColor: maleColor (feature.properties[male2], Math.floor(mx_male2\/10)), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[male2]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[male2]) }; }\n\nfunction highlightFeature1 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info1.update(layer.feature.properties);\n}\nfunction resetHighlight1 (e) { \n    geojson1.resetStyle(e.target); \n    info1.update(); \n}\nfunction zoomToFeature1 (e) { map1.fitBounds (e.target.getBounds()); }\nfunction onEachFeature1 (feature, layer) { layer.on({ mouseover: highlightFeature1, mouseout: resetHighlight1, click: zoomToFeature1 }); }\n\nfunction highlightFeature2 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info2.update(layer.feature.properties);\n}\nfunction resetHighlight2 (e) { \n    geojson2.resetStyle(e.target); \n    info2.update(); \n}\nfunction zoomToFeature2 (e) { map2.fitBounds (e.target.getBounds()); }\nfunction onEachFeature2 (feature, layer) { layer.on({ mouseover: highlightFeature2, mouseout: resetHighlight2, click: zoomToFeature2 }); }\n\nfunction highlightFeature3 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info3.update(layer.feature.properties);\n}\nfunction resetHighlight3 (e) { \n    geojson3.resetStyle(e.target); \n    info3.update(); \n}\nfunction zoomToFeature3 (e) { map3.fitBounds (e.target.getBounds()); }\nfunction onEachFeature3 (feature, layer) { layer.on({ mouseover: highlightFeature3, mouseout: resetHighlight3, click: zoomToFeature3 }); }\n\nfunction highlightFeature4 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info4.update(layer.feature.properties);\n}\nfunction resetHighlight4 (e) { \n    geojson4.resetStyle(e.target); \n    info4.update(); \n}\nfunction zoomToFeature4 (e) { map4.fitBounds (e.target.getBounds()); }\nfunction onEachFeature4 (feature, layer) { layer.on({ mouseover: highlightFeature4, mouseout: resetHighlight4, click: zoomToFeature4 }); }\n\n\/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Ranges ~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\/\nfunction showyearrange1 (v) {\n  dummy = [\"2016\/17\", \"2018\/19\"];\n  document.getElementById (\"year1\").innerHTML = \"Year: \"+dummy[Number(v)];\n  female1 = dummy[Number(v)] + female1.slice(7);\n  male1 = dummy[Number(v)] + male1.slice(7);\n\n  if (geojson1) map1.removeLayer(geojson1);\n  geojson1 = L.geoJson(copd, {style: femaleStyle1, onEachFeature: onEachFeature1}).addTo(map1);\n  if (geojson2) map2.removeLayer(geojson2);\n  geojson2 = L.geoJson(copd, {style: maleStyle1, onEachFeature: onEachFeature2}).addTo(map2);\n}\n\nfunction showagerange1 (v) {\n  dummy = [\"35-64\", \"65+\"];\n  document.getElementById (\"age1\").innerHTML = \"Age: \"+dummy[Number(v)];\n  female1 = female1.slice(0, 15) + dummy[Number(v)] + \"_in%\";\n  male1 = male1.slice(0, 13) + dummy[Number(v)] + \"_in%\";\n  \n  if (geojson1) map1.removeLayer(geojson1);\n  geojson1 = L.geoJson(copd, {style: femaleStyle1, onEachFeature: onEachFeature1}).addTo(map1);\n  if (geojson2) map2.removeLayer(geojson2);\n  geojson2 = L.geoJson(copd, {style: maleStyle1, onEachFeature: onEachFeature2}).addTo(map2);\n}\n\nfunction showyearrange2 (v) {\n  dummy = [\"2016\/17\", \"2018\/19\"];\n  document.getElementById (\"year2\").innerHTML = \"Year: \"+dummy[Number(v)];\n  female2 = dummy[Number(v)] + female2.slice(7);\n  male2 = dummy[Number(v)] + male2.slice(7);\n\n  if (geojson3) map3.removeLayer(geojson3);\n  geojson3 = L.geoJson(copd, {style: femaleStyle2, onEachFeature: onEachFeature3}).addTo(map3);\n  if (geojson4) map4.removeLayer(geojson4);\n  geojson4 = L.geoJson(copd, {style: maleStyle2, onEachFeature: onEachFeature4}).addTo(map4);  \n}\n\nfunction showagerange2 (v) {\n  dummy = [\"35-64\", \"65+\"];\n  document.getElementById (\"age2\").innerHTML = \"Age: \"+dummy[Number(v)];\n  female2 = female2.slice(0, 15) + dummy[Number(v)];\n  male2 = male2.slice(0, 13) + dummy[Number(v)];\n\n  if (geojson3) map3.removeLayer(geojson3);\n  geojson3 = L.geoJson(copd, {style: femaleStyle2, onEachFeature: onEachFeature3}).addTo(map3);\n  if (geojson4) map4.removeLayer(geojson4);\n  geojson4 = L.geoJson(copd, {style: maleStyle2, onEachFeature: onEachFeature4}).addTo(map4);\n}\n\n\n\/*--------------------- Other functions -----------------------*\/\nfunction setCards () {\n  v = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n  n = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+_in%\"]);\n      if (dummy) { v[0] += dummy; n[0] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+_in%\"]);\n      if (dummy) { v[0] += dummy; n[0] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35-64_in%\"]);\n      if (dummy) { v[1] += dummy; n[1] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35-64_in%\"]);\n      if (dummy) { v[1] += dummy; n[1] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_65+_in%\"]);\n      if (dummy) { v[2] += dummy; n[2] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_65+_in%\"]);\n      if (dummy) { v[2] += dummy; n[2] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+_in%\"]);\n      if (dummy) { v[3] += dummy; n[3] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+_in%\"]);\n      if (dummy) { v[3] += dummy; n[3] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35-64_in%\"]);\n      if (dummy) { v[4] += dummy; n[4] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35-64_in%\"]);\n      if (dummy) { v[4] += dummy; n[4] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_65+_in%\"]);\n      if (dummy) { v[5] += dummy; n[5] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_65+_in%\"]);\n      if (dummy) { v[5] += dummy; n[5] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+_in%\"]);\n      if (dummy) { v[6] += dummy; n[6] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+_in%\"]);\n      if (dummy) { v[6] += dummy; n[6] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes35-64_in%\"]);\n      if (dummy) { v[7] += dummy; n[7] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35-64_in%\"]);\n      if (dummy) { v[7] += dummy; n[7] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_65+_in%\"]);\n      if (dummy) { v[8] += dummy; n[8] += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_65+_in%\"]);\n      if (dummy) { v[8] += dummy; n[8] += 1; }\n    }\n  }\n\n  if (n[0] != 0) v[0] = v[0] \/ n[0];\n  if (n[1] != 0) v[1] = v[1] \/ n[1];\n  if (n[2] != 0) v[2] = v[2] \/ n[2];\n  if (n[3] != 0) v[3] = v[3] \/ n[3];\n  if (n[4] != 0) v[4] = v[4] \/ n[4];\n  if (n[5] != 0) v[5] = v[5] \/ n[5];\n  if (n[6] != 0) v[6] = v[6] \/ n[6];\n  if (n[7] != 0) v[7] = v[7] \/ n[7];\n  if (n[8] != 0) v[8] = v[8] \/ n[8];\n\n  document.getElementById (\"card1\").innerHTML = (v[0]).toFixed(2);\n  document.getElementById (\"card2\").innerHTML = (v[1]).toFixed(2);\n  document.getElementById (\"card3\").innerHTML = (v[2]).toFixed(2);\n  document.getElementById (\"card4\").innerHTML = (v[3]).toFixed(2);\n  document.getElementById (\"card5\").innerHTML = (v[4]).toFixed(2);\n  document.getElementById (\"card6\").innerHTML = (v[5]).toFixed(2);\n  document.getElementById (\"card7\").innerHTML = (v[6]).toFixed(2);\n  document.getElementById (\"card8\").innerHTML = (v[7]).toFixed(2);\n  document.getElementById (\"card9\").innerHTML = (v[8]).toFixed(2);\n  \/\/document.getElementById (\"card10\").innerHTML = (v[9]).toFixed(2);\n  \/\/document.getElementById (\"card11\").innerHTML = (v[10]).toFixed(2);\n  \/\/document.getElementById (\"card12\").innerHTML = (v[11]).toFixed(2);\n\n}\n\nfunction setBoxCharts1 () {\n  y1 = []; y2 = []; y3 = []; y4 = [];\n  a1 = []; a2 = []; a3 = []; a4 = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+_in%\"]);\n      if (dummy) y1.push (dummy);\n      else y1.push (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+_in%\"]);\n      if (dummy) y2.push (dummy);\n      else y2.push (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+_in%\"]);\n      if (dummy) y3.push (dummy);\n      else y3.push (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+_in%\"]);\n      if (dummy) y4.push (dummy);\n      else y4.push (0);\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35-64_in%\"]);\n      if (dummy) a1.push (dummy);\n      else a1.push (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_65+_in%\"]);\n      if (dummy) a2.push (dummy);\n      else a2.push (0);\n  \n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35-64_in%\"]);\n      if (dummy) a3.push (dummy);\n      else a3.push (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_65+_in%\"]);\n      if (dummy) a4.push (dummy);\n      else a4.push (0);\n    }\n  }\n\n  box1 = [];\n  n = Math.floor(y1.length\/4)\n  y1.sort(function(a,b){ return a-b; });\n  dummy = [y1[0], y1[n], y1[2*n], y1[3*n], y1[y1.length-1]];\n  box1.push ({x:\"Female-2016\/17\", y:dummy});\n  y2.sort(function(a,b){ return a-b; });\n  dummy = [y2[0], y2[n], y2[2*n], y2[3*n], y2[y2.length-1]];\n  box1.push ({x:\"Male-2016\/17\", y:dummy});\n  y3.sort(function(a,b){ return a-b; });\n  dummy = [y3[0], y3[n], y3[2*n], y3[3*n], y3[y3.length-1]];\n  box1.push ({x:\"Female-2018\/19\", y:dummy});\n  y4.sort(function(a,b){ return a-b; });\n  dummy = [y4[0], y4[n], y4[2*n], y4[3*n], y4[y4.length-1]];\n  box1.push ({x:\"Male-2018\/19\", y:dummy});\n  var options = {series: [{type: 'boxPlot', data: box1}],\n        chart: {type: 'boxPlot',height: 420}, title: {text: 'Distribution of COPD in % Based on Gender', align: 'left'},\n        plotOptions: {bar: {horizontal: true},boxPlot: {colors: {upper: '#55586B', lower: '#A5A7B7'}}} };\n  document.getElementById(\"chart1\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart1\"), options).render();\n\n  box2 = [];\n  n = Math.floor(a1.length\/4)\n  a1.sort(function(a,b){ return a-b; });\n  dummy = [a1[0], a1[n], a1[2*n], a1[3*n], a1[a1.length-1]];\n  box2.push ({x:\"35-64 YO,2016\/17\", y:dummy});\n  a3.sort(function(a,b){ return a-b; });\n  dummy = [a3[0], a3[n], a3[2*n], a3[3*n], a3[a3.length-1]];\n  box2.push ({x:\"35-64 YO,2018\/19\", y:dummy});\n  a2.sort(function(a,b){ return a-b; });\n  dummy = [a2[0], a2[n], a2[2*n], a2[3*n], a2[a2.length-1]];\n  box2.push ({x:\"65+ YO,2016\/17\", y:dummy});\n  a4.sort(function(a,b){ return a-b; });\n  dummy = [a4[0], a4[n], a4[2*n], a4[3*n], a4[a4.length-1]];\n  box2.push ({x:\"65+ YO,2018\/19\", y:dummy});\n  var options = {series: [{type: 'boxPlot', data: box2}],\n        chart: {type: 'boxPlot',height: 420}, title: {text: 'Distribution of COPD in % Based on Age', align: 'left'},\n        plotOptions: {bar: {horizontal: true},boxPlot: {colors: {upper: '#55586B', lower: '#A5A7B7'}}} };\n  document.getElementById(\"chart2\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart2\"), options).render();\n\n}\n\nfunction setBarCharts1 () {\n  f = []; m = []; category = [];\n  f1 = []; f2 = []; m1 = []; m2 = []; y1 = []; y2 = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      category.push (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+_in%\"]);\n      if (!dummy1 && !dummy2) {dummy1 = 0; dummy2 = 0; f1.push(-dummy2); f2.push(-dummy1);}      \n      else if (!dummy1) { f1.push(-dummy2); f2.push(0); dummy1 = dummy2; }\n      else if (!dummy2) { f1.push(0); f2.push(-dummy1); dummy2 = dummy1; }\n      else { f1.push(-dummy2); f2.push(-dummy1); }\n      dummy = -(dummy1 + dummy2) \/ 2;\n      f.push (dummy);\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+_in%\"]);\n      if (!dummy1 && !dummy2) {dummy1 = 0; dummy2 = 0; m1.push(dummy2); m2.push(dummy1); }      \n      else if (!dummy1) { m1.push(dummy2); m2.push(0); dummy1 = dummy2; }\n      else if (!dummy2) { m1.push(0); m2.push(dummy1); dummy2 = dummy1; }\n      else { m1.push(dummy2); m2.push(dummy1); }\n      dummy = (dummy1 + dummy2) \/ 2;\n      m.push (dummy);\n      \n      dummy1 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+_in%\"]);\n      if (!dummy1) y1.push(0);\n      else y1.push(-dummy1);\n      if (!dummy2) y2.push(0); \n      else y2.push(dummy2); \n    }\n  }\n  var options = { series: [{ name: 'Female', data: f}, { name: 'Male', data: m}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#FF99FF', '#00CC99'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -mx_female1, max: mx_male1, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'Mean COPD in % Based on Gender'},\n        xaxis: { categories: category, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart3\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart3\"), options).render();\n\n  var options = { series: [{ name: 'Female', data: f1}, { name: 'Male', data: m1}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#FF99FF', '#00CC99'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -mx_female1, max: mx_male1, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'COPD in % Based on Gender (2016\/17)'},\n        xaxis: { categories: category, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart4\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart4\"), options).render();\n\n  var options = { series: [{ name: 'Female', data: f2}, { name: 'Male', data: m2}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#FF99FF', '#00CC99'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -mx_female1, max: mx_male1, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val; } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'COPD in % Based on Gender (2018\/19)'},\n        xaxis: { categories: category, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart5\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart5\"), options).render();\n\n  var options = { series: [{ name: '2016\/17', data: y1}, { name: '2018\/19', data: y2}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#00AC00', '#F6C700'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -50, max: 50, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val; } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'COPD in % Based on Year'},\n        xaxis: { categories: category, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart6\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart6\"), options).render();\n}\n\nfunction setPieCharts1 () {\n  c1 = []; \n  c2 = []; \n  c3 = []; \n  c4 = []; \n  labels = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      labels.unshift (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n      c1.unshift (0);\n      c2.unshift (0);\n      c3.unshift (0);\n      c4.unshift (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35-64_in%\"]);\n      if (dummy) c1[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35-64_in%\"]);\n      if (dummy) c1[0] = (c1[0] + dummy) \/ 2;\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35-64_in%\"]);\n      if (dummy) c2[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35-64_in%\"]);\n      if (dummy) c2[0] = (c2[0] + dummy) \/ 2;\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_65+_in%\"]);\n      if (dummy) c3[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_65_in%\"]);\n      if (dummy) c3[0] = (c3[0] + dummy) \/ 2;\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_65+_in%\"]);\n      if (dummy) c4[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_65+_in%\"]);\n      if (dummy) c4[0] = (c4[0] + dummy) \/ 2;\n    }\n  }\n  var options1 = {series: c1, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Female, 35-64)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie1\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie1\"), options1).render();\n\n  var options2 = {series: c2, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Male, 35-64)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie2\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie2\"), options2).render();\n\n  var options3 = {series: c3, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Female, 65+)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie3\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie3\"), options3).render();\n\n  var options4 = {series: c4, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Male, 65+)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie4\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie4\"), options4).render();\n}\n\nfunction setPieCharts2 () {\n  c1 = []; \n  c2 = []; \n  c3 = []; \n  c4 = []; \n  labels = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      labels.unshift (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n      c1.unshift (0);\n      c2.unshift (0);\n      c3.unshift (0);\n      c4.unshift (0);\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+_in%\"]);\n      if (dummy) c1[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+_in%\"]);\n      if (dummy) c2[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+_in%\"]);\n      if (dummy) c3[0] += dummy;\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+_in%\"]);\n      if (dummy) c4[0] += dummy;\n    }\n  }\n  var options1 = {series: c1, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Female, 2016\/17)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie5\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie5\"), options1).render();\n\n  var options3 = {series: c3, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Male, 2016\/17)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie6\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie6\"), options3).render();\n\n  var options2 = {series: c2, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Female, 2018\/19)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie7\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie7\"), options2).render();\n\n  var options4 = {series: c4, chart: { width: 350, type: \"donut\"}, stroke: { width: 0 }, labels: labels, title: {text: \"Mean COPD in % (Male, 2018\/19)\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie8\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie8\"), options4).render();\n}\n\nfunction setBarCharts2 () {\n  category = [];\n  data1 = []; data2 = [];\n  data3 = []; data4 = [];\n  data5 = []; data6 = []; data7 = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      category.push (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+_in%\"]);\n      if (dummy) data1.push(dummy);\n      else data1.push(0);\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+_in%\"]);\n      if (dummy) data2.push(dummy);\n      else data2.push(0);\n\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+_in%\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      if (dummy1 && dummy2) dummy = dummy \/ 2;\n      data3.push(dummy);\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+_in%\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      if (dummy1 && dummy2) dummy = dummy \/ 2;\n      data4.push(dummy);\n\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35-64_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35-64_in%\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      if (dummy1 && dummy2) dummy = dummy \/ 2;\n      data5.push(dummy);\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_65+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_65+_in%\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      if (dummy1 && dummy2) dummy = dummy \/ 2;\n      data6.push(dummy);\n    }\n  }\n\n  var options1 = { series: [{ name: '2016\/17', data: data1 }, { name: '2018\/19', data: data2 }], chart: { type: 'bar', height: 430 },\n        colors: ['#00AC00', '#F6C700'], plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' }}},\n        dataLabels: { enabled: true, offsetX: -6, style: { fontSize: '12px', colors: ['#000'] }},\n        stroke: { show: true, width: 1, colors: ['#fff'] }, tooltip: { shared: true, intersect: false, \n        x: { formatter: function (val) { return val; } }, y: { formatter: function (val) { return val + \"%\"; }}},\n        title: { text: 'COPD in % Based on Year'}, xaxis: { categories: category}, };\n  document.getElementById(\"yearchart1\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"yearchart1\"), options1).render();\n\n  var options2 = { series: [{ name: 'Female', data: data3 }, { name: 'Male', data: data4 }], chart: { type: 'bar', height: 430 },\n        colors: ['#FF99FF', '#00CC99'], plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' }}},\n        dataLabels: { enabled: true, offsetX: -6, style: { fontSize: '12px', colors: ['#000'] }},\n        stroke: { show: true, width: 1, colors: ['#fff'] }, tooltip: { shared: true, intersect: false, \n        x: { formatter: function (val) { return val; } }, y: { formatter: function (val) { return val + \"%\"; }}},\n        title: { text: 'Mean COPD in % Based on Gender'}, xaxis: { categories: category}, };\n  document.getElementById(\"yearchart2\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"yearchart2\"), options2).render();\n\n  var options3 = { series: [{ name: '35-44', data: data5 }, { name: '65+', data: data6 }], \n                   chart: { type: 'bar', height: 450 },\n        colors: ['#FFCC00', '#FF9900'], plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' }}},\n        dataLabels: { enabled: true, offsetX: -6, style: { fontSize: '12px', colors: ['#000'] }},\n        stroke: { show: true, width: 1, colors: ['#fff'] }, tooltip: { shared: true, intersect: false, \n        x: { formatter: function (val) { return val; } }, y: { formatter: function (val) { return val + \"%\"; }}},\n        title: { text: 'Mean COPD in % Based on Age'}, xaxis: { categories: category}, };\n  document.getElementById(\"agechart1\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"agechart1\"), options3).render();\n}\n\n\/*----------------------------- SET CARDS AHAIN ----------------------------*\/\nfunction setCards2 () {\n  v = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n  n = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+\"]);\n      if (dummy) { v[0] += dummy; n[0] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+\"]);\n      if (dummy) { v[1] += dummy; n[1] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+\"]);\n      if (dummy) { v[2] += dummy; n[2] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+\"]);\n      if (dummy) { v[3] += dummy; n[3] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+\"]);\n      if (dummy) { v[4] += dummy; n[4] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+\"]);\n      if (dummy) { v[5] += dummy; n[5] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+\"]);\n      if (dummy) { v[6] += dummy; n[6] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+\"]);\n      if (dummy) { v[7] += dummy; n[7] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+\"]);\n      if (dummy) { v[8] += dummy; n[8] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+\"]);\n      if (dummy) { v[9] += dummy; n[9] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+\"]);\n      if (dummy) { v[10] += dummy; n[10] += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+\"]);\n      if (dummy) { v[11] += dummy; n[11] += 1; }\n\n    }\n  }\n\n  \/\/if (n[0] != 0) v[0] = v[0] \/ n[0];\n  \/\/if (n[1] != 0) v[1] = v[1] \/ n[1];\n  if (n[2] != 0) v[2] = v[2] \/ n[2];\n  if (n[3] != 0) v[3] = v[3] \/ n[3];\n  \/\/if (n[4] != 0) v[4] = v[4] \/ n[4];\n  \/\/if (n[5] != 0) v[5] = v[5] \/ n[5];\n  \/\/if (n[6] != 0) v[6] = v[6] \/ n[6];\n  \/\/if (n[7] != 0) v[7] = v[7] \/ n[7];\n  if (n[8] != 0) v[8] = v[8] \/ n[8];\n  if (n[9] != 0) v[9] = v[9] \/ n[9];\n  if (n[10] != 0) v[10] = v[10] \/ n[10];\n  if (n[11] != 0) v[11] = v[11] \/ n[11];\n  document.getElementById (\"card13\").innerHTML = (v[0]).toFixed(1);\n  document.getElementById (\"card14\").innerHTML = (v[1]).toFixed(1);\n  document.getElementById (\"card15\").innerHTML = (v[2]).toFixed(1);\n  document.getElementById (\"card16\").innerHTML = (v[3]).toFixed(1);\n  document.getElementById (\"card17\").innerHTML = (v[4]).toFixed(1);\n  document.getElementById (\"card18\").innerHTML = (v[5]).toFixed(1);\n  document.getElementById (\"card19\").innerHTML = (v[6]).toFixed(1);\n  document.getElementById (\"card20\").innerHTML = (v[7]).toFixed(1);\n  document.getElementById (\"card21\").innerHTML = (v[8]).toFixed(1);\n  document.getElementById (\"card22\").innerHTML = (v[9]).toFixed(1);\n  document.getElementById (\"card23\").innerHTML = (v[10]).toFixed(1);\n  document.getElementById (\"card24\").innerHTML = (v[11]).toFixed(1);\n}\n\n\/* ---------------------------- Bar Charts 3 ----------------------------- *\/\nfunction setBarCharts3 () {\n  category = [\"35-64 YO, 2016\/17\", \"35-64 YO, 2018\/19\", \"65+ YO, 2016\/17\", \"65+ YO, 2018\/19\"];\n  category2 = [\"Female, 35-64 YO\", \"Male, 35-64 YO\", \"Female, 65+ YO\", \"Male, 65+ YO\"]\n  dummy1_1 = 0; dummy1_2 = 0; dummy2_1 = 0; dummy2_2 = 0; dummy3_1 = 0; dummy3_2 = 0; dummy4_1 = 0; dummy4_2 = 0; \n  n1_1 = 0; n1_2 = 0; n2_1 = 0; n2_2 = 0; n3_1 = 0; n3_2 = 0; n4_1 = 0; n4_2 = 0; \n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      \/\/category.push (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35-64_in%\"]);\n      if (dummy) { dummy1_1 += dummy; n1_1 += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35-64_in%\"]);\n      if (dummy) { dummy1_2 += dummy; n1_2 += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35-64_in%\"]);\n      if (dummy) { dummy2_1 += dummy; n2_1 += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35-64_in%\"]);\n      if (dummy) { dummy2_2 += dummy; n2_2 += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Female_65+_in%\"]);\n      if (dummy) { dummy3_1 += dummy; n3_1 += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2016\/17_Male_65+_in%\"]);\n      if (dummy) { dummy3_2 += dummy; n3_2 += 1; }\n\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Female_65+_in%\"]);\n      if (dummy) { dummy4_1 += dummy; n4_1 += 1; }\n      dummy = Number(mycopd[i][\"properties\"][\"2018\/19_Male_65+_in%\"]);\n      if (dummy) { dummy4_2 += dummy; n4_2 += 1; }\n    }\n  }\n  data1_1 = [-dummy1_1\/n1_1, -dummy2_1\/n2_1, -dummy3_1\/n3_1, -dummy4_1\/n4_1];\n  data1_2 = [dummy1_2\/n1_2, dummy2_2\/n2_2, dummy3_2\/n3_2, dummy4_2\/n4_2];\n  data2_1 = [-dummy1_1\/n1_1, -dummy1_2\/n1_2, -dummy3_1\/n3_1, -dummy3_2\/n3_2];\n  data2_2 = [dummy2_1\/n2_1, dummy2_2\/n2_2, dummy4_1\/n4_1, dummy4_2\/n4_2];\n\n  var options = { series: [{ name: 'Female', data: data1_1}, { name: 'Male', data: data1_2}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#FF99FF', '#00CC99'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -mx_female1, max: mx_male1, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'Mean COPD in % Based on Gender'},\n        xaxis: { categories: category, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart7\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart7\"), options).render();\n\n  var options2 = { series: [{ name: '2016\/17', data: data2_1}, { name: '2018\/19', data: data2_2}], chart: { type: 'bar', height: 440, stacked: true },\n        colors: ['#00AC00', '#F6C700'], plotOptions: { bar: { horizontal: true, barHeight: '80%' }}, dataLabels: { enabled: false },\n        stroke: { width: 1, colors: [\"#fff\"] }, grid: { xaxis: { lines: { show: false }}}, yaxis: { min: -mx_male1, max: mx_male1, \n        title: {\/* text: 'Neighborhood'*\/}}, tooltip: { shared: false, x: { formatter: function (val) { return val } },\n        y: { formatter: function (val) { return Math.abs(val) + \"%\" }}}, title: { text: 'Mean COPD in % Based on Year'},\n        xaxis: { categories: category2, title: { \/*text: 'Percent'*\/ }, \n        labels: { formatter: function (val) { return Math.abs(Math.round(val)) + \"%\" }}}};\n  document.getElementById(\"chart8\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart8\"), options2).render();\n}\n\n\/*------------------------------- Set Pie Chart Again ----------------------------------*\/\nfunction setPieCharts3 () {\n  c1 = [0, 0]; labels1 = [\"35-64\", \"65+\"];\n  c2 = [0, 0]; labels2 = [\"Female\", \"Male\"];\n  c3 = [0, 0]; labels3 = [\"2016\/17\", \"2018\/19\"];\n  c4 = [0, 0, 0, 0, 0, 0, 0, 0]; \n  labels4 = [\"Female;35-64(2016\/17)\",\"Male;35-64(2016\/17)\",\"Female;65+(2016\/17)\",\"Male;65+(2016\/17)\",\n             \"Female;35-64(2018\/19)\",\"Male;35-64(2018\/19)\",\"Female;65+(2018\/19)\",\"Male;65+(2018\/19)\"];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy1 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35-64\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35-64\"]);\n      if (dummy1) c1[0] += dummy1;\n      if (dummy2) c1[0] += dummy2;\n      dummy1 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_65+\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_65+\"]);\n      if (dummy1) c1[1] += dummy1;\n      if (dummy2) c1[1] += dummy2;\n\n      dummy1 = Number(mycopd[i][\"properties\"][\"2016\/17_Female_35+\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2018\/19_Female_35+\"]);\n      if (dummy1) c2[0] += dummy1;\n      if (dummy2) c2[0] += dummy2;\n      dummy1 = Number(mycopd[i][\"properties\"][\"2016\/17_Male_35+\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2018\/19_Male_35+\"]);\n      if (dummy1) c2[1] += dummy1;\n      if (dummy2) c2[1] += dummy2;\n\n      dummy1 = Number (mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+\"]);\n      if (dummy1) c3[0] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+\"]);\n      if (dummy1) c3[1] += dummy1;\n\n      dummy1 = Number (mycopd[i][\"properties\"][\"2016\/17_Female_35-64\"]);\n      if (dummy1) c4[0] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2016\/17_Male_35-64\"]);\n      if (dummy1) c4[1] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2016\/17_Female_65+\"]);\n      if (dummy1) c4[2] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2016\/17_Male_65+\"]);\n      if (dummy1) c4[3] += dummy1;\n      \n      dummy1 = Number (mycopd[i][\"properties\"][\"2018\/19_Female_35-64\"]);\n      if (dummy1) c4[4] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2018\/19_Male_35-64\"]);\n      if (dummy1) c4[5] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2018\/19_Female_65+\"]);\n      if (dummy1) c4[6] += dummy1;\n      dummy1 = Number (mycopd[i][\"properties\"][\"2018\/19_Male_65+\"]);\n      if (dummy1) c4[7] += dummy1;\n      \n    }\n  }\n  var options1 = {series: c1, chart: { width: 320, type: \"donut\"}, stroke: { width: 0 }, labels: labels1, title: {text: \"Total COPD by Age\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie9\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie9\"), options1).render();\n\n  var options2 = {series: c2, chart: { width: 330, type: \"donut\"}, stroke: { width: 0 }, labels: labels2, title: {text: \"Total COPD by Gender\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie10\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie10\"), options2).render();\n\n  var options3 = {series: c3, chart: { width: 330, type: \"donut\"}, stroke: { width: 0 }, labels: labels3, title: {text: \"Total COPD by Year\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie11\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie11\"), options3).render();\n\n  var options4 = {series: c4, chart: { width: 370, type: \"donut\"}, stroke: { width: 0 }, labels: labels4, title: {text: \"Total COPD\"}, \n                  responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } }}] }\n  document.getElementById(\"pie12\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"pie12\"), options4).render();\n}\n\n\/* -------------------------------------- Set the Final Bar Charts ---------------------------------- *\/\nfunction setBarCharts4 () {\n  category = [];\n  data1 = []; data2 = [];\n  for (var i=0; i < mycopd.length; i++) {\n    item = mycopd[i][\"properties\"][\"AREA_SHORT\"];\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      category.push (mycopd[i][\"properties\"][\"AREA_NAME\"]);\n\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      data1.push(dummy);\n\n      dummy1 = Number(mycopd[i][\"properties\"][\"2018\/19_BothSexes_35+_in%\"]);\n      dummy2 = Number(mycopd[i][\"properties\"][\"2016\/17_BothSexes_35+_in%\"]);\n      dummy = 0;\n      if (dummy1) dummy += dummy1;\n      if (dummy2) dummy += dummy2;\n      if (dummy1 && dummy2) dummy = dummy \/ 2;\n      data2.push(dummy);\n    }\n  }\n\n  var options1 = { series: [{ name: 'COPD', data: data1}], chart: { height: 430, type: 'bar' }, \n                  plotOptions: { bar: { borderRadius: 5, columnWidth: '50%' } }, dataLabels: { enabled: true }, stroke: { width: 2 },   \n                  grid: { row: { colors: ['#fff', '#f2f2f2'] } }, xaxis: { categories: category, },\n                  yaxis: { title: { text: 'COPD' } }, \n                  title: {text: 'Cumulative Number of COPD', align: 'left'},\n                  fill: { type: 'gradient', gradient: { shade: 'light', type: \"horizontal\", shadeIntensity: 0.25, gradientToColors: undefined,\n                          inverseColors: true, opacityFrom: 0.85, opacityTo: 0.85, stops: [50, 0, 100] } } };\n  document.getElementById(\"chart9\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart9\"), options1).render();\n\n  var options2 = { series: [{ name: 'COPD', data: data2}], chart: { height: 430, type: 'bar' }, \n                  plotOptions: { bar: { borderRadius: 5, columnWidth: '50%' } }, dataLabels: { enabled: true }, stroke: { width: 2 },   \n                  grid: { row: { colors: ['#fff', '#f2f2f2'] } }, xaxis: { categories: category, },\n                  yaxis: { title: { text: 'COPD' } }, \n                  title: {text: 'Mean Number of COPD in %', align: 'left'},\n                  fill: { type: 'gradient', gradient: { shade: 'light', type: \"horizontal\", shadeIntensity: 0.25, gradientToColors: undefined,\n                          inverseColors: true, opacityFrom: 0.85, opacityTo: 0.85, stops: [50, 0, 100] } } };\n  document.getElementById(\"chart10\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"chart10\"), options2).render();\n}\n\n\/* ---------------------------- This little function actually works as main ------------------------- *\/\nfunction radioClick (id) {\n  setCards();\n  setBoxCharts1();\n  setBarCharts1();\n  setPieCharts1();\n  setPieCharts2();\n  setBarCharts2();\n  setCards2();\n  setBarCharts3 ();\n  setPieCharts3 ();\n  setBarCharts4 ();\n}\n\n\/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Citation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\/\nfunction cite() { \n  message = \"Please kindly cite our work and the underlying data source:<br> 1. ZM Nia, JD Kong, BCCHC, COPD in Toronto (2023) https:\/\/acadic.org\/copd-in-toronto<br> 2. Ontario Community Health Profiles Partnership (OCHPP), Sharing high quality health equity data with everyone (2023) https:\/\/www.ontariohealthprofiles.ca\/index.php\";\n  $('<div><\/div>').html( message ).dialog({ title: \"How to Cite\", resizable: false, modal: true, width: 800, \n        buttons: { 'Ok': function()  { $( this ).dialog( 'close' ); }} }); \n}\n\nfunction download(id) { window.URL.revokeObjectURL (document.getElementById (id).href); }\n\n<\/script>\n\n<style>\n<!-- -------------------------------- CSS from Here ------------------------------ -->\nbody { font: 11pt Helvetica;} \n.checkb {\n    padding: 10px; \n    padding-left: 0px; \n    padding-right: 0px;\n    font-size: 9pt;\n}\n.info {\n    padding: 6px 8px;\n    font: 14px\/16px Arial, Helvetica, sans-serif;\n    background: white;\n    background: rgba(255,255,255,0.8);\n    box-shadow: 0 0 15px rgba(0,0,0,0.2);\n    border-radius: 5px;\n}\n.info h4 {\n    margin: 0 0 5px;\n    color: #777;\n}\n.legend {\n    line-height: 18px;\n    color: #555;\n}\n.legend i {\n    width: 18px;\n    height: 18px;\n    float: left;\n    margin-right: 8px;\n    opacity: 0.7;\n}\n.ui-widget-header {\n  padding: 1%;\n  padding-left: 8%;\n  background: #DDD;\n  font-size: 20px;\n}\n.ui-dialog-content {\n  padding-top: 2%;\n  padding-bottom: 4%;\n  padding-left: 4%;\n  padding-right: 4%;\n}\n.ui-dialog { \n  background: white;\n  border: 2px solid #000;\n  border-radius: 5px;\n  z-index: 1000000 !important;\n}\n.ui-dialog-titlebar-close {\n    visibility: hidden;\n}\n.ui-dialog-buttonset {\n    margin-left: 88%;\n    margin-bottom: 2%;\n}\n<\/style>\n\n<script>\n\nwindow.onload = plzwork;\nfunction plzwork () { \n  \n  female1 = \"2018\/19_Female_65+_in%\";\n  female2 = \"2018\/19_Female_65+\";\n  male1 = \"2018\/19_Male_65+_in%\";\n  male2 = \"2018\/19_Male_65+\";\n  mx_female1 = 0;\n  mx_female2 = 0;\n  mx_male1 = 0;\n  mx_male2 = 0;  \n  for (var i=0; i < mycopd.length; i++) {\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Female_35-64_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female1) mx_female1 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Female_65+_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female1) mx_female1 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Female_35-64\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female2) mx_female2 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Female_65+\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female2) mx_female2 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Male_35-64_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male1) mx_male1 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Male_65+_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male1) mx_male1 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Male_35-64\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male2) mx_male2 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2018\/19_Male_65+\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male2) mx_male2 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Female_35-64_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female1) mx_female1 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Female_65+_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female1) mx_female1 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Female_35-64\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female2) mx_female2 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Female_65+\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_female2) mx_female2 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Male_35-64_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male1) mx_male1 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Male_65+_in%\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male1) mx_male1 = dummy; }\n\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Male_35-64\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male2) mx_male2 = dummy; }\n    dummy = mycopd[i][\"properties\"][\"2016\/17_Male_65+\"];\n    if (dummy != \"\u2500\") { dummy = Number(dummy); if (dummy > mx_male2) mx_male2 = dummy; }\n  }\n\n  map1 = L.map('choropleth1',  {attributionControl:false}).setView([43.85, -79.35], 10);\n  map1.zoomControl.setPosition('bottomleft');\n  var tiles1 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map1);\n  geojson1 = L.geoJson(mycopd, {style: femaleStyle1, onEachFeature: onEachFeature1}).addTo(map1);\n\n  map2 = L.map('choropleth2',  {attributionControl:false}).setView([43.85, -79.35], 10);\n  map2.zoomControl.setPosition('bottomleft');\n  var tiles2 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map2);\n  geojson2 = L.geoJson(mycopd, {style: maleStyle1, onEachFeature: onEachFeature2}).addTo(map2);\n\n  map3 = L.map('choropleth3',  {attributionControl:false}).setView([43.85, -79.35], 10);\n  map3.zoomControl.setPosition('bottomleft');\n  var tiles3 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map3);\n  geojson3 = L.geoJson(mycopd, {style: femaleStyle2, onEachFeature: onEachFeature3}).addTo(map3);\n\n  map4 = L.map('choropleth4',  {attributionControl:false}).setView([43.85, -79.35], 10);\n  map4.zoomControl.setPosition('bottomleft');\n  var tiles4 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map4);\n  geojson4 = L.geoJson(mycopd, {style: maleStyle2, onEachFeature: onEachFeature4}).addTo(map4);\n\n  info1 = L.control({position: 'topright'});\n  info1.onAdd = function (map1) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update(); \n    return this._div;\n  };\n  info1.update = function (props) {         \n      this._div.innerHTML = '<h5><b> Percentage of Population with COPD (Female) <\/b><\/h5>' +  (props ? '<b> ID= ' + Number(props[\"AREA_SHORT\"]) \n      + ', NAME= ' + props[\"AREA_NAME\"] + ' : <\/b>' + (Number(props[female1]) >= 0 ? Number(props[female1]).toFixed(4) + ' percentage' : ' N\/A') : 'Hover over any neighborhood'); \n  };\n  info1.addTo(map1);\n  legend1 = L.control({position: 'bottomright'});\n  legend1.onAdd = function (map1) { \n    n = Math.floor(mx_female1\/10);\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n, 4*n, 5*n, 6*n, 7*n, 8*n, 9*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + femaleColor(grades[i], n) + '\"><\/i> 0%<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + femaleColor(grades[i]+1, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '%<br>' : '+%');\n    }\n    div.id = \"lgnd1\";\n    return div;\n  }\n  legend1.addTo(map1);\n\n\n  info2 = L.control({position: 'topright'});\n  info2.onAdd = function (map2) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update(); \n    return this._div;\n  };\n  info2.update = function (props) {         \n      this._div.innerHTML = '<h5><b> Percentage of Population with COPD (Male) <\/b><\/h5>' +  (props ? '<b> ID= ' + Number(props[\"AREA_SHORT\"]) \n      + ', NAME= ' + props[\"AREA_NAME\"] + ' : <\/b>' + (Number(props[male1]) >= 0 ? Number(props[male1]).toFixed(4) + ' percentage' : ' N\/A') : 'Hover over any neighborhood'); \n  };\n  info2.addTo(map2);\n\nlegend2 = L.control({position: 'bottomright'});\n  legend2.onAdd = function (map2) { \n    n = Math.floor(mx_male1\/10);\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n, 4*n, 5*n, 6*n, 7*n, 8*n, 9*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + maleColor(grades[i], n) + '\"><\/i> 0%<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + maleColor(grades[i]+1, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '%<br>' : '+%');\n    }\n    div.id = \"lgnd2\";\n    return div;\n  }\n  legend2.addTo(map2);\n\n\n  info3 = L.control({position: 'topright'});\n  info3.onAdd = function (map3) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update(); \n    return this._div;\n  };\n  info3.update = function (props) {         \n      this._div.innerHTML = '<h5><b> Number of People with COPD (Female) <\/b><\/h5>' +  (props ? '<b> ID= ' + Number(props[\"AREA_SHORT\"]) \n      + ', NAME= ' + props[\"AREA_NAME\"] + ' : <\/b>' + (Number(props[female2]) >= 0 ? Number(props[female2]).toFixed(4) + ' persons' : ' N\/A') : 'Hover over any neighborhood'); \n  };\n  info3.addTo(map3);\n\n  legend3 = L.control({position: 'bottomright'});\n  legend3.onAdd = function (map3) { \n    n = Math.floor(mx_female2\/10);\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n, 4*n, 5*n, 6*n, 7*n, 8*n, 9*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + femaleColor(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + femaleColor(grades[i]+1, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd3\";\n    return div;\n  }\n  legend3.addTo(map3);\n\n\n  info4 = L.control({position: 'topright'});\n  info4.onAdd = function (map4) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update(); \n    return this._div;\n  };\n  info4.update = function (props) {         \n      this._div.innerHTML = '<h5><b> Number of People with COPD (Male) <\/b><\/h5>' +  (props ? '<b> ID= ' + Number(props[\"AREA_SHORT\"]) \n      + ', NAME= ' + props[\"AREA_NAME\"] + ' : <\/b>' + (Number(props[male2]) >= 0 ? Number(props[male2]).toFixed(4) + ' persons' : ' N\/A') : 'Hover over any neighborhood'); \n  };\n  info4.addTo(map4);\n\n  legend4 = L.control({position: 'bottomright'});\n  legend4.onAdd = function (map4) { \n    n = Math.floor(mx_male2\/10);\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n, 4*n, 5*n, 6*n, 7*n, 8*n, 9*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + maleColor(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + maleColor(grades[i]+1, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd4\";\n    return div;\n  }\n  legend4.addTo(map4);\n\n\n \/\/----------------- Other Functions -----------------\n  setCards ();\n  setBoxCharts1 ();\n  setBarCharts1 ();\n  setPieCharts1 ();\n  setPieCharts2 ();\n  setBarCharts2 ();\n  setCards2 ();\n  setBarCharts3 ();\n  setPieCharts3 ();\n  setBarCharts4 ();\n\n\n  \/\/--------------------- preparing the file to download -----------------------\n  data = [];\n  for (var i=0; i < mycopd.length; i++) {\n    data[i] = {};\n    for (let k in mycopd[i][\"properties\"]) {\n      if (k != \"Longitude\" && k != \"Latitude\") {\n        if (mycopd[i][\"properties\"][k] == '\u2500') data[i][k] = '?';\n        else data[i][k] = mycopd[i][\"properties\"][k];\n      }\n    }   \n  }\n  const header = Object.keys (data[0]);\n  const ascsv = data.map (dict => (header.map(key => dict[key]).join(',')));\n  result = [header.join(','), ...ascsv].join('\\n');\n  var blob = new Blob([result], { type: 'text\/csv;charset=utf-8;' });\n  url = window.URL.createObjectURL(blob);\n  document.getElementById (\"download\").href = url;\n}\n\n<\/script>\n\n<!-- --------------------------- Source -------------------------------- -->\n<div id=\"source\" style=\"background-color: #EAEAEA; margin-bottom: 0.25%; color: #000000; font-size: 15px; padding: 1.1%; width:100%; display: inline-block;\"> The data of this work is collected from the <a href=\"https:\/\/www.ontariohealthprofiles.ca\/index.php\" target=\"_blank\" rel=\"noopener\"> Ontario Community Health Profiles Partnership (OCHPP)<\/a>.\n<p> The dataset is freely available to copy, use, and redistribute for non-profit community-based purposes only, provided that authors are appropriately credited. <\/p>\n\n<div style=\"width: 10%; float: right; margin-right: 1.5%\"> <button style=\"width: 100%; color: #000000; padding: 0.5%; border-radius: 5px; border-color: grey\" onclick=\"cite()\"> How to cite <\/button> <\/div>\n\n<div style=\"float: right; margin-right: 3%\"> Download full dataset (.csv): \n<a id=\"download\" href=\"\" onclick=\"download(this.id)\" download=\"COPD.csv\">\n<img loading=\"lazy\" decoding=\"async\" style=\"padding-left: 1%\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/62\/62055.png\" alt=\"W3Schools\" width=\"23\" height=\"20\"> <\/a> <\/div>\n<\/div>\n\n<!-- -------------------------- HTML from Here --------------------------- -->\n<div style=\"background-color: #DDDDDD; width:100%;\">\n\n<!-- ---------- introduction ----------- -->\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.5%; margin: 1%; margin-top: 1.45%; width:98%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> \n<p align=\"justify\" style=\"margin: 0px;\"><b> Chronic Obstructive Pulmonary Disease (COPD) which is most commonly caused by tobacco smoking, is characterized by long-term respiratory symptoms and airflow limitations. The primary symptoms of COPD include shortness of breath and a cough which may or may not cause mucus. Other than tobacco smoking, risk factors such as indoor and outdoor air pollutions, exposure to irritants such as dust or grain, and genetics may cause COPD. COPD is incurable. However, most cases of COPD could be prevented or reduced by avoiding the risk factors such as smoking or indoor and outdoor pollutants.  <\/b><\/p> <p align=\"justify\" style=\"margin: 0px; margin-top: 1%;\"><b> Below please find our dashboard for COPD in Toronto. <\/b><\/p><\/div>\n\n<!-- ----------------------------- Add Links Here --------------------------------- -->\n<!-- ------------------------------- Case MAP and Range ---------------------------------- -->\n<div style=\"margin: 1%; margin-top: 0%;\">\n<div id=\"choropleth1\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  <\/div>\n<div id=\"choropleth2\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left; margin-left: 1%\">  <\/div> <\/div>\n\n<div style=\"margin: 1.1%; margin-bottom: 0%; margin-right: 0.7%; width:98%; display: inline-block; vertical-align: top;\">\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 12%; width: 39.5%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"year1\" style=\"padding-left: 8%; margin: 0%; font-size: 15pt;\"> Year: 2018\/19 <\/p> <\/b>\n<input id=\"yearrange1\" type=\"range\" min=\"0\" step=\"1\" max=\"1\" value=\"1\" style=\"width: 60%\" oninput=\"showyearrange1(this.value)\"> \n<\/div> \n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 17%; width: 59.5%; margin-left: 1%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"age1\" style=\"padding-left: 20%; margin: 0%; font-size: 15pt;\"> Age: 65+ <\/p> <\/b>\n<input id=\"agerange1\" type=\"range\" min=\"0\" step=\"1\" max=\"1\" value=\"1\" style=\"width: 60%\" oninput=\"showagerange1(this.value)\"> \n<\/div> <\/div>\n\n\n<div style=\"margin: 1.1%; margin-top: 1%; margin-right: 0.7%; width:98%; display: inline-block; vertical-align: top;\">\n<div id=\"choropleth3\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  <\/div>\n<div id=\"choropleth4\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left; margin-left: 1%\"><\/div>\n<\/div>\n\n<div style=\"margin: 1.1%; margin-top: 0%; margin-bottom: 1%; margin-right: 0.7%; width:98%; display: inline-block; vertical-align: top;\">\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 12%; width: 39.5%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"year2\" style=\"padding-left: 8%; margin: 0%; font-size: 15pt;\"> Year: 2018\/19 <\/p> <\/b>\n<input id=\"yearrange2\" type=\"range\" min=\"0\" step=\"1\" max=\"1\" value=\"1\" style=\"width: 60%\" oninput=\"showyearrange2(this.value)\"> \n<\/div> \n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 17%; width: 59.5%; margin-left: 1%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"age2\" style=\"padding-left: 20%; margin: 0%; font-size: 15pt;\"> Age: 65+ <\/p> <\/b>\n<input id=\"agerange2\" type=\"range\" min=\"0\" step=\"1\" max=\"1\" value=\"1\" style=\"width: 60%\" oninput=\"showagerange2(this.value)\"> \n<\/div> <\/div>\n\n<!-- --------------------------------- Select Neighborhood ---------------------------- -->\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.5%; margin: 1.1%; margin-top: 0%; margin-right: 0.7%; width:18%; height: 8235px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block; vertical-align: top;\">\n<p><b> Select Neighborhood: <\/b><\/p> <p style=\"margin-bottom: -3%; margin-left: 3%;\"><b> ID: NAME <\/b> <\/p>\n\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"1\" onclick=\"radioClick(this.id);\"> <b> 1: West Humber-Clairville <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"2\" onclick=\"radioClick(this.id);\"> <b> 2: Mount Olive-Silverstone-Jamestown <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"3\" onclick=\"radioClick(this.id);\"> <b> 3: Thistletown-Beaumond Heights <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"4\" onclick=\"radioClick(this.id);\"> <b> 4: Rexdale-Kipling <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"5\" onclick=\"radioClick(this.id);\"> <b> 5: Elms-Old Rexdale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"6\" onclick=\"radioClick(this.id);\"> <b> 6: Kingsview Village-The Westway <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"7\" onclick=\"radioClick(this.id);\"> <b> 7: Willowridge-Martingrove-Richview <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8\" onclick=\"radioClick(this.id);\"> <b> 8: Humber Heights-Westmount <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"9\" onclick=\"radioClick(this.id);\"> <b> 9: Edenbridge-Humber Valley <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"10\" onclick=\"radioClick(this.id);\"> <b> 10: Princess-Rosethorn <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"11\" onclick=\"radioClick(this.id);\"> <b> 11: Eringate-Centennial-West Deane <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"12\" onclick=\"radioClick(this.id);\"> <b> 12: Markland Wood <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"13\" onclick=\"radioClick(this.id);\"> <b> 13: Etobicoke West Mall <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"15\" onclick=\"radioClick(this.id);\"> <b> 15: Kingsway South <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"16\" onclick=\"radioClick(this.id);\"> <b> 16: Stonegate-Queensway <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"18\" onclick=\"radioClick(this.id);\"> <b> 18: New Toronto <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"19\" onclick=\"radioClick(this.id);\"> <b> 19: Long Branch <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"20\" onclick=\"radioClick(this.id);\"> <b> 20: Alderwood <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"21\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 21: Humber Summit <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"22\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 22: Humbermede <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"23\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 23: Pelmo Park-Humberlea <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"24\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 24: Black Creek <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"25\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 25: Glenfield-Jane Heights <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"27\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 27: York University Heights <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"28\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> 28: Rustic <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"29\" onclick=\"radioClick(this.id);\"> <b> 29: Maple Leaf <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"30\" onclick=\"radioClick(this.id);\"> <b> 30: Brookhaven-Amesbury <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"31\" onclick=\"radioClick(this.id);\"> <b> 31: Yorkdale-Glen Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"32\" onclick=\"radioClick(this.id);\"> <b> 32: Englemount-Lawrence <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"33\" onclick=\"radioClick(this.id);\"> <b> 33: Clanton Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"34\" onclick=\"radioClick(this.id);\"> <b> 34: Bathurst Manor <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"35\" onclick=\"radioClick(this.id);\"> <b> 35: Westminster-Branson <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"36\" onclick=\"radioClick(this.id);\"> <b> 36: Newtonbrook West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"37\" onclick=\"radioClick(this.id);\"> <b> 37: Willowdale West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"38\" onclick=\"radioClick(this.id);\"> <b> 38: Lansing-Westgate <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"39\" onclick=\"radioClick(this.id);\"> <b> 39: Bedford Park-Nortown <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"40\" onclick=\"radioClick(this.id);\"> <b> 40: St.Andrew-Windfields <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"41\" onclick=\"radioClick(this.id);\"> <b> 41: Bridle Path-Sunnybrook-York Mills <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"42\" onclick=\"radioClick(this.id);\"> <b> 42: Banbury-Don Mills <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"43\" onclick=\"radioClick(this.id);\"> <b> 43: Victoria Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"44\" onclick=\"radioClick(this.id);\"> <b> 44: Flemingdon Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"46\" onclick=\"radioClick(this.id);\"> <b> 46: Pleasant View <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"47\" onclick=\"radioClick(this.id);\"> <b> 47: Don Valley Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"48\" onclick=\"radioClick(this.id);\"> <b> 48: Hillcrest Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"49\" onclick=\"radioClick(this.id);\"> <b> 49: Bayview Woods-Steeles <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"50\" onclick=\"radioClick(this.id);\"> <b> 50: Newtonbrook East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"52\" onclick=\"radioClick(this.id);\"> <b> 52: Bayview Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"53\" onclick=\"radioClick(this.id);\"> <b> 53: Henry Farm <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"54\" onclick=\"radioClick(this.id);\"> <b> 54: O'Connor-Parkview <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"55\" onclick=\"radioClick(this.id);\"> <b> 55: Thorncliffe Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"56\" onclick=\"radioClick(this.id);\"> <b> 56: Leaside-Bennington <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"57\" onclick=\"radioClick(this.id);\"> <b> 57: Broadview North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"58\" onclick=\"radioClick(this.id);\"> <b> 58: Old East York <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"59\" onclick=\"radioClick(this.id);\"> <b> 59: Danforth East York <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"60\" onclick=\"radioClick(this.id);\"> <b> 60: Woodbine-Lumsden <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"61\" onclick=\"radioClick(this.id);\"> <b> 61: Taylor-Massey <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"62\" onclick=\"radioClick(this.id);\"> <b> 62: East End-Danforth <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"63\" onclick=\"radioClick(this.id);\"> <b> 63: The Beaches <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"64\" onclick=\"radioClick(this.id);\"> <b> 64: Woodbine Corridor <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"65\" onclick=\"radioClick(this.id);\"> <b> 65: Greenwood-Coxwell <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"66\" onclick=\"radioClick(this.id);\"> <b> 66: Danforth <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"67\" onclick=\"radioClick(this.id);\"> <b> 67: Playter Estates-Danforth <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"68\" onclick=\"radioClick(this.id);\"> <b> 68: North Riverdale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"69\" onclick=\"radioClick(this.id);\"> <b> 69: Blake-Jones <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"70\" onclick=\"radioClick(this.id);\"> <b> 70: South Riverdale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"71\" onclick=\"radioClick(this.id);\"> <b> 71: Cabbagetown-South St.James Town <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"72\" onclick=\"radioClick(this.id);\"> <b> 72: Regent Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"73\" onclick=\"radioClick(this.id);\"> <b> 73: Moss Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"74\" onclick=\"radioClick(this.id);\"> <b> 74: North St.James Town <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"78\" onclick=\"radioClick(this.id);\"> <b> 78: Kensington-Chinatown <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"79\" onclick=\"radioClick(this.id);\"> <b> 79: University <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"80\" onclick=\"radioClick(this.id);\"> <b> 80: Palmerston-Little Italy <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"81\" onclick=\"radioClick(this.id);\"> <b> 81: Trinity-Bellwoods <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"83\" onclick=\"radioClick(this.id);\"> <b> 83: Dufferin Grove <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"84\" onclick=\"radioClick(this.id);\"> <b> 84: Little Portugal <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"85\" onclick=\"radioClick(this.id);\"> <b> 85: South Parkdale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"86\" onclick=\"radioClick(this.id);\"> <b> 86: Roncesvalles <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"87\" onclick=\"radioClick(this.id);\"> <b> 87: High Park-Swansea <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"88\" onclick=\"radioClick(this.id);\"> <b> 88: High Park North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"89\" onclick=\"radioClick(this.id);\"> <b> 89: Runnymede-Bloor West Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"90\" onclick=\"radioClick(this.id);\"> <b> 90: Junction Area <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"91\" onclick=\"radioClick(this.id);\"> <b> 91: Weston-Pelham Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"92\" onclick=\"radioClick(this.id);\"> <b> 92: Corso Italia-Davenport <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"94\" onclick=\"radioClick(this.id);\"> <b> 94: Wychwood <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"95\" onclick=\"radioClick(this.id);\"> <b> 95: Annex <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"96\" onclick=\"radioClick(this.id);\"> <b> 96: Casa Loma <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"97\" onclick=\"radioClick(this.id);\"> <b> 97: Yonge-St.Clair <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"98\" onclick=\"radioClick(this.id);\"> <b> 98: Rosedale-Moore Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"99\" onclick=\"radioClick(this.id);\"> <b> 99: Mount Pleasant East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"100\" onclick=\"radioClick(this.id);\"> <b> 100: Yonge-Eglinton <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"101\" onclick=\"radioClick(this.id);\"> <b> 101: Forest Hill South <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"102\" onclick=\"radioClick(this.id);\"> <b> 102: Forest Hill North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"103\" onclick=\"radioClick(this.id);\"> <b> 103: Lawrence Park South <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"105\" onclick=\"radioClick(this.id);\"> <b> 105: Lawrence Park North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"106\" onclick=\"radioClick(this.id);\"> <b> 106: Humewood-Cedarvale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"107\" onclick=\"radioClick(this.id);\"> <b> 107: Oakwood Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"108\" onclick=\"radioClick(this.id);\"> <b> 108: Briar Hill-Belgravia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"109\" onclick=\"radioClick(this.id);\"> <b> 109: Caledonia-Fairbank <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"110\" onclick=\"radioClick(this.id);\"> <b> 110: Keelesdale-Eglinton West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"111\" onclick=\"radioClick(this.id);\"> <b> 111: Rockcliffe-Smythe <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"112\" onclick=\"radioClick(this.id);\"> <b> 112: Beechborough-Greenbrook <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"113\" onclick=\"radioClick(this.id);\"> <b> 113: Weston <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"114\" onclick=\"radioClick(this.id);\"> <b> 114: Lambton Baby Point <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"115\" onclick=\"radioClick(this.id);\"> <b> 115: Mount Dennis <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"116\" onclick=\"radioClick(this.id);\"> <b> 116: Steeles <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"118\" onclick=\"radioClick(this.id);\"> <b> 118: Tam O'Shanter-Sullivan <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"119\" onclick=\"radioClick(this.id);\"> <b> 119: Wexford\/Maryvale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"120\" onclick=\"radioClick(this.id);\"> <b> 120: Clairlea-Birchmount <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"121\" onclick=\"radioClick(this.id);\"> <b> 121: Oakridge <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"122\" onclick=\"radioClick(this.id);\"> <b> 122: Birchcliffe-Cliffside <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"123\" onclick=\"radioClick(this.id);\"> <b> 123: Cliffcrest <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"124\" onclick=\"radioClick(this.id);\"> <b> 124: Kennedy Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"125\" onclick=\"radioClick(this.id);\"> <b> 125: Ionview <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"126\" onclick=\"radioClick(this.id);\"> <b> 126: Dorset Park <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"128\" onclick=\"radioClick(this.id);\"> <b> 128: Agincourt South-Malvern West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"129\" onclick=\"radioClick(this.id);\"> <b> 129: Agincourt North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"130\" onclick=\"radioClick(this.id);\"> <b> 130: Milliken <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"133\" onclick=\"radioClick(this.id);\"> <b> 133: Centennial Scarborough <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"134\" onclick=\"radioClick(this.id);\"> <b> 134: Highland Creek <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"135\" onclick=\"radioClick(this.id);\"> <b> 135: Morningside <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"136\" onclick=\"radioClick(this.id);\"> <b> 136: West Hill <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"138\" onclick=\"radioClick(this.id);\"> <b> 138: Eglinton East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"139\" onclick=\"radioClick(this.id);\"> <b> 139: Scarborough Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"140\" onclick=\"radioClick(this.id);\"> <b> 140: Guildwood <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"141\" onclick=\"radioClick(this.id);\"> <b> 141: Golfdale-Cedarbrae-Woburn <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"142\" onclick=\"radioClick(this.id);\"> <b> 142: Woburn North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"143\" onclick=\"radioClick(this.id);\"> <b> 143: West Rouge <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"144\" onclick=\"radioClick(this.id);\"> <b> 144: Morningside Heights <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"145\" onclick=\"radioClick(this.id);\"> <b> 145: Malvern West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"146\" onclick=\"radioClick(this.id);\"> <b> 146: Malvern East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"147\" onclick=\"radioClick(this.id);\"> <b> 147: L'Amoreaux West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"148\" onclick=\"radioClick(this.id);\"> <b> 148: East L'Amoreaux <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"149\" onclick=\"radioClick(this.id);\"> <b> 149: Parkwoods-O'Connor Hills <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"150\" onclick=\"radioClick(this.id);\"> <b> 150: Fenside-Parkwoods <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"151\" onclick=\"radioClick(this.id);\"> <b> 151: Empress (Yonge-Doris) <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"152\" onclick=\"radioClick(this.id);\"> <b> 152: Dunforest-Hollywood (East Willowdale) <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"153\" onclick=\"radioClick(this.id);\"> <b> 153: Avondale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"154\" onclick=\"radioClick(this.id);\"> <b> 154: Oakdale-Beverley Heights <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"155\" onclick=\"radioClick(this.id);\"> <b> 155: Downsview <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"156\" onclick=\"radioClick(this.id);\"> <b> 156: Bendale-Glen Andrew <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"157\" onclick=\"radioClick(this.id);\"> <b> 157: Bendale South <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"158\" onclick=\"radioClick(this.id);\"> <b> 158: Islington <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"159\" onclick=\"radioClick(this.id);\"> <b> 159: Etobicoke City Centre <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"160\" onclick=\"radioClick(this.id);\"> <b> 160: Mimico-Queensway <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"161\" onclick=\"radioClick(this.id);\"> <b> 161: Humber Bay Shores <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"162\" onclick=\"radioClick(this.id);\"> <b> 162: West Queen West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"163\" onclick=\"radioClick(this.id);\"> <b> 163: Fort York-Liberty Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"164\" onclick=\"radioClick(this.id);\"> <b> 164: Wellington Place <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"165\" onclick=\"radioClick(this.id);\"> <b> 165: Harbourfront-CityPlace <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"166\" onclick=\"radioClick(this.id);\"> <b> 166: St Lawrence-East Bayfront-The Islands <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"167\" onclick=\"radioClick(this.id);\"> <b> 167: Church-Wellesley <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"168\" onclick=\"radioClick(this.id);\"> <b> 168: Downtown Yonge East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"169\" onclick=\"radioClick(this.id);\"> <b> 169: Bay-Cloverhill <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"170\" onclick=\"radioClick(this.id);\"> <b> 170: Yonge-Bay Corridor <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"171\" onclick=\"radioClick(this.id);\"> <b> 171: Junction-Wallace Emerson <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"172\" onclick=\"radioClick(this.id);\"> <b> 172: Dovercourt Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"173\" onclick=\"radioClick(this.id);\"> <b> 173: North Toronto <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"174\" onclick=\"radioClick(this.id);\"> <b> 174: South Eglinton-Davisville <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8141\" onclick=\"radioClick(this.id);\"> <b> 8141: Woodbridge South East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8142\" onclick=\"radioClick(this.id);\"> <b> 8142: Woodbridge East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8143\" onclick=\"radioClick(this.id);\"> <b> 8143: South of Maple <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8144\" onclick=\"radioClick(this.id);\"> <b> 8144: Concord-Vaughan <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8145\" onclick=\"radioClick(this.id);\"> <b> 8145: Thornhill South <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8146\" onclick=\"radioClick(this.id);\"> <b> 8146: Thornhill North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8147\" onclick=\"radioClick(this.id);\"> <b> 8147: Markham West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8148\" onclick=\"radioClick(this.id);\"> <b> 8148: Milliken West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8149\" onclick=\"radioClick(this.id);\"> <b> 8149: Markham Hagerman <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8150\" onclick=\"radioClick(this.id);\"> <b> 8150: Milliken East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8151\" onclick=\"radioClick(this.id);\"> <b> 8151: Markham East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8152\" onclick=\"radioClick(this.id);\"> <b> 8152: Markham Central East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8153\" onclick=\"radioClick(this.id);\"> <b> 8153: Cornell <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8154\" onclick=\"radioClick(this.id);\"> <b> 8154: Markham Village <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8155\" onclick=\"radioClick(this.id);\"> <b> 8155: Unionville <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8156\" onclick=\"radioClick(this.id);\"> <b> 8156: Buttonville <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8157\" onclick=\"radioClick(this.id);\"> <b> 8157: Richmond Hill Doncrest <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8158\" onclick=\"radioClick(this.id);\"> <b> 8158: Richmond Hill B <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8159\" onclick=\"radioClick(this.id);\"> <b> 8159: Richmond Hill C <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8160\" onclick=\"radioClick(this.id);\"> <b> 8160: Richmond Hill Richvale <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8161\" onclick=\"radioClick(this.id);\"> <b> 8161: Around Maple <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8162\" onclick=\"radioClick(this.id);\"> <b> 8162: Maple <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8163\" onclick=\"radioClick(this.id);\"> <b> 8163: Maple Teston <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8164\" onclick=\"radioClick(this.id);\"> <b> 8164: Woodbridge North <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8165\" onclick=\"radioClick(this.id);\"> <b> 8165: Kleinburg <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8166\" onclick=\"radioClick(this.id);\"> <b> 8166: Richmond Hill North West <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8167\" onclick=\"radioClick(this.id);\"> <b> 8167: Richmond Hill North East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8168\" onclick=\"radioClick(this.id);\"> <b> 8168: Richmond Hill East <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8160\" onclick=\"radioClick(this.id);\"> <b> 8169: Markham Cathedral <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8170\" onclick=\"radioClick(this.id);\"> <b> 8170: Markham 16th <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8172\" onclick=\"radioClick(this.id);\"> <b> 8172: Ballantrae-Stouffville <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8173\" onclick=\"radioClick(this.id);\"> <b> 8173: The Hill <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8178\" onclick=\"radioClick(this.id);\"> <b> 8178: King City <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8179\" onclick=\"radioClick(this.id);\"> <b> 8179: Nobleton <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"8180\" onclick=\"radioClick(this.id);\"> <b> 8180: Schomberg <\/b><\/div>\n<\/div>\n\n<!-- ------------------------ CARDS --------------------------- -->\n<div style=\"width:79.8%; margin-top: 0%; display: inline-block; vertical-align: top;\">\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-left: 0%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean COPD in % (Female, 35+ Years Old) <\/b><\/p>\n<b><p id=\"card1\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD in % (Female, 35-64 Years Old) <\/b><\/p>\n<b><p id=\"card2\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD in % (Female, 65+ Years Old) <\/b><\/p>\n<b><p id=\"card3\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 0%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Mean COPD in % (Male, 35+ Years Old) <\/b><\/p>\n<b><p id=\"card4\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Mean COPD in % (Male, 35-64 Years Old) <\/b><\/p>\n<b><p id=\"card5\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Mean COPD in % (Male, 65+ Years Old) <\/b><\/p>\n<b><p id=\"card6\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 0%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean COPD in % (35+ Years Old) <\/b><\/p>\n<b><p id=\"card7\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD in % (35-64 Years Old) <\/b><\/p>\n<b><p id=\"card8\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 5%; padding-bottom: 5%; margin-top: 1.1%; margin-left: 1.1%; width: 32.3%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD in % (65+ Years Old) <\/b><\/p>\n<b><p id=\"card9\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<!-- -------------------------- CHARTS ------------------------------- -->\n<div id=\"chart1\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart2\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart3\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart4\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:48.8%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart5\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin-left: 1%; margin-top: 1.1%; margin-bottom: 0%; width:48.8%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart6\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\">\n \n<div id=\"pie1\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right: 0%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie2\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie3\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right:0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie4\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n\n<\/div>\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\">\n \n<div id=\"pie5\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right: 0%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie6\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie7\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right:0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie8\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n\n<\/div>\n\n<div id=\"yearchart1\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"yearchart2\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div> \n\n<div id=\"agechart1\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 457px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div> \n\n<!-- ----------------------------- Cards Again -------------------------------------- -->\n<div style=\"width:100%; margin-top: 1.1%; display: inline-block; vertical-align: top;\">\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 0%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Total COPD (35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card13\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Total COPD (35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card14\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD (35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card15\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD (35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card16\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 0%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Total COPD (Female, 35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card17\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Total COPD (Male, 35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card18\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Total COPD (Female, 35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card19\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2.5%\"><b> Total COPD (Male, 35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card20\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 0%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean COPD (Female, 35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card21\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD (Male, 35+ Years Old, 2016\/17) <\/b><\/p>\n<b><p id=\"card22\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD (Female, 35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card23\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FE8600; color: #FFFFFF; padding-top: 3.3%; padding-bottom: 3.3%; margin-top: 1.1%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 2%\"><b> Mean COPD (Male, 35+ Years Old, 2018\/19) <\/b><\/p>\n<b><p id=\"card24\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<!-- -------------------------- CHARTS AGAIN ------------------------------- -->\n<div id=\"chart7\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart8\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 446px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<!-- ------------- Pie Again -------------------- -->\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\">\n \n<div id=\"pie9\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right: 0%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie10\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-bottom: 0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie11\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; margin-right:0%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n<div id=\"pie12\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; margin: 1%; width: 48.5%; height: 208px; float: left;\"> <\/div>\n\n<\/div>\n\n<!-- -------------------------- CHARTS AGAIN ------------------------------- -->\n<div id=\"chart9\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 457px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<div id=\"chart10\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 0%; margin-top: 1.1%; margin-bottom: 0%; width:99%; height: 457px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n\n\n<\/div>\n\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-1024x210.png\" alt=\"\" class=\"wp-image-1087\" width=\"819\" height=\"168\" srcset=\"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-1024x210.png 1024w, https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-300x62.png 300w, https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5.png 1068w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>COPD in Toronto The data of this work is collected from the Ontario Community Health Profiles Partnership (OCHPP). The dataset is freely available to copy, use, and redistribute for non-profit community-based purposes only, provided that authors are appropriately credited. How to cite Download full dataset (.csv): Chronic Obstructive Pulmonary Disease (COPD) which is most commonly [&hellip;]<\/p>\n","protected":false},"author":1071,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","ngg_post_thumbnail":0,"footnotes":""},"tags":[],"class_list":["post-5089","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"zahrania","author_link":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/author\/zahrania\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/5089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/users\/1071"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/comments?post=5089"}],"version-history":[{"count":40,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/5089\/revisions"}],"predecessor-version":[{"id":5659,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/5089\/revisions\/5659"}],"wp:attachment":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/media?parent=5089"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/tags?post=5089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}