2c:null 2d:["$","title",null,{"children":"Cluster data visualization | Marco Q | Observable"}] 32:T936,chart = { const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const partiti = { "sel%": "Sinistra, Ecologia e Libertà", "pd%": "Partito Democratico", "ln%": "Lega Nord", "fdi%": "Fratelli d Italia ", "fi%": "Forza Italia", "m5s%": "Movimento 5 Stelle", "affluenza": "Affluenza" }; var scale = d3 .scaleLinear() .range([margin.left+10, width -(10+ margin.right)]) .nice(); if (partito === 'affluenza') {scale = scale.domain([0, 0.85]) } else {scale = scale.domain([0, 0.4])} const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr('stroke', '#d4d4d4') .attr('stroke-width', '2px') .attr("fill", "#ebebeb"); svg .append("line") .style("stroke", "rgb(128,128,128,0.5)") .style("stroke-width", 2) .attr("x1", margin.left ) .attr("y1", height/2) .attr("x2", width - margin.right) .attr("y2", height/2); svg .append("text") .attr("x", margin.left) .attr("y", margin.top+5) .attr("class", "heading") .style('fill', "black") .style("font-size", "12px") .text(partiti[partito]); svg .append("text") .attr("x", margin.left) .attr("y", height/2-3) .attr("class", "heading") .style('fill', "black") .style("font-size", "10px") .text(anni[1]); const sorted_data = [...cluster_means[partito]].sort((a, b) => a[0] == n_cluster ? 0 : -1 ) const groups = svg.selectAll("g") .data(sorted_data) .join("g"); groups .append("circle") .attr("cx", (row) => scale(row[1])) .attr("cy", height/2) .attr("r", 12) .attr("fill", (row) => row[0] == n_cluster ? "#f64b4b" : "rgb(128,128,128,0.7)" ); groups .append("text") .attr("x", (row) => scale(row[1])-3.5) .attr("y", height/2+3.5) .attr("class", "heading") .style('fill', (row) => row[0] == n_cluster ? "white" : "rgb(128,128,128,0)") .text(row => row[0]); svg .append("g") .call(d3.axisTop(scale) .ticks(5) .tickFormat(d3.format(".0%")) .tickSize(0)) .style("transform", `translateY(${height * 0.85}px`) .call(g => g.select(".domain").remove()); return svg.node(); }33:Tfdb,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/inline-labels function InlineChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 30, // top margin, in pixels marginRight = 50, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 30, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] zDomain, // array of z-values yFormat, // a format specifier string for the labels colors = d3.schemeCategory10, // stroke color of line strokeLinecap = "round", // stroke line cap of the line strokeLinejoin = "round", // stroke line join of the line strokeWidth = 1.5, // stroke width of line, in pixels strokeOpacity = 1, // stroke opacity of line halo = "#fff", // color of label halo haloWidth = 6 // padding around the labels } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const color = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); // Construct formats. yFormat = yScale.tickFormat(null, yFormat); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); const serie = svg.append("g") .selectAll("g") .data(d3.group(I, i => Z[i])) .join("g"); const path = serie.append("path") .attr("fill", "none") .attr("stroke", ([key]) => color(key)) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .style("mix-blend-mode", "multiply") .attr("d", ([, I]) => line(I)); serie.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(([, I]) => I) .join("text") .attr("dy", "0.35em") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .text(i => yFormat(Y[i])) .call(text => text .filter((_, j, I) => j === I.length - 1) .append("tspan") .attr("font-weight", "bold") .text(i => ` ${Z[i]}`)) .call(text => text.clone(true)) .attr("fill", "none") .attr("stroke", halo) .attr("stroke-width", haloWidth); return Object.assign(svg.node(), {scales: {color}}); }34:T428,35:T1519,chart1 = { function updateSizes(collapsed) { if (collapsed) { titleH = 35; rowH = 13; footerH = 24; circleR = 6; } else { titleH = 60; rowH = 28; footerH = 2; circleR = 11; } h = margin.top + titleH + (rowH * anni.length) + footerH + margin.bottom; } function transition() { svg.transition().attr('height', h); svg.select('rect').transition().attr('height', h); svg.select('.axis').transition().style("transform", `translateY(${h - margin.bottom - 10}px`) collapse.select('path').transition().style("transform", collapsed ? "translateY(-2px) rotate(180deg)" : "translateY(0px) rotate(0deg)"); collapse.select('text').text(collapsed ? 'show more' : 'show less') svg.selectAll('.row').transition().style('transform', (d, i) => { const ypos = margin.top + titleH + ((i - 0.5) * rowH); return `translateY(${ypos}px)`; }); svg.selectAll('.year').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('.cluster_marker text').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('circle').transition().attr('r', circleR); svg.selectAll("line").transition().style("stroke-width", collapsed ? 1 : 2); } const partiti = { "sel%": "Sinistra, Ecologia e Libertà", "pd%": "Partito Democratico", "ln%": "Lega Nord", "fdi%": "Fratelli d Italia ", "fi%": "Forza Italia", "m5s%": "Movimento 5 Stelle", "affluenza": "Affluenza" }; let rowH, titleH, footerH, circleR, h; let margin = { top: 20, right: 20, bottom: 5, left: 20 }; let collapsed = false; updateSizes(collapsed); // Scala condivisa var scale = d3 .scaleLinear() .range([margin.left+10, width -(10+ margin.right)]) .nice(); if (partito === 'affluenza') {scale = scale.domain([0, 0.85]) } else {scale = scale.domain([0, 0.4])} // SVG const svg = d3.create("svg") .attr("width", width) .attr("height", h) // BACKGROUND svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", h) .attr("stroke", "#d4d4d4") .attr("stroke-width", "2px") .attr("fill", "#ebebeb"); // COLLAPSE BUTTON const collapse = svg.append('g') .attr('class', 'collapse_btn') .attr("transform", `translate(${width - margin.right - 10} ${margin.top + 5})`) .on("click", () => { collapsed = !collapsed; updateSizes(collapsed); transition(); }); collapse .append("text") .attr("text-anchor", "end") .text(collapsed ? 'show more' : 'show less'); collapse .append("path") .style("transform", `rotate(${ collapsed ? 180 : 0}deg)`) .attr("d", d3.symbol(d3.symbolTriangle).size(20)); collapse .append("rect") .attr("width", 40) .attr("height", 40) .attr("x", -20) .attr("y", -20) .attr("fill", "transparent"); // HEADING // Dobbiamo capire per i partiti che rappresentano la stessa cosa tipo monti e azione e Italia Viva svg .append("text") .attr("x", margin.left) .attr("y", margin.top + 8) .attr("class", "heading") .text(partiti[partito]); // ROWS anni.forEach((y, idx) => { const row = svg .append("g") .attr('class', 'row ' + partito + '-' + anni[idx]) .style('transform', `translateY(${margin.top + titleH + ((idx - 0.5) * rowH )}px)`); // LINEA row .append("line") .style("stroke", "#C8C8C8") .style("stroke-width", 2) .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", 0) .attr("y2", 0); // TESTO ANNO row .append("text") .attr("class", "year") .attr("x", margin.left) .attr("y", - 5) .attr("class", "year") .text(anni[idx]); const cluster = names[idx] const sorted_data = [...cluster[partito]].sort((a, b) => a[0] == n_cluster ? 0 : -1); // MARKER PER I CLUSTER const groups = row .selectAll("g") .data(sorted_data) .join("g") .attr("class", "cluster_marker") .on("mouseover", (event) => { d3.select(event.currentTarget) .select('text') .style('fill', 'white'); // TODO: show beeswarm // TODO: apply forces for beeswarm }) .on("mouseout", (event) => { d3.select(event.currentTarget) .select('text') .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent") }); groups .append("circle") .attr("cx", (row) => scale(row[1])) .attr("cy", 0) .attr("r", circleR) .attr("fill", (row) => row[0] == n_cluster ? "#f64b4b" : "rgb(128,128,128,0.7)"); groups .append("text") .attr("x", (row) => scale(row[1]) - 3.5) .attr("y", 3.5) .attr("class", "label") .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent") .text(row => row[0]); }); // BEESWARM const bees = svg .append("g") .attr('class', 'beeswarm'); // TODO: create circles for sections.. // bees.selectAll('circle')... // ASSE svg .append("g") .attr('class', 'axis') .call(d3.axisTop(scale).ticks(5).tickFormat(d3.format(".0%")).tickSize(0)) .style("transform", `translateY(${h - margin.bottom - 10}px`) .call((g) => g.select(".domain").remove()); return svg.node(); } 36:T1aed,chart4 = { function calc_mean(sezioni, party_perc) { return d3.mean(sezioni, row => row[party_perc]) } input.datasets.forEach((dataset) => { const arr = []; for (var party of parties_perc) { arr[party] = d3.rollup(dataset.sezioni, x => calc_mean(x, party) , row => row.cluster) arr[party] = Array.from(arr[party].entries()) } dataset.means = arr; }) function updateSizes(collapsed) { if (collapsed) { titleH = 35; rowH = 13; footerH = 24; circleR = 6; } else { titleH = 60; rowH = 28; footerH = 2; circleR = 11; } h = margin.top + titleH + (rowH * input.datasets.length) + footerH + margin.bottom; } function transition() { svg.transition().attr('height', h); svg.select('rect').transition().attr('height', h); svg.select('.axis').transition().style("transform", `translateY(${h - margin.bottom - 10}px`) collapse.select('path').transition().style("transform", collapsed ? "translateY(-2px) rotate(180deg)" : "translateY(0px) rotate(0deg)"); collapse.select('text').text(collapsed ? 'show more' : 'show less') svg.selectAll('.row').transition().style('transform', (d, i) => { const ypos = margin.top + titleH + ((i - 0.5) * rowH); return `translateY(${ypos}px)`; }); svg.selectAll('.year').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('.cluster_marker text').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('circle').transition().attr('r', circleR); svg.selectAll("line").transition().style("stroke-width", collapsed ? 1 : 2); } function updateBeeswarm(ds, ncluster, idx) { const data = [...ds.sezioni.filter(d => d.cluster === parseInt(ncluster))]; data.forEach(d => { d.x = scale(d[ds.party]); d.y = margin.top + titleH + ((idx - 0.5) * rowH ) + (Math.random() * rowH) - (rowH/2); }); const max_vot = d3.max(data, d => d['vv']); const rScale = d3.scaleSqrt().domain([0, max_vot]).range([0, 2]) const force = d3.forceSimulation(data) .force('forceX', d3.forceX(d => scale(d[ds.party])).strength(.01)) .force('forceY', d3.forceY(margin.top + titleH + ((idx - 0.5) * rowH )).strength(0.25)) .force('collide', d3.forceCollide(d => rScale(d['vv']) + 0.2)) .on("tick", () => nodes.attr("cx", d => d.x).attr("cy", d => d.y)); const nodes = bees.selectAll("circle") .data(data) .join("circle") .attr("r", d => rScale(d['vv'])) .style("fill", "rgba(0, 0, 0, 0.35)"); } function toggleMarkers(d, visible) { if (visible) { svg.selectAll(".cluster_marker").transition().style("opacity", x => d === x ? 1 : 0.5); } else { svg.selectAll(".cluster_marker").transition().style("opacity", 1); } } let rowH, titleH, footerH, circleR, h; let margin = { top: 20, right: 20, bottom: 5, left: 20 }; let collapsed = false; updateSizes(collapsed); // Scala condivisa var scale = d3 .scaleLinear() .range([margin.left+10, width - (10+ margin.right)]) .nice(); if (input.datasets[0].party === 'affluenza') {scale = scale.domain([0, 0.85]) } else {scale = scale.domain([0, 0.4])} // SVG const svg = d3.create("svg") .attr("width", width) .attr("height", h) // BACKGROUND svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", h) .attr("stroke", "#d4d4d4") .attr("stroke-width", "2px") .attr("fill", "#ebebeb"); // BEESWARM const bees = svg .append("g") .attr('class', 'beeswarm'); // COLLAPSE BUTTON const collapse = svg.append('g') .attr('class', 'collapse_btn') .attr("transform", `translate(${width - margin.right - 10} ${margin.top + 5})`) .on("click", () => { collapsed = !collapsed; updateSizes(collapsed); transition(); }); collapse .append("text") .attr("text-anchor", "end") .text(collapsed ? 'show more' : 'show less'); collapse .append("path") .style("transform", `rotate(${ collapsed ? 180 : 0}deg)`) .attr("d", d3.symbol(d3.symbolTriangle).size(20)); collapse .append("rect") .attr("width", 40) .attr("height", 40) .attr("x", -20) .attr("y", -20) .attr("fill", "transparent"); // HEADING // Dobbiamo capire per i partiti che rappresentano la stessa cosa tipo monti e azione e Italia Viva svg .append("text") .attr("x", margin.left) .attr("y", margin.top + 8) .attr("class", "heading") .text(input.title); // ROWS input.datasets.forEach((ds, idx) => { console.log(ds); const row = svg .append("g") .attr('class', 'row ' + ds.party + '-' + ds.year) .style('transform', `translateY(${margin.top + titleH + ((idx - 0.5) * rowH )}px)`); // LINEA row .append("line") .style("stroke", "rgba(0, 0, 0, 0.1)") //#C8C8C8 .style("stroke-width", 2) .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", 0) .attr("y2", 0); // TESTO ANNO row .append("text") .attr("class", "year") .attr("x", margin.left) .attr("y", - 5) .attr("class", "year") .text(ds.year); const cluster = ds.means; const sorted_data = [...cluster[ds.party]].sort((a, b) => a[0] == n_cluster ? 0 : -1); // MARKER PER I CLUSTER const groups = row .selectAll("g") .data(sorted_data) .join("g") .attr("class", "cluster_marker") .on("mouseover", (event, d) => { d3.select(event.currentTarget) .select('text') .style('fill', 'white'); bees.selectAll("circle").transition().style("opacity", 1); updateBeeswarm(ds, d[0], idx); toggleMarkers(d, true); }) .on("mouseout", (event, d) => { d3.select(event.currentTarget) .select('text') .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent"); bees.selectAll("circle").transition().style("opacity", 0); toggleMarkers(d, false) }); groups .append("circle") .attr("cx", (row) => scale(row[1])) .attr("cy", 0) .attr("r", circleR) .attr("fill", (row) => row[0] == n_cluster ? "#f64b4b" : "rgb(128,128,128,0.7)"); groups .append("text") .attr("x", (row) => scale(row[1]) - 3.5) .attr("y", 3.5) .attr("class", "label") .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent") .text(row => row[0]); }); // ASSE svg .append("g") .attr('class', 'axis') .call(d3.axisTop(scale).ticks(5).tickFormat(d3.format(".0%")).tickSize(0)) .style("transform", `translateY(${h - margin.bottom - 10}px`) .call((g) => g.select(".domain").remove()); return svg.node(); } 37:Tdc6,chart3 = { const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const partiti = { "sel%": "Sinistra, Ecologia e Libertà", "pd%": "Partito Democratico", "ln%": "Lega Nord", "fdi%": "Fratelli d Italia ", "fi%": "Forza Italia", "m5s%": "Movimento 5 Stelle" }; // Qua calcolerei l'altezza sulla base delle righe const rowHeight = 17; const titleHeight = 60; const footerHeight = 30; const h = titleHeight + rowHeight * anni.length + footerHeight; var scale = d3 .scaleLinear() .domain([0, 0.4]) .range([margin.left + 10, width - (10 + margin.right)]) .nice(); const svg = d3.create("svg").attr("width", width).attr("height", h); //RETTANGOLO svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", h) .attr("stroke", "#d4d4d4") .attr("stroke-width", "2px") .attr("fill", "#ebebeb"); // for ( var i = 1; i < 4; i++ ){ // cluster_means = years[i] // qui devo fare il loop e quindi 3 linee (con diversa y e la stessa sarà per i cerchi di quell'anno ) // ------------------------------------------------------------------ // QUI FACCIO LE COSE SINGOLARMENTE (POI CAPISCO COME METTERLE NEL LOOP) // 2013 anni.forEach((y, idx) => { const row = svg.append("g") row .append("line") .style("stroke", "rgb(128,128,128,0.5)") .style("stroke-width", 2) .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", titleHeight + rowHeight * idx) .attr("y2", titleHeight + rowHeight * idx); // svg // .append("text") // .attr("x", margin.left) // .attr("y", (titleHeight + rowHeight * idx) - 5) // .attr("class", "heading") // .style("fill", "black") // .style("font-size", "10px") // .text(anni[idx]); const cluster = names[idx] console.log('names', names, idx) const sorted_data = [...cluster[partito]].sort((a, b) => a[0] == n_cluster ? 0 : -1); const groups = row.selectAll("g").data(sorted_data).join("g"); groups .append("circle") .attr("cx", (row) => scale(row[1])-1) .attr("cy", titleHeight + rowHeight * idx) .attr("r", 7) .attr("fill", (row) => row[0] == n_cluster ? "#f64b4b" : "rgb(128,128,128,0.7)" ); groups .append("text") .attr("x", (row) => scale(row[1])-3.5) .attr("y", titleHeight + rowHeight * idx+3.5) .attr("class", "heading") .style("font-size", "10px") .style('fill', (row) => row[0] == n_cluster ? "white" : "rgb(128,128,128,0)") .text(row => row[0]); }); //---------------------------------------------------------------------------------- //lui sta bene da solo (nel metto solo uno poi dobbiamo capire per i partiti che rappresentano la stessa cosa tipo monti e azione e Italia Viva) svg .append("text") .attr("x", margin.left) .attr("y", margin.top + 8) .attr("class", "heading") .style("fill", "black") .style("font-size", "12px") .text(partiti[partito]); // provo a fare il pop-up che esce dal pallino del cluster //tooltip dovrebbe essere l'elemento che porta fuori il // const tooltip = svg.append("g") // .style("pointer-events", "none"); svg .append("g") .call(d3.axisTop(scale).ticks(5).tickFormat(d3.format(".0%")).tickSize(0)) .style("transform", `translateY(${h - footerHeight+10}px`) .call((g) => g.select(".domain").remove()); return svg.node(); }38:T7c1,chart2 = { const margin = { top: 20, right: 40, bottom: 20, left: 40 }; // Qua calcolerei l'altezza sulla base delle righe const rowHeight = 30; const titleHeight = 60; const footerHeight = 30; //const h = titleHeight + rowHeight * anni.length + footerHeight; const h= 350 const svg = d3.create("svg") .attr("height", h) .attr("width", width) const row = svg.append("g") .append("line") .style("stroke", "rgb(128,128,128,0.5)") .style("stroke-width", 2) .attr("x1", 0) .attr("x2", width) .attr("y1", h/2) .attr("y2", h/2); //carico i dati e seleziono il cluster const data = cluster_percent_2013.filter(d => d.cluster === parseInt(n_cluster)); // qui seleziono il massimo di votanti per settare il range della dimensione dei cerchi // metto gia il filtro sul cluster così prendo il massimo che c'è li const max_vot = d3.max(data, d => d['vv']); const xScale = d3.scaleLinear().domain([0,0.8]).range([margin.left + 10, width - (10 + margin.right)]).clamp(true) const rScale = d3.scaleSqrt().domain([0, max_vot]).range([0, 4]) const force = d3.forceSimulation(data) .force('forceX', d3.forceX(d => xScale(d[partito])).strength(2)) .force('forceY', d3.forceY(h/2).strength(0.1)) .force('collide', d3.forceCollide(d => rScale(d['vv']) + 0.5)) .stop() const NUM_ITERATIONS = 600; for (let i = 0; i < NUM_ITERATIONS; ++i) { force.tick(); }; force.stop(); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => rScale(d['vv'])) .style("fill", "rgba(0, 0, 0, 0.5)");//#bdbdbd svg .append("g") .call(d3.axisTop(xScale).ticks(5).tickFormat(d3.format(".0%")).tickSize(0)) .style("transform", `translateY(${h - footerHeight+10}px`) .call((g) => g.select(".domain").remove()); return svg.node(); }39:T1a64,chart5 = { function calc_mean(sezioni, party_perc) { return d3.mean(sezioni, row => row[party_perc]) } input_socio.datasets.forEach((dataset) => { const arr = []; for (var ind of socio_indicatori) { arr[ind] = d3.rollup(dataset.sezioni, x => calc_mean(x, ind), row => row.cluster) arr[ind] = Array.from(arr[ind].entries()) } dataset.means = arr; }) function updateSizes(collapsed) { if (collapsed) { titleH = 35; rowH = 13; footerH = 24; circleR = 6; } else { titleH = 60; rowH = 28; footerH = 2; circleR = 11; } h = margin.top + titleH + (rowH * input_socio.datasets.length) + footerH + margin.bottom; } function transition() { svg.transition().attr('height', h); svg.select('rect').transition().attr('height', h); svg.select('.axis').transition().style("transform", `translateY(${h - margin.bottom - 10}px`) collapse.select('path').transition().style("transform", collapsed ? "translateY(-2px) rotate(180deg)" : "translateY(0px) rotate(0deg)"); collapse.select('text').text(collapsed ? 'show more' : 'show less') svg.selectAll('.row').transition().style('transform', (d, i) => { const ypos = margin.top + titleH + ((i - 0.5) * rowH); return `translateY(${ypos}px)`; }); svg.selectAll('.year').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('.cluster_marker text').transition().style('opacity', collapsed ? 0 : 1); svg.selectAll('circle').transition().attr('r', circleR); svg.selectAll("line").transition().style("stroke-width", collapsed ? 1 : 2); } function updateBeeswarm(ds, ncluster, idx) { const data = [...ds.sezioni.filter(d => d.cluster === parseInt(ncluster))]; data.forEach(d => { d.x = scale(d[ds.party]); d.y = margin.top + titleH + ((idx - 0.5) * rowH ) + (Math.random() * rowH) - (rowH/2); }); const force = d3.forceSimulation(data) .force('forceX', d3.forceX(d => scale(d[ds.party])).strength(.01)) .force('forceY', d3.forceY(margin.top + titleH + ((idx - 0.5) * rowH )).strength(0.25)) .force('collide', d3.forceCollide(2.2)) .on("tick", () => nodes.attr("cx", d => d.x).attr("cy", d => d.y)); const nodes = bees.selectAll("circle") .data(data) .join("circle") .attr("r", 2) .style("fill", "rgba(0, 0, 0, 0.35)"); } function toggleMarkers(d, visible) { if (visible) { svg.selectAll(".cluster_marker").transition().style("opacity", x => d === x ? 1 : 0.5); } else { svg.selectAll(".cluster_marker").transition().style("opacity", 1); } } let rowH, titleH, footerH, circleR, h; let margin = { top: 20, right: 20, bottom: 5, left: 20 }; let collapsed = false; updateSizes(collapsed); // Scala condivisa var scale = d3 .scaleLinear() .range([margin.left+10, width - (10+ margin.right)]) .nice(); if (input_socio.datasets[0].party === 'affluenza') {scale = scale.domain([0, 0.85]) } else {scale = scale.domain([0.1, 1])} // SVG const svg = d3.create("svg") .attr("width", width) .attr("height", h) // BACKGROUND svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", h) .attr("stroke", "#d4d4d4") .attr("stroke-width", "2px") .attr("fill", "#ebebeb"); // BEESWARM const bees = svg .append("g") .attr('class', 'beeswarm'); // COLLAPSE BUTTON const collapse = svg.append('g') .attr('class', 'collapse_btn') .attr("transform", `translate(${width - margin.right - 10} ${margin.top + 5})`) .on("click", () => { collapsed = !collapsed; updateSizes(collapsed); transition(); }); collapse .append("text") .attr("text-anchor", "end") .text(collapsed ? 'show more' : 'show less'); collapse .append("path") .style("transform", `rotate(${ collapsed ? 180 : 0}deg)`) .attr("d", d3.symbol(d3.symbolTriangle).size(20)); collapse .append("rect") .attr("width", 40) .attr("height", 40) .attr("x", -20) .attr("y", -20) .attr("fill", "transparent"); // HEADING // Dobbiamo capire per i partiti che rappresentano la stessa cosa tipo monti e azione e Italia Viva svg .append("text") .attr("x", margin.left) .attr("y", margin.top + 8) .attr("class", "heading") .text(input_socio.title); // ROWS input_socio.datasets.forEach((ds, idx) => { console.log(ds); const row = svg .append("g") .attr('class', 'row ' + ds.party + '-' + ds.year) .style('transform', `translateY(${margin.top + titleH + ((idx - 0.5) * rowH )}px)`); // LINEA row .append("line") .style("stroke", "rgba(0, 0, 0, 0.1)") //#C8C8C8 .style("stroke-width", 2) .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", 0) .attr("y2", 0); // TESTO ANNO row .append("text") .attr("class", "year") .attr("x", margin.left) .attr("y", - 5) .attr("class", "year") .text(ds.year); const cluster = ds.means; const sorted_data = [...cluster[ds.party]].sort((a, b) => a[0] == n_cluster ? 0 : -1); // MARKER PER I CLUSTER const groups = row .selectAll("g") .data(sorted_data) .join("g") .attr("class", "cluster_marker") .on("mouseover", (event, d) => { d3.select(event.currentTarget) .select('text') .style('fill', 'white'); bees.selectAll("circle").transition().style("opacity", 1); updateBeeswarm(ds, d[0], idx); toggleMarkers(d, true); }) .on("mouseout", (event, d) => { d3.select(event.currentTarget) .select('text') .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent"); bees.selectAll("circle").transition().style("opacity", 0); toggleMarkers(d, false) }); groups .append("circle") .attr("cx", (row) => scale(row[1])) .attr("cy", 0) .attr("r", circleR) .attr("fill", (row) => row[0] == n_cluster ? "#f64b4b" : "rgb(128,128,128,0.7)"); groups .append("text") .attr("x", (row) => scale(row[1]) - 3.5) .attr("y", 3.5) .attr("class", "label") .style('fill', (row) => row[0] == n_cluster ? "white" : "transparent") .text(row => row[0]); }); // ASSE svg .append("g") .attr('class', 'axis') .call(d3.axisTop(scale).ticks(5).tickFormat(d3.format(".0%")).tickSize(0)) .style("transform", `translateY(${h - margin.bottom - 10}px`) .call((g) => g.select(".domain").remove()); return svg.node(); } 3a:[{"id":"d3e958be873989a68573eddc636e8c9cd303ef5f294a3cfa14083b755cc6379526405a65c33ad63900f1c29f9daaf4eed9ac5f8b06e96c6d9a001eb2ae892cc1","href":"https://static.observableusercontent.com/files/d3e958be873989a68573eddc636e8c9cd303ef5f294a3cfa14083b755cc6379526405a65c33ad63900f1c29f9daaf4eed9ac5f8b06e96c6d9a001eb2ae892cc1","name":"torino_camera_2013.csv","type":"text/csv","lastModified":1682075164322.884,"size":34695},{"id":"92f027cab80fd8c2a52135a539e65859b97056e799365651a390008ecc979a2ffdab1d85d5b1743cd494d6e5e46b93d86894706821e3a5f00af8f214e86eb722","href":"https://static.observableusercontent.com/files/92f027cab80fd8c2a52135a539e65859b97056e799365651a390008ecc979a2ffdab1d85d5b1743cd494d6e5e46b93d86894706821e3a5f00af8f214e86eb722","name":"torino_civici.csv","type":"text/csv","lastModified":1682086996195.331,"size":2156883},{"id":"06fe31b6e37bff8d39b962455d75a26326f5b66a31238d3c7fcec0c9fae15f78e500a55295482467b0bbc85a74723bfbd987a62bdeed6e38b375aea567a08661","href":"https://static.observableusercontent.com/files/06fe31b6e37bff8d39b962455d75a26326f5b66a31238d3c7fcec0c9fae15f78e500a55295482467b0bbc85a74723bfbd987a62bdeed6e38b375aea567a08661","name":"milano_camera_2013.csv","type":"text/csv","lastModified":1679329443473.757,"size":47985},{"id":"1ab48a19e340d5ef651ce0385a28c313eebd9f562d8a64ca1590c355d18c1aa10fd0035e6e59b2e6bb6dcae544fe3e6acd86237bbc909120cbcce7aacb834209","href":"https://static.observableusercontent.com/files/1ab48a19e340d5ef651ce0385a28c313eebd9f562d8a64ca1590c355d18c1aa10fd0035e6e59b2e6bb6dcae544fe3e6acd86237bbc909120cbcce7aacb834209","name":"milano_camera_2018.csv","type":"text/csv","lastModified":1680541665251.06,"size":44119},{"id":"252d3530463964294b5a8a1f80ba36140dd6b015e3cccc6e85308e23d4681507aa9739a0f2d37c01c2f1982e3ed4bda21b801b538bea37ebc62c3bcb9d87d995","href":"https://static.observableusercontent.com/files/252d3530463964294b5a8a1f80ba36140dd6b015e3cccc6e85308e23d4681507aa9739a0f2d37c01c2f1982e3ed4bda21b801b538bea37ebc62c3bcb9d87d995","name":"torino_camera_2018.csv","type":"text/csv","lastModified":1682075174917.9,"size":31983},{"id":"f4dd317d75863aa6c9669e84d680588004827f5c9afb5f964c33573d7ac5882f967bccbe9c7159e11acca6de58b127146bcba2fd5b93537fe6d82c8e349976c1","href":"https://static.observableusercontent.com/files/f4dd317d75863aa6c9669e84d680588004827f5c9afb5f964c33573d7ac5882f967bccbe9c7159e11acca6de58b127146bcba2fd5b93537fe6d82c8e349976c1","name":"torino_camera_2022.csv","type":"text/csv","lastModified":1682075183348.045,"size":34049},{"id":"ad3459ee1435adad54cecd0681d7dbbab25f8662c591731975442ddde7c1a4b3ff1d5d5dbee2c5c3a76d12c7108e636430d56f69e5fcca1e7c556262dfbd443f","href":"https://static.observableusercontent.com/files/ad3459ee1435adad54cecd0681d7dbbab25f8662c591731975442ddde7c1a4b3ff1d5d5dbee2c5c3a76d12c7108e636430d56f69e5fcca1e7c556262dfbd443f","name":"torino_cluster.csv","type":"text/csv","lastModified":1682075193752.532,"size":9816},{"id":"46cef822c532e8174be32e64a8b4adf22623c3454874586ac485d2dd8a132406f59d9868ed913caf36579a60c884e31fd1d689b8fdf6841f07186824199bc702","href":"https://static.observableusercontent.com/files/46cef822c532e8174be32e64a8b4adf22623c3454874586ac485d2dd8a132406f59d9868ed913caf36579a60c884e31fd1d689b8fdf6841f07186824199bc702","name":"torino_cens_2011.csv","type":"text/csv","lastModified":1682084627823.193,"size":297025},{"id":"2fc50b72bb703426aff7b9cbb8e32010458334e8602a435379343cf97cd3eca2caa168ffe91f80f35b9c574bf1e019c48233e984071dc3243251e9efbe6af159","href":"https://static.observableusercontent.com/files/2fc50b72bb703426aff7b9cbb8e32010458334e8602a435379343cf97cd3eca2caa168ffe91f80f35b9c574bf1e019c48233e984071dc3243251e9efbe6af159","name":"milano_cluster.csv","type":"text/csv","lastModified":1679396180138.778,"size":13803},{"id":"0970c3c6f20543bea33f04ce21e1669a3e5996e3b0a3f3b1d9889140cdfb87532ba819e27be7e01a2c1a6846483f63c51158ad53eebccdac2a41b840e3fd28cd","href":"https://static.observableusercontent.com/files/0970c3c6f20543bea33f04ce21e1669a3e5996e3b0a3f3b1d9889140cdfb87532ba819e27be7e01a2c1a6846483f63c51158ad53eebccdac2a41b840e3fd28cd","name":"Group 3 (1).png","type":"image/png","lastModified":1680166568761.723,"size":90952},{"id":"1dacf4acc92ec852e6a3d7ee4a74aaaa48d05d1095b67dbc8478f11f2f2fed9f69719c2a0f44783947527d2a7607d36ff0a8b32f2f301b2735463d1436f0d8af","href":"https://static.observableusercontent.com/files/1dacf4acc92ec852e6a3d7ee4a74aaaa48d05d1095b67dbc8478f11f2f2fed9f69719c2a0f44783947527d2a7607d36ff0a8b32f2f301b2735463d1436f0d8af","name":"milano_camera_2022.csv","type":"text/csv","lastModified":1680541665261.151,"size":47439}] 30:{"id":"c86d5dafc695a959","slug":null,"title":"Cluster data visualization","thumbnail":"46e4f14f35a806b544c72705ca42d23e079c4208ea365231ebf02c797f9c0ca8","access_level":"public","create_time":"$D2023-03-08T22:13:40.204Z","update_time":"$D2023-08-21T13:31:22.374Z","view_time":null,"first_public_time":"$D2023-03-08T22:13:40.204Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6e14342e91f52f30","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":"starter_2024"},"version":2189,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"508a005ebab6ccf4","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":null}],"members":[{"type":"individual","id":"8526cfdba578f675","login":"ilastanzani","name":"ilaria stanzani","avatar_url":"https://avatars-next.observableusercontent.com/315bb09fc5a48ad7bad32401d97a86bdf1b613eda825237511aad19498676125","tier":null,"role":"editor"},{"type":"individual","id":"508a005ebab6ccf4","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cluster data visualization","cells":[{"id":0,"value":"# Cluster data visualization\n\nTest notebook for cluster data visualization. \n[Learn d3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3) \n[Learn Observable](https://observablehq.com/tutorials)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## Mockup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"$${await FileAttachment(\"Group 3 (1).png\").image({style: \"width: 50%; text-align: center;\"})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"## Main","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"Per prima cosa faccio la funzione per poter unire due array usando una colonna comune ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"function joinArrayByKey (primaryArray, foreignArray, foreignKey){\n // create an object to store the foreign keys and their associated objects\n const foreignKeyMap ={};\n for ( const obj of foreignArray){\n foreignKeyMap[obj[foreignKey]] = obj; \n }\n\n // iterate through the primary array and join each object with its associated for \n const joinedArray=[];\n for (const obj of primaryArray){\n const foreignObj= foreignKeyMap[obj[foreignKey]];\n if (foreignObj){\n joinedArray.push({...obj, ...foreignObj});\n }\n }\n return joinedArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"cluster_2013 = joinArrayByKey(torino_camera_2013, torino_cluster, \"sez_elet\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"torino_camera_2013 = await FileAttachment(\"torino_camera_2013.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_camera_2013","database":"$undefined"},{"id":2086,"value":"torino_camera_2018 = await FileAttachment(\"torino_camera_2018.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_camera_2018","database":"$undefined"},{"id":2087,"value":"torino_camera_2022 = await FileAttachment(\"torino_camera_2022.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_camera_2022","database":"$undefined"},{"id":2088,"value":"torino_cluster = await FileAttachment(\"torino_cluster.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_cluster","database":"$undefined"},{"id":1242,"value":"cluster_2018 = joinArrayByKey(torino_camera_2018, torino_cluster, \"sez_elet\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"cluster_2022 = joinArrayByKey(torino_camera_2022, torino_cluster, \"sez_elet\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"```\n// -> []{sez_elet,iscritti,votanti,vv,pd,sel,m5s,fdi,pdl,ln,monti,cluster,cluster_global}\n \n // calcolare percentuali \"%sel\" (sel/votanti)\n // raggruppare per cluster e calcolare media valore \"%sel\"\n \n // [] {\n // cluster: 1\n // avg: 2.3 \n // }\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"Cluster_percent è array con i cluster , voti e le percentuali dei voti ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"cluster_percent_2013 = {\n parties.forEach(party => {\n cluster_2013.forEach(row => {\n row[party+'%'] = row[party]/row['vv']\n })\n })\n \n // fare lo stesso per affluenza votanti/iscritti\n cluster_2013.forEach(row => {\n row['affluenza'] = row['votanti']/row['iscritti']\n })\n\n return cluster_2013\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"cluster_percent_2018 = {\n parties.forEach(party => {\n cluster_2018.forEach(row => {\n row[party+'%'] = row[party]/row['vv']\n })\n })\n \n // fare lo stesso per affluenza votanti/iscritti\n cluster_2018.forEach(row => {\n row['affluenza'] = row['votanti']/row['iscritti']\n })\n\n return cluster_2018\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"cluster_percent_2022 = {\n parties.forEach(party => {\n cluster_2022.forEach(row => {\n row[party+'%'] = row[party]/row['vv']\n })\n })\n \n // fare lo stesso per affluenza votanti/iscritti\n cluster_2022.forEach(row => {\n row['affluenza'] = row['votanti']/row['iscritti']\n })\n\n return cluster_2022\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"Cluster_means è una specie di dizionario, ogni chiave è un partito e dentro ha la media del dato partito in ogni cluster.\n\nAdesso bisogna fare la visualizzazione con un cerchio per la media di ogni cluster e colorare solo il cluster selezionato ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"cluster_means_2013 = {\n \n let means = {}\n function calc_mean(cluster_percent_2013,party_perc) {\n return d3.mean(cluster_percent_2013, row => row[party_perc])\n }\n for ( var party of parties_perc) {\n //let party_perc = party \n means[party] = d3.rollup(cluster_percent_2013, x => calc_mean(x, party) , row => row.cluster)\n means[party]= Array.from(means[party].entries())\n} \n\n \n return means \n}\n\n// {\n// 'pd': Map(\n// 4 => 0.21997979091272682\n// 1 => 0.28354875966779064\n// 3 => 0.2947442378378588\n// 0 => 0.3197280492810688\n// 2 => 0.28873825802611974\n// ),\n// 'm5s': Map(..)\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"cluster_means_2018 = {\n \n let means = {}\n function calc_mean(cluster_percent_2018,party_perc) {\n return d3.mean(cluster_percent_2018, row => row[party_perc])\n }\n for ( var party of parties_perc) {\n //let party_perc = party \n means[party] = d3.rollup(cluster_percent_2018, x => calc_mean(x, party) , row => row.cluster)\n means[party]= Array.from(means[party].entries())\n} \n\n \n return means \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"cluster_means_2022 = {\n \n let means = {}\n function calc_mean(cluster_percent_2022,party_perc) {\n return d3.mean(cluster_percent_2022, row => row[party_perc])\n }\n for ( var party of parties_perc) {\n //let party_perc = party \n means[party] = d3.rollup(cluster_percent_2022, x => calc_mean(x, party) , row => row.cluster)\n means[party]= Array.from(means[party].entries())\n} \n\n \n return means \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"//Inputs.table(cluster_means['m5s%'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"bycluster_pd13 = {\n function calc_mean(cluster_arr) {\n return d3.mean(cluster_arr, row => row['pd%'])\n }\n \n return d3.rollup(cluster_percent_2013, calc_mean, row => row.cluster)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"function percentage (Array, colonna1, colonna2){\n const arrayPercentage= {};\n const risultato=[];\n for ( const obj of Array){\n arrayPercentage[obj[\"sez_elet\"]] = (obj[colonna1]/obj[colonna2])*100;\n }\n\n \n const elementi_partito= {};\n for ( const obj of Array) {\n const x= Array[obj[\"cluster\"]];\n\n \n risultato.push({...x, ...arrayPercentage});\n }\n\n return risultato;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"Inputs.table(cluster_2013)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"## Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"selezione cluster : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"viewof n_cluster = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"selezione partito : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"viewof partito = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"cluster_means= cluster_means_2018","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"function axis(scale) {\n return Object.assign(d3.axisBottom(scale.range([20, width - 20])), {\n render() {\n return d3.create(\"svg\")\n .attr(\"viewBox\", [0, -10, width, 33])\n .call(this)\n .node();\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"## Ora faccio la visualizzazione con i tre anni insieme ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1234,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"input = {\n return {\n title: parties_labels[partito],\n datasets: [\n {\n year: \"2013\",\n party: partito,\n sezioni: cluster_percent_2013\n },\n {\n year: \"2018\",\n party: partito,\n sezioni: cluster_percent_2018\n },\n {\n year: \"2022\",\n party: partito,\n sezioni: cluster_percent_2022\n },\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1873,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"## visualizzazione con i 3 anni insieme però molto molto vicini","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1336,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"## Vado a vedere il singolo cluster per vedere la distribuzione dei voti nelle sezioni elettorali ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":846,"value":"per ogni cluster voglio far vedere la distribuzione di voti per un dato partito ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":832,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2017,"value":"Plot.rectY(cluster_percent_2013, Plot.binY({y: \"pd\"} , {x: \"sez_elet\"})).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2029,"value":"Plot.plot({\n grid: true,\n marks: [\n Plot.rectY(cluster_percent_2013, Plot.binX({y:'count'}, {x: \"pd\"})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"dotplot = Plot.dot(cluster_percent_2013, {x: \"sez_elet\", y: \"pd\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"Plot.rect(cluster_percent_2013 , Plot.bin({fillOpacity: \"count\"}, {x: \"pd\"})).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"# visualizzazione per i socioeconomici","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2116,"value":"cens_elet = joinArrayByKey(torino_civici, torino_cens_2011, \"sez_cens\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"cluster_cens= joinArrayByKey(cens_elet, torino_cluster, \"sez_elet\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2122,"value":"cluster_means_cens = {\n \n function calc_mean(l) {\n let obj = {\n sez_elet: l[0].sez_elet,\n cluster: l[0].cluster,\n cluster_global: l[0].cluster_global,\n };\n socio_indicatori.forEach(i => obj[i] = d3.mean(l, x => x[i]));\n return obj;\n }\n\n let means = d3.rollup(cluster_cens, x => calc_mean(x) , row => row.sez_elet)\n return Array.from(means.values())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2158,"value":"indicatore = \"%maturita\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2155,"value":"input_socio = {\n return {\n title: socio_labels[indicatore],\n datasets: [\n {\n year: \"\",\n party: indicatore,\n sezioni: cluster_means_cens,\n }\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2108,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"{var data = [\n {\n histfunc: \"count\",\n y: (cluster_percent_2013,d => d['pd']), \n x: (cluster_percent_2013,d => d['sez_elet']),\n type: \"histogram\",\n name: \"count\"\n }]\n\nPlot.plot( data)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"## Global Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"height = 130","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"height_2 = 220","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"anni = [2013, 2018,2022] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"names = [cluster_means_2013, cluster_means_2018, cluster_means_2022];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"parties = ['pd', 'sel', 'm5s', 'fdi', 'pdl', 'ln', 'monti']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"parties_labels = ({\n \"sel%\": \"Sinistra, Ecologia e Libertà\",\n \"pd%\": \"Partito Democratico\",\n \"ln%\": \"Lega Nord\",\n \"fdi%\": \"Fratelli d Italia \",\n \"fi%\": \"Forza Italia\",\n \"m5s%\": \"Movimento 5 Stelle\",\n \"affluenza\": \"Affluenza\"\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2163,"value":"socio_indicatori = [\"%maschi_occupati\", \"%femmine_occupate\", \"%occupati\", \"%disoccupati_alla_ricerca\", \"%analfabeti\", \"%maturita\", \"%spostamento_fuori_comune\", \"%spostamento_nel_comune\", \"%famiglie_numerose\", \"%foreignISTAT\", \"%femaleISTAT\", \"old_age_indexISTAT\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2174,"value":"socio_labels= ({\n \"%maschi_occupati\": '% uomini residenti occupati ',\n \"%femmine_occupate\":'% donne residenti occupati', \n \"%occupati\": '%residenti occupati', \n \"%disoccupati_alla_ricerca\": '% disoccupati residenti alla ricerca', \n \"%analfabeti\": '% analfbeti residenti', \n \"%maturita\": '% residenti con almeno la maturità', \n \"%spostamento_fuori_comune\":' %residenti che si spostano fuori dal comune per lavoro', \n \"%spostamento_nel_comune\":'%residenti che si spostano dentro al comune per lavoro', \n \"%famiglie_numerose\":'% famiglie con più di 4 membri ', \n \"%foreignISTAT\":'% stranieri residenti ', \n \"%femaleISTAT\":' % donne residenti ', \n \"old_age_indexISTAT\":'old age index'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"parties_perc = ['pd%', 'sel%', 'm5s%', 'fdi%', 'pdl%', 'ln%', 'monti%','affluenza']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"milano_cluster = await FileAttachment(\"milano_cluster.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"milano_cluster","database":"$undefined"},{"id":373,"value":"milano_voti = await FileAttachment(\"milano_camera_2013.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"milano_voti","database":"$undefined"},{"id":388,"value":"viewof cluster_table_2013 = Inputs.table(cluster_means_cens)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"torino_civici = await FileAttachment(\"torino_civici.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_civici","database":"$undefined"},{"id":1240,"value":"milano_camera_2018 = await FileAttachment(\"milano_camera_2018.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"milano_camera_2018","database":"$undefined"},{"id":1241,"value":"milano_camera_2022 = await FileAttachment(\"milano_camera_2022.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"milano_camera_2022","database":"$undefined"},{"id":2102,"value":"torino_cens_2011 = await FileAttachment(\"torino_cens_2011.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"torino_cens_2011","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 31:"$30:body"