31:T9a8,chartBubble = { const root = pack(hdata); let focus = root; let view; const svg = d3.select(DOM.svg(width, height)) // The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("width", "calc(100% + 28px)") .style("height", "auto") .style("background", null) .style("cursor", "pointer") .on("click", () => zoom(root)); const node = svg.append("g") .selectAll("circle") .data(root.descendants().slice(0)) //slice(1) rimuove la root .join("circle") .attr("fill", d => d.children ? color(d.depth) : "white") .attr("pointer-events", d => !d.children ? "none" : null) .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); }) .on("mouseout", function() { d3.select(this).attr("stroke", null); }) .on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation())); const label = svg.append("g") .style("font", "1.2em sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") .style("fill-opacity", d => d.parent === root ? 1 : 0) .style("display", d => d.parent === root ? "inline" : "none") .text(d => d.data.key); zoomTo([root.x, root.y, root.r * 2]); function zoomTo(v) { const k = width / v[2]; view = v; label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k); } function zoom(d) { const focus0 = focus; focus = d; const transition = svg.transition() .duration(d3.event.altKey ? 7500 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); label .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .style("fill-opacity", d => d.parent === focus ? 1 : 0) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } return svg.node(); }32:T752,//treemap function to draw chart treemapChart = data => { var lineHeight = 15; var treemap = d3 .treemap() .size([width, height]) .padding(5) .paddingTop(17); var nodes = treemap( data .sum(d => d.value) .sort((a, b) => b.height - a.height || b.value - a.value) ).descendants(); const svg = d3 .select(DOM.svg(width, '1000px')) .style("width", "100%") .style("height", "auto") .style("font", "8px Georgia, serif"); const leaf = svg .selectAll("g") .data(nodes) .enter() .append("g") .attr("transform", d => `translate(${d.x0}, ${d.y0})`); // console.log(nodes) leaf.append("title").text( d => `${d .ancestors() .reverse() .map(d => d.data.key) .join("/")}\n${format(d.value)}` ); leaf .append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; if (d.depth === 0) { return 'black'; } // console.log(color(d.data.key)); return colorT(d.data.key); }) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill-opacity", 0.5) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf .append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf .append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.key.split("+")) .enter() .append("tspan") .attr("x", 3) .attr( "y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em` ) // .attr("y", (d, i, nodes) => .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null ) .text(d => d); return svg.node(); }33:T527,//treemap function to draw chart treemapColors = data => { const lineHeight = 15; const h=700; const treemap = d3.treemap() .size([width, h]) .padding(0) .tile(d3[tile]) const nodes = treemap(data .sum(d => d.value) .sort((a,b) => b.height - a.height || b.values - a.values )) .descendants(); // console.log(nodes) const svg = d3.select(DOM.svg(width, h)) .style("width", "100%") .style("height", h) .style("font", "8px Georgia, serif"); const leaf = svg.selectAll("g") .data(nodes) .enter().append("g") .attr("transform", d => `translate(${d.x0}, ${d.y0})`); // console.log(nodes) leaf.append("title") .text(d => `${d.data.key}\n${format(d.value)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while(d.depth > 1) d = d.parent; if (d.depth === 0) { return 'white'; } return d.data.key; }) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill-opacity", 0.8) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); return svg.node(); }34:T7f2,chartNet = { const radius = 6; const height = 500; const weightFilter = 500; const links = dataNet.links .map(d => Object.create(d)) .filter(f => f.value > weightFilter); const nodes = dataNet.nodes.map(d => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id(d => d.id) .distance(200) ) .force( "charge", d3 .forceManyBody() .strength(-1500) .distanceMax(300) .distanceMin(10) ) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX()) .force("y", d3.forceY()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.select(DOM.svg(width, 600)); // scale per riproporzionare le dimensioni di nodi (r) e archi (e) const r = d3 .scaleSqrt() .domain([0, d3.max(nodes, d => d.value)]) .range([0, 30]); const e = d3 .scaleSqrt() .domain([0, d3.max(links, d => d.value)]) .range([0, 10]); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => e(d.value)); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => r(d.value)) .attr("fill", d => d.id) .call(drag(simulation)); node.append("title").text(d => d.id); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr( "cx", d => (d.x = Math.max(r(d.value), Math.min(width - r(d.value), d.x))) ) .attr( "cy", d => (d.y = Math.max(r(d.value), Math.min(height - r(d.value), d.y))) ); }); invalidation.then(() => simulation.stop()); return svg.node(); }35:T764,chartRadial = { const h=800; const weightFilter = 5; const radiusRadial = 350; const links = dataNet.links.map(d => Object.create(d)) .filter(f => (f.value > weightFilter)); const nodes = dataNet.nodes.map(d => Object.create(d)); const r = d3.scaleSqrt() .domain([0, d3.max(nodes, d => d.value)]) .range([0, 30]); const e = d3.scaleLinear() .domain([0, d3.max(links, d => d.value)]) .range([0, 10]); const simulation = d3.forceSimulation(nodes) .force("center", d3.forceCenter(width / 2, h / 2)) .force("collide", d3.forceCollide().radius(d=> r(d.value) + 1).iterations(2)) // .force('center', d3.forceCenter(width/2, height/2)) .force('radial', d3.forceRadial(radiusRadial, width/2, h/2)) // per disegnare i link ma senza applicare forze. .force("link", d3.forceLink(links).id(d => d.id).strength(0)) const svg = d3.select(DOM.svg(width, h)) .style('max-width', '1920') .style('max-height', '1000'); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => e(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => r(d.value)) //sistemare con una scala appropriata .attr("fill", d => d.id) .call(drag(simulation)); node.append("title") .text(d => d.id); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }36:T7d0,chartSankey = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const { nodes, links } = sankey(sData); const view = svg.append("g").classed("view", true); const node = view .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", colorS) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); 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 => colorS(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => colorS(d.target)); } link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? colorS(d.source) : colorS(d.target) ) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .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); return svg.node(); }37:[{"id":"d345ce8123cfd91773ebe5d54b84b55ec5efecba41f9c7450ad13887156399ec549ca8ac4090f4969823913e41a031849696380c555d51c7995b9961c438fada","href":"https://static.observableusercontent.com/files/d345ce8123cfd91773ebe5d54b84b55ec5efecba41f9c7450ad13887156399ec549ca8ac4090f4969823913e41a031849696380c555d51c7995b9961c438fada","name":"time_cpaintings.json","type":"application/json","lastModified":1591552055332.371,"size":1854}] 2f:{"title":"Web Gallery of Art - DVVA 2020 - pt1","cells":[{"id":0,"value":"md`# Web Gallery of Art - DVVA 2020 - pt1\n#### A visual representation of 500 years of paintings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"md`http://art.dviz.info/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2585,"value":"md`### -import data from an online file:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"paintings = {\n return await d3.csv(\n \"https://raw.githubusercontent.com/danielefadda/Web-Gallery-of-Art/master/data/paintings.csv\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"text_intro = md`The Web Gallery of Art is a virtual museum and searchable database of Western (European) fine arts of the Medieval, Renaissance, Baroque, Neoclassicism, Romanticism, Realism, and Impressionism periods (1400-1900), currently containing over ${numero_quadri} reproductions. Source: www.wga.hu\n\n♠\n\nFrom the original DB we extracted only paintings. Then we filtered out the museums with less then 50 works and private collections.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"md`### ...or load a file from your hard disk:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2599,"value":"md`first of all, import: https://observablehq.com/@jashkenas/inputs. A collection of assorted inputs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"viewof raw_data = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"data = Files.text(raw_data).then(t => d3.dsvFormat(',').parse(t))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2609,"value":"md`Create a variable to count the number of paintings and use this value to modify intro text`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2565,"value":"numero_quadri = paintings.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`### - View your data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`to better understand how to manipulate data: https://observablehq.com/@dakoop/grouping-data-learn-js-data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2631,"value":"md`For example, a \"group by\", using d3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"d3.nest()\n .key(d => d.TIMEFRAME)\n .entries(paintings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2640,"value":"md`Extract key list from previous nest():`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2637,"value":"d3.nest()\n .key(d => d.TIMEFRAME)\n .entries(paintings)\n .map(d => d.key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2645,"value":"md`To create a selector we append \"All periods\" before the timeframe list`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"timeframes= [\"1400 - 1900\"].concat(\n d3.nest()\n .key(d => d.TIMEFRAME)\n .entries(paintings)\n .map(d => d.key)\n .sort(d3.ascending)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2874,"value":"md`### Main statistics:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2879,"value":"schoolSize = new Set(paintings.map(d=>d.SCHOOL)).size","pinned":true,"hidden":false,"mode":"ojs"},{"id":2900,"value":"locationSize = new Set(paintings.map(d=>d.LOCATION)).size","pinned":true,"hidden":false,"mode":"ojs"},{"id":2906,"value":"typeSize = new Set(paintings.map(d=>d.TYPE)).size","pinned":true,"hidden":false,"mode":"ojs"},{"id":2896,"value":"paintingSize = paintings.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof time = select({\n // title: 'TIMEFRAMES',\n // description: \"Please pick your favorite timeframe.\",\n value: \"ALL PERIODS\", //preselected value\n options: timeframes\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2660,"value":"md`### New main Data-Object `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"md`We create a new data object that changes every time we use TIMEFRAMES selector: f_paintings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"f_paintings= paintings\n .filter(d => +d.TIMEFRAME.substring(0,4))\n .filter(d => `${time}`!=\"1400 - 1900\" ? d.TIMEFRAME===`${time}`:d.TIMEFRAME) //`${timeframes}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2664,"value":"md`Now we are going to explore the dataset using three main dimensions: type, technique and location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"g_conditions = [\"LOCATION\",\"TYPE\",\"TECHNIQUE\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2667,"value":"md`A \"group by\" that use a dimension chosed by the selector: g_by`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof g_by = select({\n options: g_conditions,\n // title: \"Count By?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"goruped_paintings= d3.nest()\n// .key(d => d.LOCATION)\n.key(d => d[g_by])\n.rollup(v => v.length)\n.entries(f_paintings)\n.sort((a,b) => d3.descending(a.value, b.value));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"Plotly = require('https://cdn.plot.ly/plotly-latest.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2838,"value":"caption_barchart = html`Top 10 by ${g_by}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"barchart = {\n const trace = {\n type: 'bar',\n y: goruped_paintings.map(d => d.key).slice(0, 10), //\n x: goruped_paintings.map(d => d.value).slice(0, 10), //\n orientation: 'h',\n marker: {\n color: 'rgb(50,50,50)',\n opacity: 0.8\n }\n };\n\n const data = [trace];\n\n const layout = {\n showlegend: false,\n width: 800,\n height: 500,\n margin: { pad: 10, l: 300 },\n yaxis: { autorange: 'reversed' },\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)'\n };\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2682,"value":"md`Create a function to \"group by\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"function gByData (data, criteria) {\n const gdata = d3.nest()\n .key(d => d[criteria])\n .rollup(v => v.length) //count\n .entries(data)\n .sort((a,b) => d3.descending(a.value, b.value)) // javascrit order by\n return gdata\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2704,"value":"md`\"group by\" type:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"gByData(f_paintings,\"TYPE\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"three_plot = {\n let traces = [];\n g_conditions.forEach(function (el,i) {\n let trace = {\n type:\"bar\",\n name:el,\n y:gByData(f_paintings,el).map(d => d.key).slice(0,9),\n x:gByData(f_paintings,el).map(d => d.value).slice(0,9),\n // FOR SUBPLOTS: https://plot.ly/javascript/subplots/\n xaxis: (i!=0) ? 'x'+(i+1) : 'x',\n yaxis: (i!=0) ? 'y'+(i+1) : 'y',\n orientation: 'h',\n marker: {\n color: 'rgb(50,50,50)',\n opacity: 0.8\n }\n };\n traces.push(trace);\n })\n const div_tre = DOM.element('div');\n\n let layout = {\n showlegend:false,\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)',\n width:width-100,\n height:400,\n margin:{\n l:300,\n pad:5,\n },\n grid: {\n rows: 1, //numbero of conditions in g_conditions\n columns: g_conditions.length,\n pattern: 'independent',\n }\n }; \n Plotly.newPlot(div_tre, traces, layout,{displayModeBar: false});\n return div_tre \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`## Where? What? Who?\nClick on your favourite museums to explore types of painting and schools\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"md`### TOP 10 museums in ${time}` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"md`the following script is an adaptation of: \n\nhttps://observablehq.com/@d3/zoomable-circle-packing` \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2718,"value":"md`### Prepare the data:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2721,"value":"md`Group by (three levels)` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"d_goruped_paintings= d3.nest()\n.key(d => d.LOCATION)\n.key(d => d.TYPE)\n.key(d => d.SCHOOL)\n.rollup(v => v.length)\n.entries(f_paintings)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2728,"value":"md`use d3.hierarchy to describe parent-child structure` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"hdata = d3.hierarchy(\n { key: 'ALL MUSEUMS', values: d_goruped_paintings.slice(0, 9) },\n d => d.values\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2733,"value":"md`Apply pack layout to get graph descriptor for circle Zoomable Circle Packing` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2711,"value":"pack(hdata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"pack = data => d3.pack()\n .size([width, height])\n .padding(10)\n (hdata\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2738,"value":"md`## Same data, another layout: TREEMAP` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"treemapMusei = treemapChart(hdata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"paintings","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"\ncpaintings = paintings\n .map(d => {\n const nd = {\n jpg_link: d.jpg_link,\n AUTHOR: d.AUTHOR,\n TITLE: d.TITLE,\n TECHNIQUE: d.TECHNIQUE,\n LOCATION: d.LOCATION,\n TYPE: d.TYPE,\n SCHOOL: d.SCHOOL,\n TIMEFRAME: d.TIMEFRAME,\n colorsCSS2: {},\n colorsCSS3: {},\n colorsESA: {},\n };\n d3.range(9).map(n=> `CSS2_${(n+1)}`)\n .forEach(k => {\n nd.colorsCSS2[d[k]] = nd.colorsCSS2[d[k]] ? nd.colorsCSS2[d[k]] + 1: 1;\n })\n d3.range(9).map(n=> `CSS3_${(n+1)}`)\n .forEach(k => {\n nd.colorsCSS3[d[k]] = nd.colorsCSS3[d[k]] ? nd.colorsCSS3[d[k]] + 1: 1;\n })\n d3.range(9).map(n=> `ESA_${(n+1)}`)\n .forEach(k => {\n nd.colorsESA[d[k]] = nd.colorsESA[d[k]] ? nd.colorsESA[d[k]] + 1: 1;\n })\n\n return nd;\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"time_cpaintings = d3\n .nest()\n .key(d => d.TIMEFRAME)\n .rollup(l => {\n const allColors = {};\n l.forEach(c => {\n const cols = c.colorsCSS2;\n d3.keys(cols).forEach(ck => {\n allColors[ck] = allColors[ck] ? allColors[ck] + cols[ck] : cols[ck];\n });\n });\n\n return allColors;\n })\n .entries(cpaintings)\n .sort((a, b) => d3.ascending(a.key, b.key))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1173,"value":"md`Lista dei colori`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"colorList = {\n const listColor = [];\n time_cpaintings\n .map(d => d.value) // lista di dizionari con i colori per ogni timeframe\n .forEach(t => listColor.push(d3.keys(t))); // estraggo le chiavi di ogni dizionario e le aggiungo in una lista di liste\n return [...new Set(listColor.flat())].sort(); //flat della lista precedente, set per prendere i valori unici quindi trasformo di nuovo in un array e ordino\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`Lista dei timeframe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"timeFrame = time_cpaintings\n .map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"time_cpaintings","pinned":true,"hidden":false,"mode":"ojs"},{"id":1417,"value":"//non va bene, deve restituire un array di oggetti non un oggetto.\n\ntimeSeriesData = {\n let obj={}\n time_cpaintings.forEach(function (el,i) {\n let countColors = {};\n colorList.forEach(item => countColors[item]=el.value[item] ? el.value[item]:0);\n el.value = countColors\n // obj[timeFrame[i]]=countColors;\n})\n return obj\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1604,"value":"//nome colore\ncolorDict= {\n let colorDict ={}\n colorList.map(color => {\n let qColor =[];\n time_cpaintings.map(x => x.value).forEach(item => {\n qColor.push(item[color])\n })\n colorDict[color]=qColor;\n })\n return colorDict\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1685,"value":"viewof stacked = select({options: ['percent','none'], title: \"Normalization?\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1611,"value":"colorTimeline = {\n const div = DOM.element('div');\n\n let dataT = []\n colorList.map(color => {\n const trace = {\n name:color,\n mode:'line',\n y: colorDict[color],\n x: time_cpaintings.map(x => x.key.split(\"-\")[1]),\n stackgroup: 'one',\n groupnorm:stacked,\n fillcolor: color,\n mode: 'none', \n text:colorDict[color],\n hoverinfo:\"text\",\n \n }\n dataT.push(trace);\n })\n \n\n \n const layout = {\n title: ``,\n showlegend: true,\n width: 1000,\n height: 500,\n margin: {pad:5,bottom:100},\n legend:{\n orientation:'h'\n },\n paper_bgcolor:'rgba(0,0,0,0)',\n plot_bgcolor:'rgba(0,0,0,0)',\n // xaxis: {\n // rangeselector: { \n // buttons: [{\n // step: 'all',\n // }]},\n // rangeslider: {}\n // },\n };\n \n Plotly.newPlot(div, dataT, layout,{displayModeBar: false});\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1732,"value":"md`CSS3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"css3All=cpaintings.map(d => d.colorsCSS3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1740,"value":"time_cpaintings","pinned":true,"hidden":false,"mode":"ojs"},{"id":1743,"value":"colorListCss3 = {\n const listColor = [];\n css3All.forEach(t => listColor.push(d3.keys(t)) ) // estraggo le chiavi di ogni dizionario e le aggiungo in una lista di liste\n return [... new Set( listColor.flat() ) ].sort() //flat della lista precedente, set per prendere i valori unici quindi trasformo di nuovo in un array e ordino\n}\n\n// array.indexOf(newItem) === -1 ? array.push(newItem)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"allColors = { \n let colorCounter3 = {};\n let treemapDataColors = []\n let allPaintings = cpaintings.filter(d => `${time}`!=\"1400 - 1900\" ? d.TIMEFRAME===`${time}`:d.TIMEFRAME)\n allPaintings.map(d => d.colorsCSS3)\n .forEach(e => {\n\n Object.entries(e).map(a =>{\n Object.keys(colorCounter3).indexOf(a[0]) === -1 ? (colorCounter3[a[0]] = a[1] ) : colorCounter3[a[0]] += a[1]\n })\n })\n Object.entries(colorCounter3).map(obj => {\n let nc = {key:obj[0],value:obj[1]}\n treemapDataColors.push(nc)\n });\n const sortedColors = treemapDataColors.sort((a, b) => b.value - a.value)\n return sortedColors\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"cpaintings","pinned":true,"hidden":false,"mode":"ojs"},{"id":1914,"value":"cData = d3.hierarchy({key:'ALL PAINTINGS', values:allColors}, d => d.values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1923,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"caption_treemapcolor = md`This \"painting\" is the result of the sum of ${f_paintings.length} paintings during the period: ${time} `","pinned":true,"hidden":false,"mode":"ojs"},{"id":2821,"value":"caption_treemapcolor2 = html`This \"painting\" is the result of the sum of ${f_paintings.length} paintings during the period: ${time} `","pinned":true,"hidden":false,"mode":"ojs"},{"id":1917,"value":"treemapColor = treemapColors(cData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2009,"value":"viewof tile = select({\n title: 'rearrange tiles',\n description: \"Please pick your favorite tiles configuration.\",\n value: \"treemapSquarify\",\n options: [\"treemapBinary\",\"treemapDice\",\"treemapSlice\",\"treemapSquarify\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"edgesList= {\n let edgeList = [];\n paintings\n // .filter((d,i) => i < 50)\n .map(d => {\n let lista =[]\n d3.range(9).map(n=> `CSS3_${(n+1)}`)\n .forEach(k => {\n lista.push(d[k])\n })\n lista = [... new Set(lista)] \n let listaC = d3.cross(lista,lista)\n edgeList.push(listaC) \n });\n return edgeList.flat() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"nodes= {\n let nodes = [];\n colorListCss3.forEach((d,i) => {\n const nd = {\n id: d,\n color:d\n };\n nodes.push(nd)\n })\n return nodes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"links = {\n let edges = [];\n edgesList.map( (d,i) =>{\n const ed = {\n source: d[0],\n target: d[1],\n weight: 1,\n }\n edges.push(ed);\n })\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2183,"value":"edges={\n const sumEdges= d3.nest(links)\n .key(function(d) { return [d.source,d.target]; })\n .rollup(function(v) { return v.length; })\n .entries(links)\n let edges =[]\n sumEdges.map(d => {\n let ed ={\n source: d.key.split(',')[0],\n target: d.key.split(',')[1],\n value: d.value,\n }\n edges.push(ed)\n })\n return edges\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"dataNet= {\n const data = {};\n \n nodes.forEach(function(d) {\n d.degree = 0;\n });\n // peso i nodi:\n let wNodes = d3.nest()\n .key(d => d.source)\n //dal momento che conto due volte ogni arco, dopo il raggruppamento il peso del nodo va diviso (e arrotondato)\n .rollup(v => Math.round(d3.sum(v, d => d.value)/2) ) \n .entries(edges)\n // applico una funzione di map per rinominare le chiavi: key, value\n .map(function(group) {\n return {\n id: group.key,\n value : group.value\n }\n });\n \n data['nodes']=wNodes;\n data['links']=edges; \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2166,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2319,"value":"md`## Radial Chart\nColor couples occourence in the dataset. Edges are weighted by frequency and nodes by degree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2168,"value":"drag = simulation => {\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.1).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\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2929,"value":"md`# Sankey`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2932,"value":"paintings.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2955,"value":"md`## sankey data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3059,"value":"tipologia = [\"LOCATION\", \"TYPE\", \"SCHOOL\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3061,"value":"viewof selettore = select({\n value: \"TYPE\", //preselected value\n options: tipologia\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2934,"value":"typeTimeData = d3\n .nest()\n .key(d => d[`${selettore}`])\n .key(d => d.TIMEFRAME)\n .rollup(leaves => leaves.length)\n .entries(paintings)\n .sort((a, b) => d3.ascending(a.key, b.key))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2966,"value":"sData = {\n const links = typeTimeData\n .map(d => {\n return d.values.map(v => {\n return {\n source: d.key,\n target: v.key,\n value: v.value\n };\n });\n })\n .flat();\n const nodes = d3\n .set(links.map(d => d.source))\n .values()\n .concat(\n d3\n .set(links.map(d => d.target))\n .values()\n .sort(d3.ascending)\n )\n .map((d, i) => {\n return {\n id: i,\n name: d\n };\n });\n\n return { nodes, links };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"viewof edgeColor = Object.assign(\n html``,\n {\n value: new URLSearchParams(html``.search).get(\"color\") || \"path\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3012,"value":"sankey = {\n const sankey = d3\n .sankey()\n .nodeId(d => d.name)\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]])\n .nodeSort(null);\n\n return ({ nodes, links }) =>\n sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3004,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":3026,"value":"colorS = {\n const color = d3.scaleOrdinal(d3.schemePaired);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3046,"value":"// https://observablehq.com/@jarrettmeyer/sankey-with-animated-gradients","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`## APPENDIX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2787,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"color = d3.scaleLinear()\n .domain([0, 3])\n // .range([\"hsl(152,80%,80%)\", \"hsl(228,30%,40%)\"])\n .range([\"hsl(0,0%,60%)\", \"hsl(0,0%,90%)\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"colorT = d3.scaleOrdinal().range(d3.schemeSet3)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}