{"id":257,"date":"2013-08-26T09:05:10","date_gmt":"2013-08-26T08:05:10","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/?p=257"},"modified":"2013-08-29T10:20:40","modified_gmt":"2013-08-29T09:20:40","slug":"257","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/2013\/08\/26\/257\/","title":{"rendered":"Infrastructure dashboard prototype: Economics and Demographics Data Dashboards"},"content":{"rendered":"<p>In an attempt to begin to think about how some of the data being generated by colleagues within the Infrastructure Transitions Research Consortium (ITRC) could be visualised, I started by considering how to visualise the <em>seed<\/em> projections that are used as inputs to the infrastructure capacity and demand models (CDAM) that have\/are currently being developed by different institutes within the consortium. To find out more information about this aspect of the consortium please follow this <a href=\"http:\/\/www.itrc.org.uk\/our-work\/balancing-infrasctructure-capacity-and-demand\/\">link<\/a>. The demographics projections have been developed by Leeds University, and give indications as to the number of people living in each government office region and local area district within the UK, out to the year 2100. Alongside this standard variable, projections for the quantity of urban area and number of households are also calculated and provided, although at this stage they are not being fed in to the CDAMs. The economics projections, developed by Cambridge Econometrics, contain many variables with reference to employment levels, imports\/exports, gross value added (GVA) by industry, energy use by different fuel users, and many others. Each of these variables is supplied along a similar timescale to the demographics projections, whilst some are also disaggregated from UK-wide values to the government office region level. The following variables from the economics projections are supplied with this spatial disaggregation:<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GVA by region and industry<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Household expenditure by consumption category and region<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Investment by investing sector and region<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Employment by industry and region<\/p>\n<p>The two data sets themselves are supplied in either comma-separated value (.csv) format, or via the use of the netCDF (.nc \/ .cdl) formats. In order to store these data, and then subsequently query them, the data is loaded via a Django-powered web form in to a PostGIS-enabled PostgreSQL relational database. The web form uploading process attempts to validate the values supplied within each of the projection sets against sensible ranges of values for each variable such that any erroneous data values can be detected. This approach ensures that the data is stored alongside other data related to the consortium, such as the infrastructure network models, and subsequently makes it <em>quite <\/em>(!) straightforward to create a web-based visualisation dashboard \/ platform for the data. The chosen web framework, Django, is Python-based and natively allows connections to PostgreSQL\/PostGIS-enabled databases.<\/p>\n<p>Both sets of projections, demographics and economics, are similar in nature in that they have a mix of UK-wide outputs over time, as well as a mix of spatially disaggregated outputs. I therefore chose to include the ability to view both a map, as well as charts and plots to give a user access to as much of the information as possible, without overloading them, within a single web page. In order to achieve this, a series of Django-enabled, and just standard SQL queries were developed to deliver data from either of the projections sets as JSON to the webpage. The webpages themselves (one each for demographics and economics respectively) communicate to Django via a synchronous AJAX request, which is all handled and powered via the use of the JavaScript framework, jQuery. Each webpage offers the user a series of <em>dimensions<\/em> or options that they can choose from, resulting in a new request being sent to the server to retrieve data matching against the chosen criteria. The following table represents the options available to a user for the two different interfaces:<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Demographics Dashboard<\/strong><\/td>\n<td valign=\"top\" width=\"356\"><strong>Economics Dashboard<\/strong><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Data:<\/strong>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Demographic projections<\/strong> \u2013 number of people in each government office region, or local area district<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Proportion of urban area projection<\/strong> \u2013 the percentage of each government office region, or local area district considered as urban<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Change in the proportion of urban area projection<\/strong> \u2013 the change in the percentage of each government office region, or local area district considered as urban.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Household projections<\/strong> \u2013 the number of households in each local area district<\/p>\n<p>&nbsp;<\/td>\n<td valign=\"top\" width=\"356\"><strong>Data:<\/strong>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Economics projections<\/strong> \u2013 a set of different economic-focussed variables in relation to employment, consumption, energy use and much more<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Scenario<\/strong> \u2013 a user can select from a drop down list of scenarios that have been uploaded to the database. Each set of demographic data represents a different scenario of demographic change, and each value within the database references which scenario to which it is related. The different scenarios are generated by using different values for the attractors and detractors that make a region or district more or less attractive to reside in.<\/td>\n<td valign=\"top\" width=\"356\"><strong>Scenario<\/strong>\u2013 a user can select from a drop down list of scenarios that have been uploaded to the database. Each set of economics data represents a different scenario of economic change, and each value is referenced against a particular scenario. In the case of the economics projections, each scenario represents a different combination of inputs for:-\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Population-\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 World Economic Growth<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Fossil Fuel Price<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Time<\/strong> \u2013 a drop down list of available years of data<\/td>\n<td valign=\"top\" width=\"356\"><strong>Time<\/strong> \u2013 a drop down list of available years of data<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Location<\/strong> \u2013 depending on the user\u2019s selection of scenario, a drop down list of government office regions or local area districts is presented. The selection of a particular location is also possible via direct interaction with the map interface itself.<\/td>\n<td valign=\"top\" width=\"356\"><strong>Location<\/strong> \u2013 as previously described, only a subset of all economics variables are disaggregated to the government office region level, and these regions are presented via a drop down list. Similarly to the demographics data dashboard, a location of interest can be selected by interaction with the map interface itself, as well as via the drop down list.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" valign=\"top\" width=\"712\"><strong>Number of equal-interval map classes<\/strong> \u2013 this option allows a user to determine the number of equal-interval classes to use when mapping the data satisfying the matched criteria defined by the user.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" valign=\"top\" width=\"712\"><strong>Adjust overlay transparency<\/strong> \u2013 this slider allows a user to increase or decrease the transparency of the overlay map displaying the projections to allow them to more easily see the underlying base map layers provided. This for example can be used to help the user orientate themselves on a particular area of the UK, before seeing the overlay of chosen demographics or economics values.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Gender<\/strong> \u2013 when selecting the standard demographics output i.e. the number of people in each region or district, this option determines whether the displayed map is showing projections for males, females, or both i.e. the total population.<\/td>\n<td valign=\"top\" width=\"356\"><strong>Variable<\/strong>\u2013 the user is able to select from a drop down list of 18 possible variables to retrieve maps and charts about. The particular choice of variable determines which combination of the following options can subsequently be selected:-\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sector<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 regional industry<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fuel user<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fuel type<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 consumption category<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UK-wide investment sector<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Regional investment sector<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UK macro economic indicator<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 region<\/p>\n<p>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Age category<\/strong> \u2013 similarly to the gender option, when selecting the standard demographics output, this option determines which age category is being mapped. Each category represents a 5 year cross-section of the population, ranging from 0 to 90+.<\/td>\n<td rowspan=\"2\" valign=\"top\" width=\"356\"><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"356\"><strong>Normalisation<\/strong> \u2013 this option allows a user to tell the displayed map to create equal-interval classification bounds based on other values that also satisfy the user\u2019s selected criteria. For example a user could wish to normalise based on values for males\/females for a particular region or against the whole of the UK.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>As a user is changing the combination of the afore-mentioned options selected, whether for the economics or demographics data projections, a new request is sent to the server to query the database. Once the JSON data matching the selected criteria is returned to the webpage, JavaScript alongside the use of the <a href=\"http:\/\/www.highcharts.com\/\">HighCharts<\/a> JavaScript-based graph library are employed to create the charts and graphs of the time series data. I selected HighCharts as it offers some fantastic, out-of-the-box functionality such as the slick animations activated when new data is supplied, or the hover-over tooltips to return actual data values. HighCharts however is a paid-for product, but has been used here as the work falls under the academic\/research use. Furthermore, it is pretty straightforward to coerce the JSON output from the database in to something that HighCharts can handle. The maps themselves are created via the use of the <a href=\"http:\/\/openlayers.org\/\">OpenLayers<\/a> JavaScript mapping client, largely employing the client-based vector layers and features for the rendering, rather than employing a WMS to serve the data. However it is possible that in the future a WMS version of the data streams will also be needed, probably employing <a href=\"http:\/\/geoserver.org\/display\/GEOS\/Welcome\">Geoserver<\/a> to do the leg work for this.<\/p>\n<p>The following images illustrate the demographics and economics dashboards in their current form:<\/p>\n<figure id=\"attachment_258\" aria-describedby=\"caption-attachment-258\" style=\"width: 568px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-258\" src=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash1.png\" alt=\"Demographics Data Dashboard\" width=\"568\" height=\"405\" srcset=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash1.png 568w, https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash1-300x213.png 300w\" sizes=\"auto, (max-width: 568px) 85vw, 568px\" \/><\/a><figcaption id=\"caption-attachment-258\" class=\"wp-caption-text\">Demographics Data Dashboard<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_259\" aria-describedby=\"caption-attachment-259\" style=\"width: 566px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-259\" src=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash2.png\" alt=\"Economics Data Dashboard (household consumption)\" width=\"566\" height=\"326\" srcset=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash2.png 566w, https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash2-300x172.png 300w\" sizes=\"auto, (max-width: 566px) 85vw, 566px\" \/><\/a><figcaption id=\"caption-attachment-259\" class=\"wp-caption-text\">Economics Data Dashboard (household consumption)<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_260\" aria-describedby=\"caption-attachment-260\" style=\"width: 551px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-260\" src=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash3.png\" alt=\"Economics Data Dashboard (energy demand by fuel user and type)\" width=\"551\" height=\"325\" srcset=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash3.png 551w, https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash3-300x176.png 300w\" sizes=\"auto, (max-width: 551px) 85vw, 551px\" \/><\/a><figcaption id=\"caption-attachment-260\" class=\"wp-caption-text\">Economics Data Dashboard (energy demand by fuel user and type)<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_261\" aria-describedby=\"caption-attachment-261\" style=\"width: 549px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-261\" src=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash4.png\" alt=\"Economics Data Dashboard (employment by industry and region)\" width=\"549\" height=\"320\" srcset=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash4.png 549w, https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/files\/2013\/08\/dash4-300x174.png 300w\" sizes=\"auto, (max-width: 549px) 85vw, 549px\" \/><\/a><figcaption id=\"caption-attachment-261\" class=\"wp-caption-text\">Economics Data Dashboard (employment by industry and region)<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><em><strong>Please note that all the values displayed in the charts, plots and maps within the previous four images of the different dashboards are indicative only.<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In an attempt to begin to think about how some of the data being generated by colleagues within the Infrastructure Transitions Research Consortium (ITRC) could be visualised, I started by considering how to visualise the seed projections that are used as inputs to the infrastructure capacity and demand models (CDAM) that have\/are currently being developed &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/2013\/08\/26\/257\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Infrastructure dashboard prototype: Economics and Demographics Data Dashboards&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4970,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-257","post","type-post","status-publish","format-standard","hentry","category-research"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/users\/4970"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":4,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/posts\/257\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/posts\/257\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/media?parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/categories?post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/geospatialengineering\/wp-json\/wp\/v2\/tags?post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}