2c:null 2d:["$","title",null,{"children":"Indici per quartiere (NIL) della città di Milano | giuliavascia | Observable"}] 32:T80b,viewof indici = { const fermateW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Fermate", }); const criminiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sicurezza" }); const eventiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Offerta ricreativa" }); const turismoW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Turismo" }); const benessereW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Benessere" }); const vita_notturnaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Vita notturna" }); const sostenibilitaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sostenibilità ambientale" }); const totale = select({ title: "Seleziona un indice", options: indexList, value: 'vivibilita' }); const form1 = html``; form1.oninput = () => (form1.value = { fermateW: fermateW[0].valueAsNumber, criminiW: criminiW[0].valueAsNumber, eventiW: eventiW[0].valueAsNumber, turismoW: turismoW[0].valueAsNumber, benessereW: benessereW[0].valueAsNumber, vita_notturnaW: vita_notturnaW[0].valueAsNumber, sostenibilitaW: sostenibilitaW[0].valueAsNumber, index: totale.value }); form1.oninput(); form1.oninput(); const form2 = html``; form2.oninput = () => (form2.value = { fermateW: 1, criminiW: 1, eventiW: 1, turismoW: 1, benessereW: 1, vita_notturnaW: 1, sostenibilitaW: 1, index: SelIndici.index }); form2.oninput(); form2.oninput(); if (SelIndici.index == "vivibilita"){ return form1;} else return form2; }33:T96a,map = { //const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geoms); const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.5, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); console.log('cIndex', cIndex); // Scale di colore // differenza tra le scale: https://observablehq.com/@d3/quantile-quantize-and-threshold-scales const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndex.map(d => d[indici.index]))]) // min max dell'indice da visualizzare .range([0, 1]); const scaleQ = d3 .scaleQuantile() .domain(cIndex.map(d => d[indici.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); const scaleQ1 = d3 .scaleQuantile() .domain(cIndex.map(d => d[indici.index])) // array con tutti i valori da visualizzare .range(color_list[indici.index]); //.range(d3.schemePurples[9]); //const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) const svg = d3.create("svg").attr("viewBox", [0, 150, width*0.5, width*0.45]) //const svg = d3.create("svg").attr("viewBox", "0 0 960 700"); // Titolo (dinamico) // svg // .append("g") // .attr("transform", "translate(480,100)") // .append("text") // .attr("fill", "currentColor") // .attr("text-anchor", "middle") // .attr("font-weight", "bold") // .attr("font-size", "22px") // .attr("font-family", "var(--sans-serif)") // .attr("fill", "#222") // .text(`${indici.index} per quartiere (NIL)`); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => // d3.interpolateReds( // scaleL( // cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 // ) // ) scaleQ1( // scala che utilizza i percentili per la distribuzione dei colori cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) ) .attr("stroke", "white") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `${d.properties.NIL} ${d3.format(".3f")( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 )}`; }); return svg.node(); }34:T815,viewof indiciCluster = { const fermateW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Fermate" }); const criminiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sicurezza" }); const eventiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Offerta ricreativa" }); const turismoW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Turismo" }); const benessereW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Benessere" }); const vita_notturnaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Vita notturna" }); const sostenibilitaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sostenibilità ambientale" }); const totale = select({ title: "Seleziona un indice", options: indexList, value: "vivibilita" }); const form1 = html``; form1.oninput = () => (form1.value = { fermateW: fermateW[0].valueAsNumber, criminiW: criminiW[0].valueAsNumber, eventiW: eventiW[0].valueAsNumber, turismoW: turismoW[0].valueAsNumber, benessereW: benessereW[0].valueAsNumber, vita_notturnaW: vita_notturnaW[0].valueAsNumber, sostenibilitaW: sostenibilitaW[0].valueAsNumber, index: totale.value }); form1.oninput(); form1.oninput(); const form2 = html``; form2.oninput = () => (form2.value = { fermateW: 1, criminiW: 1, eventiW: 1, turismoW: 1, benessereW: 1, vita_notturnaW: 1, sostenibilitaW: 1, index: SelIndiciCluster.index }); form2.oninput(); form2.oninput(); if (SelIndiciCluster.index == "vivibilita") return form1; else return form2; }35:Tb7b,mapCluster1 = { //const projection = d3.geoMercator().fitExtent([[-150, -100], [800, 500]], geomsCluster); // const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster); const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.5, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); // Scale di colore // differenza tra le scale: https://observablehq.com/@d3/quantile-quantize-and-threshold-scales const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))]) .range([0, 1]); const scaleQ = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster.map(d => d[indiciCluster.index])) .range(color_list[indiciCluster.index]); const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster.index]); //.range(d3.schemePurples[9]); //const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) const svg = d3.create("svg").attr("viewBox", [0, 150, width*0.5, width*0.45]) //const svg = d3.create("svg").attr("viewBox", "0 0 960 700") ; svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster.features) .join("path") .attr( "fill", d => // scaleL1( // cIndexCluster.find(e => e.cluster == d.properties['cluster'])[indiciCluster.index] || 0 // ) scaleQ1( // scala che utilizza i percentili per la distribuzione dei colori cIndexCluster.find(e => e.cluster == d.properties['cluster'])[indiciCluster.index] || 0 ) ) //.attr("stroke", "gray") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `Cluster ${d.properties.cluster}: ${d3.format(".3f")( cIndexCluster.find(e => e.cluster == d.properties['cluster'])[indiciCluster.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "white") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }36:T45c,// legendaCluster1 = legend({ // color: d3.scaleSequential( // [0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))], // //d3.interpolateSpectral // colorlegend_list[indiciCluster.index] //d3.interpolateReds // ), // title: `${indiciCluster.index}`, // width: width*0.2 // }) viewof legendaCluster1 = { const options = [ { label: "Vivibilità", value: "vivibilita" }, { label: "Fermate", value: "fermate" }, { label: "Sicurezza", value: "crimini" }, { label: "Offerta ricreativa", value: "eventi" }, { label: "Turismo", value: "turismo" }, { label: "Sostenibilità ambientale", value: "sostenibilita" }, { label: "Benessere", value: "benessere" }, { label: "Vita notturna", value: "vita_notturna" }] const legendaCluster = legend({ color: d3.scaleSequential( [0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))], colorlegend_list[indiciCluster.index] //d3.interpolateReds ), title: `${list_i.filter(d => d.value == indiciCluster.index).map(d => d.label)}`, width: width*0.2 }) return legendaCluster }37:T819,viewof indiciCluster20 = { const fermateW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Fermate" }); const criminiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sicurezza" }); const eventiW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Offerta ricreativa" }); const turismoW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Turismo" }); const benessereW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Benessere" }); const vita_notturnaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Vita notturna" }); const sostenibilitaW = slider({ min: 0, max: 1, value: 1, step: 0.1, format: ".0%", title: "Sostenibilità ambientale" }); const totale = select({ title: "Seleziona un indice", options: indexList, value: "vivibilita" }); const form1 = html``; form1.oninput = () => (form1.value = { fermateW: fermateW[0].valueAsNumber, criminiW: criminiW[0].valueAsNumber, eventiW: eventiW[0].valueAsNumber, turismoW: turismoW[0].valueAsNumber, benessereW: benessereW[0].valueAsNumber, vita_notturnaW: vita_notturnaW[0].valueAsNumber, sostenibilitaW: sostenibilitaW[0].valueAsNumber, index: totale.value }); form1.oninput(); form1.oninput(); const form2 = html``; form2.oninput = () => (form2.value = { fermateW: 1, criminiW: 1, eventiW: 1, turismoW: 1, benessereW: 1, vita_notturnaW: 1, sostenibilitaW: 1, index: SelIndiciCluster20.index }); form2.oninput(); form2.oninput(); if (SelIndiciCluster20.index == "vivibilita") return form1; else return form2; }38:T8c3,mapCluster20 = { //const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster20); const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.5, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster20.map(d => d[indiciCluster20.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster20.index]); //.range(d3.schemePurples[9]); const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))]) .range([0, 1]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster.map(d => d[indiciCluster.index])) .range(color_list[indiciCluster.index]); //const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) const svg = d3.create("svg").attr("viewBox", [0, 150, width*0.5, width*0.45]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster20.features) .join("path") .attr( "fill", d => scaleQ1( // scala che utilizza i percentili per la distribuzione dei colori cIndexCluster20.find(e => e.uid == d.properties['tile_ID'])[indiciCluster20.index] || 0 ) ) .attr("stroke-linejoin", "round") .attr("d", path) .append("title") .text(d => { return `${d.properties.tile_ID} ${d3.format(".3f")( cIndexCluster20.find(e => e.uid == d.properties['tile_ID'])[indiciCluster20.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "white") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }39:T880,map_st = { //const projection = d3.geoMercator().fitExtent([[-100, -100], [800, 500]], geoms); // 550 height const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.5, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndex.map(d => d[indici.index]))]) // min max dell'indice da visualizzare .range([0, 1]); const scaleQ = d3 .scaleQuantile() .domain(cIndex.map(d => d[indici.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); //const svg = d3.create("svg").attr("viewBox", "0 0 960 700"); const svg = d3.create("svg").attr("viewBox", [0, 150, width*0.5, width*0.45]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .style('fill', function(d, i) { if (d.properties['ID_NIL'] == "30" || d.properties['ID_NIL'] == "78") { return d3.color("#2e438c") } //4056a1 else {return d3.color("#efe2ba")} }) .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `${d.properties.NIL}\nVivibilità: ${d3.format(".2f")( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 )} - Fermate: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["fermate"] || 0 )} - Sicurezza: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["crimini"] || 0 )} - Offerta ricreativa: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["eventi"] || 0 )} - Turismo: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["turismo"] || 0 )} - Benessere: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["benessere"] || 0 )} - Vita notturna: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["vita_notturna"] || 0 )} - Sostenibilità ambientale: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["sostenibilita"] || 0 )} `; }); return svg.node(); }3a:Tb26,mapCluster1_st = { //const projection = d3.geoMercator().fitExtent([[-100, -100], [800, 500]], geomsCluster); const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); console.log('cIndexCluster', cIndexCluster); // Scale di colore // differenza tra le scale: https://observablehq.com/@d3/quantile-quantize-and-threshold-scales const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))]) // min max dell'indice da visualizzare .range([0, 1]); //console.log('scaleL', d3.max(cIndexCluster.map(d => d[indiciCluster.index]))) const scaleQ = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster.map(d => d[indiciCluster.index])) .range(color_list[indiciCluster.index]); console.log(indiciCluster.index) const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster.index]); //.range(d3.schemePurples[9]); // const svg = d3.create("svg").attr("viewBox", "0 0 960 700") ; const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster.features) .join("path") .style('fill', function(d, i) { if (d.properties['cluster'] == "9") { return d3.color("#2e438c") } else if (d.properties['cluster'] == "2") { return d3.color("#2d7544") //40915a } else {return d3.color("#efe2ba")} }) //.attr("stroke", "gray") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `Cluster ${d.properties.cluster}: ${d3.format(".3f")( cIndexCluster.find(e => e.cluster == d.properties['cluster'])[indiciCluster.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }3b:T861,mapCluster1_st20 = { const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndex.map(d => d[indici.index]))]) // min max dell'indice da visualizzare .range([0, 1]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster20.map(d => d[indiciCluster20.index])) .range(color_list[indiciCluster20.index]); console.log(indiciCluster20.index) const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster20.map(d => d[indiciCluster20.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster20.index]); //.range(d3.schemePurples[9]); // const svg = d3.create("svg").attr("viewBox", "0 0 960 700") ; const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster20.features) .join("path") .style('fill', function(d, i) { if (d.properties['tile_ID'] == "9") { return d3.color("#2e438c") } else {return d3.color("#efe2ba")} }) .attr("stroke-linejoin", "round") .attr("d", path) .append("title") .text(d => { return `Cluster ${d.properties.uid}: ${d3.format(".3f")( cIndexCluster20.find(e => e.uid == d.properties['tile_ID'])[indiciCluster20.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }3c:T87a,map_do = { //const projection = d3.geoMercator().fitExtent([[-100, -100], [800, 500]], geoms); // 550 height const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.5, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndex.map(d => d[indici.index]))]) // min max dell'indice da visualizzare .range([0, 1]); const scaleQ = d3 .scaleQuantile() .domain(cIndex.map(d => d[indici.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); //const svg = d3.create("svg").attr("viewBox", "0 0 960 700"); const svg = d3.create("svg").attr("viewBox", [0, 150, width*0.5, width*0.45]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .style('fill', function(d, i) { if (d.properties['ID_NIL'] == "9" || d.properties['ID_NIL'] == "4") { return d3.color("#9c0024") } else {return d3.color("#efe2ba")} }) .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `${d.properties.NIL}\nVivibilità: ${d3.format(".2f")( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 )} - Fermate: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["fermate"] || 0 )} - Sicurezza: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["crimini"] || 0 )} - Offerta ricreativa: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["eventi"] || 0 )} - Turismo: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["turismo"] || 0 )} - Benessere: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["benessere"] || 0 )} - Vita notturna: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["vita_notturna"] || 0 )} - Sostenibilità ambientale: ${d3.format(".2f")(cIndex.find(e => e.uid == d.properties['ID_NIL'])["sostenibilita"] || 0 )} `; }); return svg.node(); }3d:Tb0a,mapCluster1_do = { //const projection = d3.geoMercator().fitExtent([[-100, -100], [800, 500]], geomsCluster); const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); console.log('cIndexCluster', cIndexCluster); // Scale di colore // differenza tra le scale: https://observablehq.com/@d3/quantile-quantize-and-threshold-scales const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndexCluster.map(d => d[indiciCluster.index]))]) // min max dell'indice da visualizzare .range([0, 1]); //console.log('scaleL', d3.max(cIndexCluster.map(d => d[indiciCluster.index]))) const scaleQ = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(d3.schemePurples[9]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster.map(d => d[indiciCluster.index])) .range(color_list[indiciCluster.index]); console.log(indiciCluster.index) const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster.map(d => d[indiciCluster.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster.index]); //.range(d3.schemePurples[9]); //const svg = d3.create("svg").attr("viewBox", "0 0 960 700") ; const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster.features) .join("path") .style('fill', function(d, i) { if (d.properties['cluster'] == "5") { return d3.color("#f1d520") } else if (d.properties['cluster'] == "3") {return d3.color("#9c0024")} else {return d3.color("#efe2ba")} }) //.attr("stroke", "gray") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") .text(d => { return `Cluster ${d.properties.cluster}: ${d3.format(".3f")( cIndexCluster.find(e => e.cluster == d.properties['cluster'])[indiciCluster.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }3e:T872,mapCluster1_do20 = { const projection = d3.geoMercator().fitExtent([[0, 0], [width*0.8, width*0.5]], geomsCluster); const path = d3.geoPath().projection(projection); const scaleL = d3 .scaleLinear() .domain([0, d3.max(cIndex.map(d => d[indici.index]))]) // min max dell'indice da visualizzare .range([0, 1]); const scaleL1 = d3 .scaleLinear() .domain(cIndexCluster20.map(d => d[indiciCluster20.index])) .range(color_list[indiciCluster20.index]); console.log(indiciCluster20.index) const scaleQ1 = d3 .scaleQuantile() .domain(cIndexCluster20.map(d => d[indiciCluster20.index])) // array con tutti i valori da visualizzare .range(color_list[indiciCluster20.index]); //.range(d3.schemePurples[9]); // const svg = d3.create("svg").attr("viewBox", "0 0 960 700") ; const svg = d3.create("svg").attr("viewBox", [0, 0, width*0.8, width*0.70]) svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geomsCluster20.features) .join("path") .style('fill', function(d, i) { if (d.properties['tile_ID'] == "3") { return d3.color("#9c0024") }//f13c20 //f55676 else {return d3.color("#efe2ba")} }) .attr("stroke-linejoin", "round") .attr("d", path) .append("title") .text(d => { return `Cluster ${d.properties.uid}: ${d3.format(".3f")( cIndexCluster20.find(e => e.uid == d.properties['tile_ID'])[indiciCluster20.index] || 0 )}`; }); svg .append("g") .attr("transform", "translate(0, 120)") .selectAll("path") .data(geoms.features) .join("path") .attr( "fill", d => d3.interpolateReds( scaleL( cIndex.find(e => e.uid == d.properties['ID_NIL'])[indici.index] || 0 ) )) .attr("fill-opacity", "0.0") .attr("stroke", "black") .attr("stroke-linejoin", "round") //arrotonda gli angoli della spezzata del vostro path .attr("d", path) .append("title") //.attr('style', "background-color:red") .text(d => { return `${d.properties.NIL}`; }).attr("id", "ass") return svg.node(); }3f:Ted0,scatterCluster20 = { cIndexCluster20.sort((a, b) => b['vivibilita'] - a['vivibilita']); const shapes = cIndexCluster20.map((d,i) => ({ type: 'line', //y0: i, x0: 0, y1: i, x1: 1, y0: 0, x0: i, y1: 1, x1: i, opacity: 0.7, line: { color: 'lightgrey', width: 1.5, dash: 'dot'} }) ) const layout = { //title:'Gli Indici nei Cluster', //plot_bgcolor: 'rgba(243, 240, 235, 10)', paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)', width: width*0.55, height: width*0.35, margin: { l: 15, r: 15, b: 50, t: 0, pad: 0 }, shapes: shapes, yaxis: { //tickvals: cIndexCluster20.map((d,i )=>i) , //ticktext : cIndexCluster20.map(d=>d.uid), //title: 'Clusters', hoverformat: '.2r', showgrid: false, zeroline: false, tickfont: {size: 9}}, xaxis: { tickvals: cIndexCluster20.map((d,i )=>i) , ticktext : cIndexCluster20.map(d=>'C'+d.uid), showgrid: false, zeroline: false, tickfont: {size: 9} }, legend: { orientation: "h", x: 0, xanchor: 'top', y: width*0.35 } }; const opacity=0.8 const s = 15 const complessivo = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.vivibilita), mode: 'markers', type: 'scatter', name: 'Vivibilità', marker: { line:{ color: 'black', width: 1 }, // opacity: 0.7, line_color: "blue", size: 25, color: d3.schemeReds[7][4], opacity: opacity }}; const vita_notturna = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.vita_notturna), mode: 'markers', type: 'scatter', name: 'Vita notturna', marker: { size: s, color:d3.schemeBlues[7][4], opacity: opacity }}; const benessere = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.benessere), mode: 'markers', type: 'scatter', name: 'Benessere', marker: { size: s, color: d3.schemePurples[9][4] //d3.schemePaired.slice(7)[0] }}; const turismo = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.turismo), mode: 'markers', type: 'scatter', name: 'Turismo', marker: { size: s, color:d3.schemeBuPu[7][6], //d3.schemeBuPu[7][4], opacity: opacity }}; const fermate = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.fermate), mode: 'markers', type: 'scatter', name: 'Fermate', marker: { size: s, color:d3.schemeOranges[7][4], opacity: opacity }}; const crimini = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.crimini), mode: 'markers', type: 'scatter', name: 'Sicurezza', marker: { size: s, color: d3.schemeGreys[7][4] , opacity: opacity }}; const eventi = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.eventi), mode: 'markers', type: 'scatter', name: 'Offerta ricreativa', marker: { size: s, color:d3.schemeRdPu[7][4], opacity: opacity }}; const sostenibilita = { x: cIndexCluster20.map((d,i)=> i), y: cIndexCluster20.map(d => d.sostenibilita), mode: 'markers', type: 'scatter', name: 'Sostenibilità ambientale', marker: { size: s, color:d3.schemeGreens[7][4], opacity: opacity }}; const data = [complessivo, vita_notturna, benessere, turismo, fermate, crimini, eventi, sostenibilita]; const div = DOM.element('div'); Plotly.newPlot(div, data, layout, {displayModeBar: false}); return div; }40:T1101,scatterCluster = { //var cIndexCluster_m = cIndexCluster.map((item, i) => Object.assign({}, item, nomiCluster2[i])); let cIndexCluster_m = []; for(let i=0; i itmInner.cluster === cIndexCluster[i].cluster))} ); } //cIndexCluster_m.sort((a, b) => b['vivibilita'] - a['vivibilita'] ); cIndexCluster_m.sort((a, b) => b['vivibilita'] - a['vivibilita']); const shapes = cIndexCluster_m.map((d,i) => ({ type: 'line', //y0: i, x0: 0, y1: i, x1: 1, y0: 0, x0: i, y1: 1, x1: i, opacity: 0.7, line: { color: 'lightgrey', width: 1.5, dash: 'dot'} }) ) const layout = { paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)', width: width*0.55, height: width*0.35, margin: { l: 15, r: 15, b: 60, t: 0, pad: 0 }, shapes: shapes, yaxis: { hoverformat: '.2r', showgrid: false, zeroline: false, tickfont: {size: 9} }, xaxis: { tickvals: cIndexCluster_m.map((d,i )=>i) , ticktext: cIndexCluster_m.map(d => d.nome+'
('+d.simpa+')'), // tickangle: 0, showgrid: false, zeroline: false, tickfont: {size: 9} }, legend: { orientation: "h", x: 0, xanchor: 'top', y: width*0.35 }, }; const opacity=0.8 const s = 15 const complessivo = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.vivibilita), mode: 'markers', type: 'scatter', name: 'Vivibilità', //hovertemplate: 'Price:', marker: { line:{ color: 'black', width: 1 }, // opacity: 0.7, line_color: "blue", size: 25, color: d3.schemeReds[7][4], opacity: opacity }}; const vita_notturna = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.vita_notturna), mode: 'markers', type: 'scatter', name: 'Vita notturna', marker: { size: s, color:d3.schemeBlues[7][4], opacity: opacity }}; const benessere = { // y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.benessere), mode: 'markers', type: 'scatter', name: 'Benessere', marker: { size: s, color: d3.schemePurples[9][4], opacity: opacity }}; const turismo = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.turismo), mode: 'markers', type: 'scatter', name: 'Turismo', marker: { size: s, color:d3.schemeBuPu[7][6], //d3.schemeBuPu[7][4], opacity: opacity }}; const fermate = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.fermate), mode: 'markers', type: 'scatter', name: 'Fermate', marker: { size: s, color:d3.schemeOranges[7][4], opacity: opacity }}; const crimini = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.crimini), mode: 'markers', type: 'scatter', name: 'Sicurezza', marker: { size: s, color: d3.schemeGreys[7][4], opacity: opacity }}; const eventi = { // y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.eventi), mode: 'markers', type: 'scatter', name: 'Offerta ricreativa', marker: { size: s, color:d3.schemeRdPu[7][4], opacity: opacity }}; const sostenibilita = { //y: cIndexCluster_m.map(d => d.nome),//cIndexCluster_m.map((d,i)=> i), y: cIndexCluster_m.map(d => d.sostenibilita), mode: 'markers', type: 'scatter', name: 'Sostenibilità ambientale', marker: { size: s, color:d3.schemeGreens[7][4], opacity: opacity }}; const data = [complessivo, vita_notturna, benessere, turismo, fermate, crimini, eventi, sostenibilita]; const div = DOM.element('div'); Plotly.newPlot(div, data, layout, {displayModeBar: false}); return div; }41:Tb75,wordCloud = (data,word,frequency,maxSize,type) => { if (type===undefined) { data.map(d => d.type = 0) } const height = 700; const margin = { t:0, l: 0, r: 0, b: 0, } const padding = 2; // create the SVG container let ext = d3.extent(data,d => d[type]) let xScale = d3.scaleLinear() .domain(ext) .range([margin.l, width - margin.l - margin.r]); let svg = d3.select(html``) .attr('width', width) .attr('height', height); const colors = d3.schemeSet1 .slice(0,new Set(data.map(d=> d[type])).size) // color text black or white according to the luminance value of the node const luminance = 50; const textColor = d3.scaleQuantile().range(["#fff", "#000"]).domain([0, luminance, 100]); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(data, d => d[frequency])]) .range([0, maxSize]); // define the simualtion engine const simulation = d3.forceSimulation(data) .force("x", d3.forceX(width/2).strength(1)) .force("y", d3.forceY(height/2).strength(1)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(10)) .alpha(0.1) /////////////////// function randomize() { const simulation = d3.forceSimulation(data) .force("x", d3.forceX(width/2).strength(1)) .force("y", d3.forceY(height/2).strength(1)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(10)) .alpha(0.1) .restart() } function split() { simulation .force("x", d3.forceX(d=> xScale(d[type])).strength(1)) .force("y", d3.forceY(height / 2).strength(1)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(10)) .alpha(0.2) .restart() } ///////////// // create a layer or group let gBubble = svg .selectAll('gBubble') .data(data); gBubble.exit().remove(); let bubble = gBubble.enter() .append('g') .classed('gBubble', true) .attr('id',d => d[word]); bubble .append('circle') .attr('r', d => r(d[frequency])) .attr('fill', d => colors[+d[type]]) .attr('fill-opacity', 0.4) .attr('stroke', d => colors[+d[type]]) .attr('stroke-width', 1) let text= bubble .append('text'); const textLabels = text .text( d => (d[word])) .style('text-anchor','middle') .attr("dominant-baseline", "central") .attr('font-family', 'sans-serif') .attr('font-size', '12px') .attr('font-weight','normal') .attr('fill', d => textColor(d3.hcl(colors[+d[type]]).l)) gBubble = gBubble .merge(bubble); gBubble.call(drag(simulation)); simulation.nodes(data) .on('tick', () => { gBubble .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); }) return Object.assign(svg.node(), { randomize, split }); }42:[{"id":"2f05e807e904fdbd8baee3bc648ff07ec3361deb3f46637be1998d6d15322323406924d557e032c2ca97311be5ad94e257513fd3c24ac51922282b46f7dcbcab","href":"https://static.observableusercontent.com/files/2f05e807e904fdbd8baee3bc648ff07ec3361deb3f46637be1998d6d15322323406924d557e032c2ca97311be5ad94e257513fd3c24ac51922282b46f7dcbcab","name":"nilzone.geojson","type":"application/geo+json","lastModified":1593010386250.099,"size":313818},{"id":"fe173926f32bffff50a65a7250f417edf7c849f94bee272937ad0365968735c17aed4599b90c4454b30802159781cac20c4091783e8b26677ff1efb5d110e2c8","href":"https://static.observableusercontent.com/files/fe173926f32bffff50a65a7250f417edf7c849f94bee272937ad0365968735c17aed4599b90c4454b30802159781cac20c4091783e8b26677ff1efb5d110e2c8","name":"geo_cluster_multipolygon.geojson","type":"application/geo+json","lastModified":1593016201433.201,"size":119465},{"id":"c29a88afe60eda329eaa3638bf87c94831725457c370b2c408effad338b2a97f738a1e7429254a56133ed5213f15157cd320d233001c2a51514799e193ba265a","href":"https://static.observableusercontent.com/files/c29a88afe60eda329eaa3638bf87c94831725457c370b2c408effad338b2a97f738a1e7429254a56133ed5213f15157cd320d233001c2a51514799e193ba265a","name":"indici_NIL_nlog.csv","type":"text/csv","lastModified":1593595111728.538,"size":1714},{"id":"b4eca0aa2cb128bb89456453c864016fc2476905733a191c2e1b2412197722e7f87c03bc70097c883cfddc56ef63a49b6f939f419b234c598bdcd20ad1c95cef","href":"https://static.observableusercontent.com/files/b4eca0aa2cb128bb89456453c864016fc2476905733a191c2e1b2412197722e7f87c03bc70097c883cfddc56ef63a49b6f939f419b234c598bdcd20ad1c95cef","name":"indici_log.csv","type":"text/csv","lastModified":1593014013722.274,"size":253},{"id":"bbcec2b1c9d8736f5c2964fa0e3f416566fda68d8dd299b11dacab98c23e8d3047f93060b32318c6669408cbb1b4ae52d9c15692ee3c3e79a506bdd0b11f3f44","href":"https://static.observableusercontent.com/files/bbcec2b1c9d8736f5c2964fa0e3f416566fda68d8dd299b11dacab98c23e8d3047f93060b32318c6669408cbb1b4ae52d9c15692ee3c3e79a506bdd0b11f3f44","name":"indici_NIL_random.csv","type":"text/csv","lastModified":1593617076166.323,"size":16088},{"id":"2b6d3178e274263d22db855f79a644e14bd7a8f0ad12546c6ae97f6cd06a6fe3918a6d1993fc70c725dd30cd873c55afec4a2bc0357d5be71941c280b1d1cae5","href":"https://static.observableusercontent.com/files/2b6d3178e274263d22db855f79a644e14bd7a8f0ad12546c6ae97f6cd06a6fe3918a6d1993fc70c725dd30cd873c55afec4a2bc0357d5be71941c280b1d1cae5","name":"cluster_geom_con_coordinate.geojson","type":"application/geo+json","lastModified":1593762398215.129,"size":47418},{"id":"9b2bd4fd5057fdb5058da7b3664964119fd2ddaee2979f030e51e2e04e69ddc284ac214bcfbc74f9df0e8fe815ee226bdfc442308768385473eb95b56140da9a","href":"https://static.observableusercontent.com/files/9b2bd4fd5057fdb5058da7b3664964119fd2ddaee2979f030e51e2e04e69ddc284ac214bcfbc74f9df0e8fe815ee226bdfc442308768385473eb95b56140da9a","name":"indici_cluster_con_cooridnate@1.csv","type":"text/csv","lastModified":1593766061974.724,"size":2532},{"id":"b657b23474502e0ddc9d851b36a95aea51904469a85f32eb61eb3737270284a7fb580bd719df2c9842a8a226fd859bd257468fab2ff7f31af5dd6ce7b1df2add","href":"https://static.observableusercontent.com/files/b657b23474502e0ddc9d851b36a95aea51904469a85f32eb61eb3737270284a7fb580bd719df2c9842a8a226fd859bd257468fab2ff7f31af5dd6ce7b1df2add","name":"crimini_bubble.csv","type":"text/csv","lastModified":1594129785587.854,"size":867}] 30:{"id":"5d2b06d769a71e95","slug":"indici-per-quartiere-nil-della-citta-di-milano","title":"Indici per quartiere (NIL) della città di Milano","thumbnail":"2fa28b0edf552545aa0515b6952046a8c1ecd8c79f4d9e6f0dfdec2544496028","access_level":"public","create_time":"$D2020-06-24T14:53:06.250Z","update_time":"$D2020-09-01T15:42:19.738Z","view_time":null,"first_public_time":"$D2020-06-25T14:21:43.557Z","fork":{"id":"f56065b058dd28bd","slug":"indici-per-quartiere-nil-della-citta-di-milano","title":"Indici per quartiere (NIL) della città di Milano","owner":{"id":"3f139cfa303b0c24","login":"danielefadda","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"68b61c11ae8574fc","login":"giuliavascia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/80f55049aec1a1f9a9ec52f3aa9601b2d10de356514e919e1be1b30889f9ac9a","tier":"starter_2024"},"version":3463,"publish_version":3463,"role":null,"authored":false,"authors":[{"type":"individual","id":"597780d3ba1b452a","login":"giuliavascia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/80f55049aec1a1f9a9ec52f3aa9601b2d10de356514e919e1be1b30889f9ac9a","tier":null}],"members":[{"type":"individual","id":"597780d3ba1b452a","login":"giuliavascia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/80f55049aec1a1f9a9ec52f3aa9601b2d10de356514e919e1be1b30889f9ac9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Indici per quartiere (NIL) della città di Milano","cells":[{"id":0,"value":"md`# Indici per quartiere (NIL) della città di Milano\n\nstarting from: https://observablehq.com/@observablehq/places-weve-been`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1826,"value":"md`### Lettura geojson file (NIL e cluster)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`Carico il geojson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"geoms = FileAttachment(\"nilzone.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"md`Geojson cluster (csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"// Cluster\ngeomsCluster = FileAttachment(\"geo_cluster_multipolygon.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2479,"value":"// Cluster\ngeomsCluster20 = FileAttachment(\"cluster_geom_con_coordinate.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2442,"value":"md`### Lettura file indici (NIL e cluster)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`Carico gli indici (csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"dataIndexes = d3.csvParse(\n await FileAttachment(\"indici_NIL_random.csv\").text(),\n (d, i) => {\n const obj = d3.autoType(d);\n //delete obj['uid'];\n delete obj['tile_ID'];\n delete obj['point'];\n return obj;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"md`Caricamento indici cluster (csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"// Cluster\ndataIndexesCluster_file = d3.csvParse(\n await FileAttachment(\"indici_log.csv\").text(),\n (d, i) => {\n const obj = d3.autoType(d);\n //delete obj['tile_ID'];\n return obj;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1015,"value":"dataIndexesCluster = dataIndexesCluster_file.map(d => {\n const dt = {\n benessere: d.benessere/10,\n crimini: d.crimini/10,\n eventi: d.eventi/10,\n turismo: d.turismo/10,\n vita_notturna: d.vita_notturna/10,\n fermate: d.fermate/10,\n sostenibilita: d.sostenibilita/10,\n cluster: d.cluster,\n } \n return dt;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2448,"value":"// Cluster\ndataIndexesCluster20 = d3.csvParse(\n await FileAttachment(\"indici_cluster_con_cooridnate@1.csv\").text(),\n (d, i) => {\n const obj = d3.autoType(d);\n //delete obj['tile_ID'];\n return obj;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"md`Creo la lista degli indici per generare lo slider multiplo e aggiungo il *generale* che sarà la media degli altri indici`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"indexList = Object.keys(dataIndexes[0])\n .filter(d => d !== 'uid' && d !== 'tile_ID')\n .concat('vivibilita')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"md`Applico un peso ad ogni indice che assegno utilizzando le variabili controllate dagli slider (guardare prima come creare gli slider)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"cIndex = dataIndexes.map(d => {\n const wIndex = {\n uid: d.uid,\n fermate: d.fermate * indici.fermateW,\n crimini: (1 - d.crimini) * indici.criminiW,\n eventi: d.eventi * indici.eventiW,\n turismo: d.turismo * indici.turismoW,\n benessere: d.benessere * indici.benessereW,\n vita_notturna: d.vita_notturna * indici.vita_notturnaW,\n sostenibilita: d.sostenibilita * indici.sostenibilitaW\n };\n //const totale = d3.sum(d3.values(wIndex).splice(1)) / d3.values(wIndex).splice(1).length;\n var cnt_idx = 0;\n d3.values(indici).filter(d => { \n if (d > 0) cnt_idx++;\n return cnt_idx;\n })\n const totale = d3.sum(d3.values(wIndex).splice(1)) / cnt_idx;\n \n wIndex.vivibilita = totale;\n return wIndex;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"// Cluster\ncIndexCluster = dataIndexesCluster.map(d => {\n const wIndex = {\n cluster: d.cluster,\n fermate: d.fermate * indiciCluster.fermateW,\n crimini: (1 - d.crimini) * indiciCluster.criminiW,\n eventi: d.eventi * indiciCluster.eventiW,\n turismo: d.turismo * indiciCluster.turismoW,\n benessere: d.benessere * indiciCluster.benessereW,\n vita_notturna: d.vita_notturna * indiciCluster.vita_notturnaW,\n sostenibilita: d.sostenibilita * indiciCluster.sostenibilitaW\n };\n var cnt_idx = 0;\n d3.values(indiciCluster).filter(d => { \n if (d > 0) cnt_idx++;\n return cnt_idx;\n })\n\n const totale = d3.sum(d3.values(wIndex).splice(1)) / cnt_idx;\n wIndex.vivibilita = totale;\n return wIndex;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2458,"value":"// Cluster\ncIndexCluster20 = dataIndexesCluster20.map(d => {\n const wIndex = {\n uid: d.uid,\n fermate: d.fermate * indiciCluster20.fermateW,\n crimini: (1 - d.crimini) * indiciCluster20.criminiW,\n eventi: d.eventi * indiciCluster20.eventiW,\n turismo: d.turismo * indiciCluster20.turismoW,\n benessere: d.benessere * indiciCluster20.benessereW,\n vita_notturna: d.vita_notturna * indiciCluster20.vita_notturnaW,\n sostenibilita: d.sostenibilita * indiciCluster20.sostenibilitaW\n };\n //const totale = d3.sum(d3.values(wIndex).splice(1)) / d3.values(wIndex).splice(1).length;\n var cnt_idx = 0;\n d3.values(indiciCluster20).filter(d => { \n if (d > 0) cnt_idx++;\n return cnt_idx;\n })\n const totale = d3.sum(d3.values(wIndex).splice(1)) / cnt_idx;\n wIndex.vivibilita = totale;\n return wIndex;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1077,"value":"color_list = { \n const l_color = {\n benessere: d3.schemePurples[7],\n crimini: d3.schemeGreys[7],\n eventi: d3.schemeRdPu[7],\n turismo: d3.schemeBuPu[7],\n vita_notturna: d3.schemeBlues[7],\n fermate: d3.schemeOranges[7],\n sostenibilita: d3.schemeGreens[7], \n vivibilita: d3.schemeReds[7]//d3.schemeSpectral[9] //d3.schemeBuGn[9]\n }\n return l_color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"colorlegend_list = { \n const l_color = {\n benessere: d3.interpolatePurples,\n crimini: d3.interpolateGreys,\n eventi: d3.interpolateRdPu,\n turismo: d3.interpolateBuPu,\n vita_notturna: d3.interpolateBlues,\n fermate: d3.interpolateOranges,\n sostenibilita: d3.interpolateGreens, \n vivibilita: d3.interpolateReds //d3.schemeSpectral[9] //d3.schemeBuGn[9]\n }\n return l_color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3164,"value":"nomiCluster = [{'cluster': 0, 'nome': 'Residenziale
medio', 'simpa': 'Stai sereno'},\n {'cluster': 1, 'nome': 'Periferia', 'simpa': 'L\\'è grisa'},\n {'cluster': 2, 'nome': 'Eventi &
Vita notturna', 'simpa': 'Spritzino'},\n {'cluster': 3, 'nome': 'Residenziale
medio-alto', 'simpa': 'Da sciòr'},\n {'cluster': 4, 'nome': 'Sostenibilità &
Crimini', 'simpa': 'Sgrafignada'},\n {'cluster': 5, 'nome': 'Hipster', 'simpa': 'Il top'},\n {'cluster': 6, 'nome': 'Centro storico', 'simpa': 'MilanoMilano'},\n {'cluster': 7, 'nome': 'Residenziale
medio-basso', 'simpa': 'Tütt quiet'},\n {'cluster': 8, 'nome': 'Riqualificazione', 'simpa': 'Work in progress'},\n {'cluster': 9, 'nome': 'Studenti', 'simpa': 'Attaccati al tram'}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2463,"value":"md`### Mappa NIL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"viewof SelIndici = {\n const totale = select({\n title: \"Seleziona un indice\",\n //options: indexList,\n options: [\n { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" },\n { label: \"Vita notturna\", value: \"vita_notturna\" }, \n { label: \"Benessere\", value: \"benessere\" } \n ],\n value: \"vivibilita\"\n });\n const form_sel = html``;\n form_sel.oninput = () =>\n (form_sel.value = {index: totale.value});\n form_sel.oninput();\n form_sel.oninput();\n return form_sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1542,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1263,"value":"// legenda = legend({\n// color: d3.scaleSequential(\n// [0, d3.max(cIndex.map(d => d[indici.index]))],\n// //d3.interpolateSpectral\n// colorlegend_list[indici.index] //d3.interpolateReds\n// ),\n// title: `${indici.index}`\n// })\n\nviewof legenda = {\n const options = [\n { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" },\n { label: \"Benessere\", value: \"benessere\" },\n { label: \"Vita notturna\", value: \"vita_notturna\" }]\n\n const legenda = legend({\n color: d3.scaleSequential(\n [0, d3.max(cIndex.map(d => d[indici.index]))],\n colorlegend_list[indici.index] //d3.interpolateReds\n ),\n title: `${list_i.filter(d => d.value == indici.index).map(d => d.label)}`,\n width: width*0.2\n }) \n return legenda\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2467,"value":"md`### Mappa Cluster senza coordinate`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1554,"value":"viewof SelIndiciCluster = {\n const totale = select({\n title: \"Seleziona un indice\",\n //options: indexList,\n options: [\n { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" },\n { label: \"Vita notturna\", value: \"vita_notturna\" },\n { label: \"Benessere\", value: \"benessere\" } \n ],\n value: 'vivibilita'\n });\n \n const form_sel = html``;\n form_sel.oninput = () =>\n (form_sel.value = {index: totale.value});\n form_sel.oninput();\n form_sel.oninput();\n return form_sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1185,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"md`### Mappa Cluster con Coordinate`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2652,"value":"viewof SelIndiciCluster20 = {\n const totale = select({\n title: \"Seleziona un indice\",\n //options: indexList,\n options: [\n { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" }, \n { label: \"Vita notturna\", value: \"vita_notturna\" },\n { label: \"Benessere\", value: \"benessere\" } \n ],\n value: 'vivibilita'\n });\n \n const form_sel = html``;\n form_sel.oninput = () =>\n (form_sel.value = {index: totale.value});\n form_sel.oninput();\n form_sel.oninput();\n return form_sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2654,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2484,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2790,"value":"list_i = [ { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" },\n { label: \"Benessere\", value: \"benessere\" },\n { label: \"Vita notturna\", value: \"vita_notturna\" }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2796,"value":"l = list_i.filter(d => d.value == 'vita_notturna').map(d => d.label)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2541,"value":"viewof legendaCluster20 = {\n const options = [\n { label: \"Vivibilità\", value: \"vivibilita\" },\n { label: \"Fermate\", value: \"fermate\" },\n { label: \"Sicurezza\", value: \"crimini\" },\n { label: \"Offerta ricreativa\", value: \"eventi\" },\n { label: \"Turismo\", value: \"turismo\" },\n { label: \"Sostenibilità ambientale\", value: \"sostenibilita\" },\n { label: \"Benessere\", value: \"benessere\" },\n { label: \"Vita notturna\", value: \"vita_notturna\" }]\n\n const legendaCluster20 = legend({\n color: d3.scaleSequential(\n [0, d3.max(cIndexCluster20.map(d => d[indiciCluster20.index]))],\n //d3.interpolateSpectral\n colorlegend_list[indiciCluster20.index] //d3.interpolateReds\n ),\n //title: `${indiciCluster20.index}`,\n title: `${list_i.filter(d => d.value == indiciCluster20.index).map(d => d.label)}`,\n width: width*0.2\n }) \n return legendaCluster20\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1561,"value":"md`## Parallel Coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1834,"value":"md`## Studente`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1903,"value":"md`### NIL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1975,"value":"cIndex","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1910,"value":"md`### Cluster 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1901,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2754,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1894,"value":"md`## NIL Donna`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1885,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1932,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2774,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3399,"value":"d3.schemeBuPu[7][6]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2831,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2943,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3432,"value":"md`# Bubble`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3435,"value":"words = d3.csvParse(\n await FileAttachment(\"crimini_bubble.csv\").text(),\n (d, i) => {\n const obj = d3.autoType(d);\n return obj;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3436,"value":" example = wordCloud(words,'crimine','freq',100) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3440,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3441,"value":"drag = (simulation) => {\n function dragstarted(d){\n if (!d3.event.active) simulation.alphaTarget(0.05).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d){\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d){\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n } \n return d3.drag()\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`# Attachment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"//d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"md`Script Per creare le legende: https://observablehq.com/@d3/color-legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1633,"value":"import {color as colorWidget, radio as radioWidget} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1730,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 31:"$30:body"