2d:null 2e:["$","title",null,{"children":"Progettone Turismo: grafici e visualizzazioni | Gianluca Sperduti | Observable"}] 33:T56b,radar = { const data = radarData.map(d => ({ type: 'scatterpolar', r: d.dati.map(s => s.value).concat(d.dati.map(s => s.value)[0]), // .concat(...) serve per copiare il primo valore della serie in fondo all'array. Serve per chiudere la line theta: d.dati.map(s => s.axis).concat(d.dati.map(s => s.axis)[0]), // fill: 'toself', // crea il riempimento name: d.nome, visible: d.nome == "Toscana" ? true : 'legendonly', opacity: 0.5, line: { width: 2, shape: 'spline' // questo crea uno smooth delle linee // color: 'red' // qui potete passare una funzione per assegnare colori personalizzati }, marker: { size: 8 }, // un template html per formattare il box visibile al passggio del mouse hovertemplate: '%{theta}' + '
%{r:.2f}
' + "" })); const layout = { //width: width, //height: (width / 3) * 2, polar: { angularaxis: { linewidth: 1, color: 'gray', showline: false }, radialaxis: { gridcolor: 'white', gridwidth: 2, visible: true, range: [0, 1.05], // il range dell'asse [min,max] color: 'gray', showline: false }, bgcolor: 'rgb(245,245,245)' // colore di sfondo } }; const div = DOM.element('div'); Plotly.newPlot(div, data, layout); return div; }34:Tc26,chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height_s]); const {nodes, links} = sankey(data_s); svg.append('g') .attr('stroke', '#000') .selectAll('rect') .data(nodes) .join('rect') .attr('x', d => d.x0) .attr('y', d => d.y0) .attr('height', d => d.y1 - d.y0) .attr('width', d => d.x1 - d.x0) .attr('fill', color) .on('mouseover', showConnection) .on('mouseout', hideConnection) .append('title') .text(d => d.name); const link = svg.append('g') .attr('fill', 'none') .selectAll('g') .data(links) .join('g'); if (edgeColor === 'path') { const gradient = link.append('linearGradient') .attr('id', d => (d.uid = DOM.uid('link')).id) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', d => d.source.x1) .attr('x2', d => d.target.x0); gradient.append('stop') .attr('offset', '0%') .attr('stop-color', d => color(d.source)); gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => color(d.target)); } link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => edgeColor === 'none' ? '#aaa' : edgeColor === 'path' ? d.uid : edgeColor === 'input' ? color(d.source) : color(d.target)) .attr('stroke-width', '1px'); link.append('title') .text(d => `${d.source.name} → ${d.target.name}`); svg .append('g') .attr('font-family', 'sans-serif') .attr('font-size', 12) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) .clone(true).lower() .attr('stroke', 'white'); function showConnection(d) { const linkedNodes = []; var traverse = [{ linkType : 'sourceLinks', nodeType : 'target', }, { linkType : 'targetLinks', nodeType : 'source', }]; traverse.forEach((step) => { d[step.linkType].forEach((l) => { linkedNodes.push(l[step.nodeType]); }); }); // Update linked nodes style d3.selectAll('rect').style( 'opacity', r => linkedNodes.find(remainingNode => remainingNode.name === r.name) ? '1' : '0.5' ); // Update hovered node style d3.select(this).style('opacity', '1'); // Update links style d3.selectAll('path').style( 'opacity', p => (p && (p.source.name === d.name || p.target.name === d.name)) ? '1' : '0.5' ); d3.selectAll('path').attr( 'stroke-width', p => (p && (p.source.name === d.name || p.target.name === d.name)) ? '4px' : '1px' ); } function hideConnection() { // Update nodes style d3.selectAll('rect').style('opacity', '1'); // Update links style d3.selectAll('path').style('opacity', '1'); d3.selectAll('path').attr('stroke-width', '1px'); } return svg.node(); }35:T497,heat = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:100%px;height:400px`, gestureHandling: true }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it.‎43,7874; 11,2499 let map = L.map(container).setView([43.7874, 11.2499], 9); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); let choleraLayer = heatLayer(choleraPoints).addTo(map); }36:[{"id":"472295acef61942cc30f3c5cc1ed8a774dad09f32058d1eb19b7749f20b8d77fed133e492abe3d3c2b7830ae4faf948d822ed5cef7d847f821562140c665e570","href":"https://static.observableusercontent.com/files/472295acef61942cc30f3c5cc1ed8a774dad09f32058d1eb19b7749f20b8d77fed133e492abe3d3c2b7830ae4faf948d822ed5cef7d847f821562140c665e570","name":"radar_list_norm-1.txt","type":"text/plain","lastModified":1593788842944.725,"size":11692}] 31:{"id":"fc214340e64aea19","slug":"progettone-turismo-grafici-e-visualizzazioni","title":"Progettone Turismo: grafici e visualizzazioni","thumbnail":"84af0f7eb9b5657ffb97f9a19ec4f378d29deb406e285398ee6ffce08717a5e3","access_level":"public","create_time":"$D2020-07-03T14:57:31.091Z","update_time":"$D2020-07-07T20:01:01.450Z","view_time":null,"first_public_time":"$D2020-07-03T16:25:49.309Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4b7650750f426af1","login":"justlemonsong","name":"Gianluca Sperduti","avatar_url":"https://avatars-next.observableusercontent.com/4fd6887aa3e253879045744df95da6f0694cda044036139997c194f539f63e67","tier":"starter_2024"},"version":385,"publish_version":385,"role":null,"authored":false,"authors":[{"type":"individual","id":"99a5263b394bb1b4","login":"justlemonsong","name":"Gianluca Sperduti","avatar_url":"https://avatars-next.observableusercontent.com/4fd6887aa3e253879045744df95da6f0694cda044036139997c194f539f63e67","tier":null}],"members":[{"type":"individual","id":"99a5263b394bb1b4","login":"justlemonsong","name":"Gianluca Sperduti","avatar_url":"https://avatars-next.observableusercontent.com/4fd6887aa3e253879045744df95da6f0694cda044036139997c194f539f63e67","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Progettone Turismo: grafici e visualizzazioni","cells":[{"id":0,"value":"md`# Progettone Turismo: grafici e visualizzazioni`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### Horizontal Bar Chart Plotly`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"bar = {\n const data0 = [{\n type: 'bar',\n x: [0.440, 0.067, 0.060, 0.045, 0.024, 0.016, 0.011, 0.010],\n y: [\"Firenze\", \"Pisa\", \"Siena\", \"Lucca\", \"s. Gimignano\", \"Livorno\", \"Portoferraio\", \"Arezzo\"],\n orientation: 'h',\n }];\n \n var layout = {\n title: 'Le 8 città più visitate della Toscana.',\n yaxis: {autorange: \"reversed\"},\n barmode: 'stack'\n };\n \n const div = DOM.element('div');\n Plotly.newPlot(div, data0, layout);\n return div; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`### Radar Chart Plotly`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"radarData = FileAttachment(\"radar_list_norm-1.txt\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Sankey with filter and d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`#### Data import for Sankey`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof dd1 = select({\n title: \"Dimmi da dove vieni e ti dirò dove vai.\",\n description: \"Scegli la città che preferisci.\",\n options: d3.map(input, function(d){return d.provincia;}).keys(),\n value: \"Pisa\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof edgeColor = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"input\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeId(d => d.name)\n .nodeWidth(10)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height_s - 5]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"input = d3.csv(sankey_csv, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"data_s = {\n const links = Fdata;\n const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name}));\n \n return {nodes, links};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"Fdata = input.filter(d => d.provincia === dd1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"sankey_csv = 'https://raw.githubusercontent.com/JohnPFL/ciao/master/sankey_pr_3.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"width_s = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"height_s = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`## TreeMap - Tableau`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`https://eu-west-1a.online.tableau.com/t/gianlucasperduti/views/definitivo-TreeMap/Sheet1?:showAppBanner=false&:display_count=n&:showVizHome=n&:origin=viz_share_link`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`## Flourish - Hub vs destinazioni nascoste`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`https://public.flourish.studio/visualisation/3054941/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`## Leaflet Heatmap with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"data_l = d3.csv(\n 'https://raw.githubusercontent.com/gpachera/gian_public/master/csv_leaflet.csv'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"fdata_l = data_l.filter(d => d['n_reviews']!=0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"normalize = d3\n .scaleLinear()\n .domain([0, d3.max(fdata_l.map(d => d['n_reviews']))])\n .range([0, 100]) // increase this number to change final scale values","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"choleraPoints = fdata_l.map(d => {\n return [\n +d['lat'],\n +d['long'],\n +normalize(d['n_reviews'])\n ];\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"(d3.extent(fdata_l.map(d => +d['lat'])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"xCenter = d3.mean(d3.extent(fdata_l.map(d => +d['lat'])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"yCenter = d3.mean(d3.extent(fdata_l.map(d => +d['long'])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"heatLayer = (L, require('leaflet.heat').catch(() => L.heatLayer))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"