26:null 27:["$","title",null,{"children":"Untitled | gjrichter | Observable"}] 2c:T582,chart = { // the default phyllotaxis arrangement is centered on <0,0> with a distance between nodes of ~10 pixels // we will scale & translate it to fit the canvas const scale = 1.7; const center = [width / 2, height / 2]; const rescale = isNaN(data[0].x); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const node = svg.selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); node.append("circle") .attr("r", d => d.r) .attr("fill", d => d.color) .attr("fill-opacity", "0.3") .attr("stroke", "black") .attr("stroke-width", "0.1") .attr("stroke-opacity", "1"); node.append('text') .attr("dy", ".3em") .attr("dx", -0) .attr("font-family", "arial") .attr("text-anchor", "middle") .text(d => d.name) .attr('color', 'black') .attr('font-size', d => d.r/3) .attr('opacity', 0.5); const tooltip = svg.append("g"); xAxis(svg.append("g")); yAxis(svg.append("g")); svg.on("touchmove mousemove", function(event) { const date = bisect(d3.pointer(event, this)[0]); tooltip .attr("transform", `translate(date.x,date.y)`) .call(callout, `${formatValue(date.name)} $formatValue(date.x)}`); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }2d:T58e,theme1 = { return { "layer": "Com2019_name_upper", // the name of the municipality layer in the loaded SVG map "field": "quota_femminile", "field100": "", "style": { "type": "CHART|SYMBOL|SIMPLELEGEND|VALUES|SHOW", "colorscheme": [ "#0000bb", "#88aaee", "#eeaa88", "red"], "fillopacity": "0.4", "textcolor": "#666666", "shadow": "false", "dbtable": "AMMINISTRATORI_PIVOT", "lookupfield": "denominazione_comune", "showdata": "true", "ranges": ["0","25","40","50","100"], "symbols": ["circle"], "legendunits": "%", "refreshtimeout": "0", "normalsizevalue": "100000", "scale": "1.3", "valuefield": "$title$", "sizefield": "popolazione_censita", "minvalue": "1", "textscale": "3", "linewidth": "1", "bordercolor": "black", "borderwidth": "0.2", "boxopacity": "0.05", "titlefield": "denominazione_comune", "valuescale": "0.9", "valuedecimals": "0", "title": "Amministratori locali in carica al
9 Settembre 2021.", "snippet": "diametro = popolazione
colore = quota femminile", "description": "fonte: Eligendo licenza: IODL v2.0", "description": "" } } };2e:[] 2a:{"id":"19791d09ffffbc8f","slug":"amministratori-2019-genere-eta-e-popolazione-d3-ixmaps/2","title":"","thumbnail":"6ed75037ef5413a75f46c1366dbdfc10cdfbe319d7d9a5ddf539a493d9223ca6","access_level":"public","create_time":"$D2021-10-21T15:47:48.344Z","update_time":"$D2026-07-08T18:20:26.882Z","view_time":null,"first_public_time":"$D2021-10-21T18:38:37.390Z","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":1329,"publish_version":null,"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":0,"collection":{"id":"e26443931225970e","slug":"gender-maps","title":"Gender Maps","owner":{"id":"ab0359f3bbecf78a","login":"gjrichter","name":""}},"type":"notebook","body":{"title":"","cells":[{"id":1327,"value":"⚠️ This notebook uses the legacy iXMaps theme syntax (2021). Current documentation and declarative grammar: https://www.ixmaps.com/docs/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"# Amministratori 2019 - genere, età e popolazione - D3/iXMaps\nA visualisation of the gender equity of elected administrators in italia municipality councils by two related grafics realized with D3 and iXMaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"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":561,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"graphic 1: mean age vs gender equity of the municipality councils (D3) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"ixmaps.embed(\n \"mymap\",\n {\n mapCdn: \"https://gjrichter.github.io/ixmaps\",\n width: \"90%\",\n height: \"720px\",\n scrollsafe: \"true\",\n legend: \"true\",\n name: \"map\"\n },\n (map) =>\n map\n .setData(comuni, { type: \"geojson\", name: \"COMUNI\" })\n .setData(final2, { type: \"jsonDB\", name: \"AMMINISTRATORI_PIVOT\" })\n .view([42.282221877329024, 12.871337890625002], 8)\n .options({\n objectscaling: \"dynamic\",\n normalSizeScale: \"1000000\",\n panhidden: \"false\",\n flushChartDraw: \"100000\",\n basemapopacity: \"0.5\"\n })\n .layer(georef)\n .layer(theme1)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"graphic 2: gender equity of the municipality councils (iXMaps) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"---\n## What is it\n\nThe above graphics show the **median age** and the **gender equity** in the local government of all italian municipalities, one region at a time.\n\nIt is realised with D3 (plot) and the iXMaps framework\n\nThe first grafic is a D3 XY plot which maps the **gender equity** and **mean age** of the elected amministrators of the municipalities of one italian region.\n- the **x-axis** of the plot shows the median age of the elected amministrators\n- the **y-axis** the percentage of female amministrators\n\nthe **color** devides the last parameter into 4 classes: less than 25%, between 25 and 40%, between 40 and 50% and more than 50%.\nThe size of the bubble shows the population of the city. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"The **data** used is published by the **Interior Ministry of Italy** as **Open Data**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"$${note(`\nyou can select the region with the selection box on top\nboth graphics will adapt\n`)} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"---\n## How it is done","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"- Both grafic elements have the main realisation code below.\n\n- The D3 plot depends also on the following code snippets.\n\n- The data loading and preprocessing is dont in an own section bolow\n\n- The iXMaps themes, which define the way, the data is visualized on the map, follow below.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"--- \n## D3 helper\n\nDefinition of functions, variables and data arrays needed to create the d3 plot ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"x = d3.scaleLinear()\n .domain([35,75])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"y = d3.scaleLinear()\n .domain([0,70]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 8)\n .attr(\"y\", 20)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(\" età media\"))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\" % quota femminile\"))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"function formatValue(value) {\n return value.toLocaleString(\"en\", {\n style: \"currency\",\n currency: \"USD\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n console.log(b && (date - a.date > b.date - date) ? b : a);\n console.log(\"ok\");\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"n = etaA.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"etaA = final2.column(\"eta_media\").values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"quotaA = final2.column(\"quota_femminile\").values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"popolazioneA = final2.column(\"popolazione_censita\").values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"denominazioneA = final2.column(\"denominazione_comune\").values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"data = Array.from({length: n}, (_, i) => ({\n r: Math.sqrt(popolazioneA[i])/15,\n color: (quotaA[i] < 25) ? \"#0000bb\":((quotaA[i] < 40)? \"#88aaee\": ((quotaA[i] > 50)? \"red\":\"#eeaa88\")),\n name: denominazioneA[i],\n x:etaA[i]*30-35*30,\n y:(70-quotaA[i])*8\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"---\n# the map themes\nIn iXMaps the representation of data on a map is defined by themes. A visualization project can have one or more themes. In the following we define the themes for the above map:\n- the first theme defines the positions of the municipalities; it is invisible\n- the second defines the representation of the data \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"comuni = d3.json(\"https://gjrichter.github.io/viz/Amministratori//comuni_2019_U.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"georef = {\n return \t{\n\t\t\t\"layer\": \"Com2019_name_upper\",\n\t\t\t\"field\": \"$item$\",\n\t\t\t\"field100\": \"\",\n\t\t\t\"style\": {\n\t\t\t\t\"type\": \"FEATURES|NOLEGEND|LOCKED\",\n\t\t\t\t\"colorscheme\": [\n\t\t\t\t\t\"none\"],\n\t\t\t\t\"scale\":\"0\",\n\t\t\t\t\"dbtable\": \"COMUNI\",\n\t\t\t\t\"itemfield\": \"COMUNE_U\",\n\t\t\t\t\"lookupfield\": \"geometry\",\n\t\t\t\t\"title\": \"Italy Comuni 2019\"\n\t\t\t\t}\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"#
data
\n\nThe data 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> 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":48,"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":50,"value":"Inputs.Table(amministratori)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"The data contains more than 120 000 rows, one row for every amministrator.\nFor the visualization of the gender equality we create a pivot table which sums the number of male and female amministrators for very municipality.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## processing the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"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":300,"value":"ammcom = Data.import({\"source\":amministratori,\"type\":\"json\"\n })\n .addColumn(\n {source:\"data_nascita\",destination:\"eta\"},\n function(value){\n var dA = value.split('/'); \n return ((new Date().getTime() - new Date(dA[2]+\"/\"+dA[1]+\"/\"+dA[0]).getTime())/(1000*60*60*24*356)).toFixed(0);\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"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":304,"value":"temp1 = ammcom.pivot({\n \"lead\":\"denominazione_comune\",\n \"columns\": \"sesso\",\n \"keep\": [\"codice_regione\",\"codice_provincia\",\"popolazione_censita\"]\n })\n .addColumn({\n \"destination\": \"quota_femminile\"},\n function(row){\n return (row[5]/row[7]*100);\n });\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"> The column 'quota', with the number of female members (F) in % of Total, is added by a function defined below ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"Inputs.Table(temp1.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"
\nThe second pivot table aggregates the age of the elected amministrators for every municipality calculating the mean age. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"temp2 = ammcom.aggregate({\n \"lead\":\"denominazione_comune\",\n \"column\":\"eta\",\n \"calc\":\"mean\"\n\t}); \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":" temp2.column(\"eta\").rename(\"eta_media\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"Inputs.Table(temp2.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"
\nFor the visualizzation we need one **data table** with ** *age* and *quote* ** so we **merge** both pivot tables into one final table.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"merger = new Data.Merger();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":" final = merger\n .addSource(temp1, {\n lookup: \"denominazione_comune\",\n columns: [\"denominazione_comune\",\"popolazione_censita\",\"codice_regione\",\"quota_femminile\"],\n label: [\"denominazione_comune\",\"popolazione_censita\",\"codice_regione\",\"quota_femminile\"]\n })\n .addSource(temp2, {\n lookup: \"denominazione_comune\",\n columns: [\"eta_media\"],\n label: [\"eta_media\"]\n })\n .realize();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"Inputs.Table(final.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"final2 = final.select(\"WHERE codice_regione = \" + filter.codice)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"**This is the final data table for the visualization**. \n\n> *note:* the appendixes .1 qnd .2 which show the source of the columns of the final table.\n\nThe data created here will be loaded into the iXMaps application later with the name: 'AMMINISTRATORI_PIVOT'","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"That's it for the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"### libraries and APIs used in this project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"Data = require('https://gjrichter.github.io/data.js/data.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$$ = require('https://code.jquery.com/jquery-3.3.1.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"### helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"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"},{"id":1162,"value":"regioni = [\n\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 {name: \"tutte\", codice: \"*\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2b:"$2a:body"