2e:null 2f:["$","title",null,{"children":"Amministratori 2019 - genere, età e popolazione - Vega-Lite - II | gjrichter | Observable"}] 34:[] 32:{"id":"91d2eeb44d402854","slug":"amministratori-2019-genere-eta-e-popolazione-vega-lite-ii","title":"Amministratori 2019 - genere, età e popolazione - Vega-Lite - II","thumbnail":"d7c475bc781851ced3e07d1bd06021ea66c1e482c130653f6fab92c25e6f1162","access_level":"public","create_time":"$D2021-10-21T20:08:46.566Z","update_time":"$D2021-10-27T20:44:08.704Z","view_time":null,"first_public_time":"$D2021-10-21T20:32:41.488Z","has_unpublished_edits":null,"fork":{"id":"e0f8e949089d85dd","slug":"amministratori-2019-genere-eta-e-popolazione-vega-lite","title":"Amministratori 2019 - genere, età e popolazione - Vega-Lite","owner":{"id":"ab0359f3bbecf78a","login":"gjrichter","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"ab0359f3bbecf78a","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":"starter_2024"},"version":1166,"publish_version":1166,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e26443931225970e","slug":"gender-maps","title":"Gender Maps","owner":{"id":"ab0359f3bbecf78a","login":"gjrichter","name":""}},"type":"notebook","body":{"title":"Amministratori 2019 - genere, età e popolazione - Vega-Lite - II","cells":[{"id":0,"value":"# Amministratori 2019 - genere, età e popolazione - Vega-Lite - II\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`And now to make our first chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof filter = Inputs.Select(regioni, {label: \"Regione\", format: x => x.name, value: t => t.codice})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const brush = vl.selectInterval().encodings('x');\nreturn vl.markCircle({filled: true}) // Make a scatter chart\n .data(final2.json())\n // Using the cars data (below)\n .encode(\n vl.size().fieldQ('popolazione_censita').scale({domain: [-1, 1000000], range: [1, 5000]}).title('Popolation'),\n vl.x().fieldQ(\"eta_media\").scale({domain:[40,60]}), // For x, use the Horsepower field\n vl.y().fieldQ(\"quota_femminile\").scale({domain:[0,70]}), // For y, use the Miles_per_Gallon field\n vl.tooltip().fieldN(\"denominazione_comune\"), // For tooltips, show the Name field\n vl.color().fieldQ('quota_femminile').scale({domain:[25,40,50,100],range:[\"#0000bb\",\"#88aaee\",\"#eeaa88\",\"red\"]}),\n vl.opacity().value(0.6) \n )\n .width(width-300)\n .height(800)\n .select(brush)\n .render() // Draw the chart\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"d3V4= require(\"d3@v4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"schemeCategory20 = d3V4.schemeCategory20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"custom_scale_alternative_solution = {\n const sorted_activity_list = Array.from(new Set(final2.json().map(a => a.nome_regione))).sort()\n // Background: https://stackoverflow.com/questions/58933759/vega-lite-set-color-from-data-whilst-retaining-a-legend\n // and https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20 \n // See discussion on limitations of category20 scheme: https://github.com/d3/d3/releases/tag/v5.0.0\n // You can now use any category from here: \n // https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical\n // For compatability with your example, using d3V4.schemeCategory20 to assign unique colors for all 39 activities.\n // Ordinal scales: https://vega.github.io/vega-lite/docs/scale.html#ordinal\n const colorRange = sorted_activity_list.map(d3V4.scaleOrdinal(schemeCategory20));\n\n return {\n domain: sorted_activity_list,\n range: colorRange\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## What is it\n\nThe above map shows the **gender equity** in local government and the **population** for all italian municipalities. It is realised with Vega-Lite\n\nThe grafic is a XY plot which maps the **gender equity** and **mean age** of the elected amministrators of the municipalities of one italian region.. The **x-axis** of the plot shows the median age of the elected amministrators, the **y-axis** the percentage of female amministrators, the **color** shows the Region of the municipality. The size of the bubble grows with the population of the city. \n\n\n\n- You can select the region with the selection box on top.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"---\n## The data\n\nThe data used for the plot is published by the italian Ministero dell'Interno on a dedicated **page** in CSV and contains all administrator of all municipalities actually in charge.\n\n- Only to overcome cross domain limits and the size of the CSV file, we use a zipped version of the data hosted in an S3 bucket. \n\nHere is the raw data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"amministratori = d3.csv(\"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Amministrazioni/ammcom.csv.gz\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"Inputs.Table(amministratori)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"---\n## processing the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"We want to plot the **gender equality** versus the **mean age** of the elected amministrators of the municipalities of the italian regions. So first we have to do some data processing to get the data columns to plot.\n\nTo process the loaded data we import() the table into a ***Data*** *object* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"ammcom = Data.import({\"source\":amministratori,\"type\":\"json\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"and create the first pivot table with one row for every municipality and coluns with the sum of male or female amministrators. The option 'keep' gives us the possibility to maintain usefull coluns from the original table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"\t\t\ttemp1 = ammcom.pivot({\n\t\t\t\t\"lead\":\"denominazione_comune\",\n\t\t\t\t\"columns\": \"sesso\",\n\t\t\t\t\"keep\": [\"codice_regione\",\"codice_provincia\",\"popolazione_censita\"]\n\t\t\t}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"Inputs.Table(temp1.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"$${note(`\nThe column **'quota'** is added by a function below\nIt contains the calcutated % of female members (F) in % of Total\n`)} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"In a second temporary table we calculate the average age of the elected amministrators for every municipality by aggregationg the data by the municipality names and calculating the mean value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"\t\t\ttemp2 = ammcom.aggregate({\n\t\t\t\t\"lead\":\"denominazione_comune\",\n\t\t\t\t\"column\":\"eta\",\n\t\t\t\t\"calc\":\"mean\"\n\t\t\t}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"Inputs.Table(temp2.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"---\n## merge the final table\nFor the visualizzation we need **one data table** with ** *age* and *quote* ** so we **merge** both intermediate tables into one final table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"merger = new Data.Merger();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":" final = merger\n .addSource(temp1, {\n lookup: \"denominazione_comune\",\n columns: [\"denominazione_comune\",\"popolazione_censita\",\"codice_regione\",\"quota\"],\n label: [\"denominazione_comune\",\"popolazione_censita\",\"codice_regione\",\"quota_femminile\"]\n })\n .addSource(temp2, {\n lookup: \"denominazione_comune\",\n columns: [\"eta\"],\n label: [\"eta_media\"]\n })\n .realize();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"final.addColumn({source:\"codice_regione\",destination:\"nome_regione\"},function(value){return regioni[value].name});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"From this table we create the final data table by selecting a Region and clipping the x/y data (age and quote) to a reasonable range","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"---\n## filter the data\nFor the visualizzation we need one **data table** with ** *age* and *quote* ** so we **merge** both pivot tables into one final table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"$${note(`\nThe filter is driven by the valiable: filter.codice\nfilter.codice can be changed witrh an selection box obove the plot\n`)} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"final2 = final.select(\"WHERE codice_regione = \"+filter.codice+\" AND \\\"eta_media\\\" BETWEEN 40 AND 60 AND \\\"quota_femminile\\\" BETWEEN 0 AND 70\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"---\nThis is the final input for plot of the mean age of administrators and the female quote for the italian municipalities. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"Inputs.Table(final2.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"import { Table } from \"@observablehq/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"---\n## silent worker\nThese objects are code snippets which get executed when the data objects (ammcom, temp1) are created\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"{\n var iNat = ammcom.column(\"data_nascita\").index;\n ammcom.addColumn({destination:\"eta\"},function(row){\n\t\t\t\tvar dA = row[iNat].split('/'); \n\t\t\t\treturn ((new Date().getTime() - new Date(dA[2]+\"/\"+dA[1]+\"/\"+dA[0]).getTime())/(1000*60*60*24*356)).toFixed(0);\n\t\t\t});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"{\n var iTotal = temp1.column(\"Total\").index;\n\t\t\tvar iF = temp1.column(\"F\").index;\n\t\t\ttemp1.addColumn({\n\t\t\t\t\"destination\": \"quota\"},\n\t\t\t\tfunction(row){\n\t\t\t\t\treturn (row[iF]/row[iTotal]*100);\n\t\t\t});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"libraries and APIs used in this project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"vl = {\n const [vega, vegalite, api, tooltip] = await Promise.all([\n 'vega@5.19.1',\n 'vega-lite@4.17.0',\n 'vega-lite-api@4.0.0',\n 'vega-tooltip@0.25.1'\n ].map(module => require(module)));\n\n const options = {\n config: {\n // vega-lite default configuration\n config: {\n view: {continuousWidth: 400, continuousHeight: 300},\n mark: {tooltip: null}\n }\n },\n init: view => {\n // initialize tooltip handler\n view.tooltip(new tooltip.Handler().call);\n // enable horizontal scrolling for large plots\n if (view.container()) view.container().style['overflow-x'] = 'auto';\n },\n view: {\n // view constructor options\n loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets@2/'}),\n renderer: 'canvas'\n }\n };\n \n return api.register(vega, vegalite, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"Data = require('https://gjrichter.github.io/data.js/data.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"regioni = [\n {name: \"Tutte le Regioni\", codice: \"*\"},\n {name: \"Piemonte\", codice: \"1\"},\n {name: \"Valle d'Aosta\", codice: \"2\"},\n {name: \"Lombardia\", codice: \"3\"},\n {name: \"Trentino A.A.\", codice: \"4\"},\n {name: \"Veneto\", codice: \"5\"},\n {name: \"Friuli V.G.\", codice: \"6\"},\n {name: \"Liguria\", codice: \"7\"},\n {name: \"Emilia Romagna\", codice: \"8\"},\n {name: \"Toscana\", codice: \"9\"},\n {name: \"Umbria\", codice: \"10\"},\n {name: \"Marche\", codice: \"11\"},\n {name: \"Lazio\", codice: \"12\"},\n {name: \"Abruzzi\", codice: \"13\"},\n {name: \"Molise\", codice: \"14\"},\n {name: \"Campania\", codice: \"15\"},\n {name: \"Puglie\", codice: \"16\"},\n {name: \"Basilicata\", codice: \"17\"},\n {name: \"Calabria\", codice: \"18\"},\n {name: \"Sicilia\", codice: \"19\"},\n {name: \"Sardegna\", codice: \"20\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"function tryIt(text) {\n const list = text.split(\"\\n\").filter(s => s).map(s => `

– ${s}`);\n return md`\n

\n**Try it yourself:**\n
\n${list.join(\"\")}\n
\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"function note(text) {\n const list = text.split(\"\\n\").filter(s => s).map(s => `

– ${s}`);\n return md`\n

\n**note:**\n
\n${list.join(\"\")}\n
\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"