2d:null 2e:["$","title",null,{"children":"iXMaps - UKR-2022 | gjrichter | Observable"}] 33:[] 31:{"id":"a19600daff416b92","slug":"ixmaps-ukr-2022","title":"iXMaps - UKR-2022","thumbnail":"997c9b02d91dd48d44a3d6eb795e4494fdcb33c61c34e91def068efa777687ea","access_level":"public","create_time":"$D2022-05-21T08:02:35.243Z","update_time":"$D2022-10-10T09:12:32.447Z","view_time":null,"first_public_time":"$D2022-05-21T08:26:03.425Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ab0359f3bbecf78a","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":"starter_2024"},"version":707,"publish_version":707,"role":null,"authored":false,"authors":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null}],"members":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"iXMaps - UKR-2022","cells":[{"id":0,"value":"# iXMaps - UKR-2022 \n## temporary protection / expressed hospitality by region/province","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof level = Inputs.radio(new Map([[\"Region\", 2], [\"Province\", 3]]), {label: \"Select level\", value: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"map = ixmaps.embed(\"map\", { \n mapCdn: \"https://gjrichter.github.io/ixmaps\",\n\tmaptype: \"white\",\n width: \"80%\",\n height: \"800px\",\n scrollsafesilent: \"true\",\n legend: 1,\n mode: \"pan\"\n },\n map => map\n .view([41.82824901518532,15.040283203125002],6)\n .attribution(\"data: Dipartimento della Protezione Civile, licenza: CC-BY-4.0\")\n .legend(\"

Temporary protection (F/M) granted vs places offered in diffused hospitality

\") \n .options({\n scrollSafeSilent: \"true\",\n objectscaling: \"dynamic\",\n normalsizescale: \"10000000\",\n panhidden: \"false\" \n })\n .layer(georef)\n .layer(chart__persons_per_gender)\n .layer(chart__places) \n ); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"This interactive mapè combines 2 datasets of the 'Ukraine 2022 Emergency Data' released by the 'Dipartimento della Protezione Civile' relativo alla accoglienza dei profughi dalla Ukraina.\n\n- the pie charts show the number residence permits for temporary protection granted \n- the white circle show the number of placed offered by expressions of interest to provide diffused hospitality ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"toc(\"h2, h3, h4\") // alternatively toc(\"h1, h2, h3, h4\") if you wanted to include the title heading","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Visualizzation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"The interactive map is realized by iXMaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"### define the map\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"To define the map, we use the iXMaps API to create an application with several layer based on geodata provide by [EUROSTAT](https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units/nuts) (topojson) and raw data provided by the 'Dipartimento della Protezione Civile' on [GitHub](https://github.com/pcm-dpc/UKR-2022).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"### define the layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"The first layer defines the **geografic contest** to locate the charts. We load a TopoJson stream from EUROSTAT and create a FEATURE layer to show the bounderies of the Regions or Provinces of Italy.\n\nThe name used in the definition: _ixmaps.layer(\"Nuts3\")_ is important and must be used by the chart definitions. All 3 layer use the same name 'Nuts3'","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"georef = \n ixmaps.layer(\"Nuts_3\")\n .data({\n url: \"https://gisco-services.ec.europa.eu/distribution/v2/nuts/topojson/NUTS_RG_03M_2021_4326.json\",\n type: \"topojson\"\n })\n .binding({\n\t\t\t\tid: \"NUTS_ID\",\n position: \"geometry\"\n })\n .filter(\"WHERE LEVL_CODE = \"+level)\n .type(\"FEATURES\")\n .style({\n colorscheme: [\"#e0e0e0\"],\n linecolor: \"#ffffff\",\n linewidth: \"1\",\n \t\t\t\ttitle: \"[title]\"\n })\n .define()\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"There is a filter on the topologies of the TopoJson file to select either the region or the province bounderies.\n\nWith _.binding({id: \"NUTSID\",...})_ we define the property to use as id for the administrative boundary shapes so we can refer these ids later in the chart layer.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":557,"value":"---\nThe **first chart** is a PIE chart to visualize the number of residence permits for temporary protection separately for female and male\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"chart__persons_per_gender = \n ixmaps.layer(\"Nuts_3\")\n .data({\n url: \"https://raw.githubusercontent.com/pcm-dpc/UKR-2022/master/data/temporary-protection/dpc-ukr-2022--temporary-protection.csv\",\n type: \"csv\"\n })\n .binding({\n\t\t\t\tvalue: \"gender\",\n position: \"temporary_protection_release_nuts_\"+level\n })\n .type(\"CHART|PIE|SIZE|CATEGORICAL|AGGREGATE|RECT|SUM|VALUES|BOX|TITLE\")\n .style({\n colorscheme: [\"#F7CE00\",\"#0097B7\"],\n values: [\"F\",\"M\"],\n label: [\"Femmine\",\"Maschi\"],\n fillopacity: \"0.9\",\n linewidth: \"0.3\",\n\t\t\t\tsizefield: \"people\",\n normalsizevalue: \"3000\",\n valueupper: \"1:5000000\",\n titlefield: (level==2?\"temporary_protection_release_region\":\"temporary_protection_release_province\"),\n boxopacity: \"0\", bordercolor: \"none\",\n aggregationfield: \"temporary_protection_release_nuts_\"+level,\n\t\t\t\ttitle: \"UKR-2022 temporary protections released\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"with `.binding({position: \"temporary_protection_release_nuts_\"+level})` we define the charts positions by the nuts codes data column in reference to the id's useed within the admininstrative boundary layer (1.layer) definition (see above).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"---\nThe **second chart** shows the number of places offered by the expressions of interest to provide diffused hospitality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"chart__places = \n ixmaps.layer(\"Nuts_3\")\n .data({\n url: \"https://raw.githubusercontent.com/pcm-dpc/UKR-2022/master/data/expression-interest-diffused-hospitality/dpc-ukr-2022--expression-interest-diffused-hospitality-results.csv\",\n type: \"csv\"\n })\n .binding({\n\t\t\t\tvalue: \"$item$\",\n position: \"nuts_\"+level\n })\n .type(\"CHART|SYMBOL|AGGREGATE|SUM|VALUES\")\n .style({\n colorscheme: [\"#f0f0f0\"],\n fillopacity: \"0.6\",\n linecolor: \"white\",\n linewidth: \"5\",\n normalsizevalue: \"3000\",\n\t\t\t\tsizefield: \"places\",\n\t\t\t\tvaluefield: \"places\",\n aggregationfield: \"nuts_\"+level,\n valueupper: \"1:5000000\",\n textcolor: \"black\",\n valuedecimals: \"0\",\n units: \"places\",\n \t\t\t\ttitlefield: \"province\",\n\t\t\t\ttitle: \"UKR-2022 expression interest diffused hospitality\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"### data\n\nonly for demostration purpose we load and show the data here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"data = d3.csv(\"https://raw.githubusercontent.com/pcm-dpc/UKR-2022/master/data/temporary-protection/dpc-ukr-2022--temporary-protection.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"data_view = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"### imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"Inputs = require(\"@observablehq/inputs\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"