Published
Edited
Jun 2, 2019
1 fork
2 stars
md
md`## Selected Data`
// https://observablehq.com/@dakoop/grouping-data-learn-js-data
f_paintings= paintings
.filter(d => +d.TIMEFRAME.substring(0,4) >1300 )
.filter(d => `${time}`!="ALL PERIODS" ? d.TIMEFRAME===`${time}`:d.TIMEFRAME) //`${timeframes}`
gByData(f_paintings,"TYPE")
hdata = d3.hierarchy({key:'ALL MUSEUMS', values:d_goruped_paintings.slice(0,9)}, d => d.values)
pack = data => d3.pack()
.size([width, height])
.padding(10)
(hdata
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
treemapChart(hdata)
paintings
cpaintings = paintings
// .filter((d,i) => i === 1)
.map(d => {
const nd = {
jpg_link: d.jpg_link,
AUTHOR: d.AUTHOR,
TITLE: d.TITLE,
TECHNIQUE: d.TECHNIQUE,
LOCATION: d.LOCATION,
TYPE: d.TYPE,
SCHOOL: d.SCHOOL,
TIMEFRAME: d.TIMEFRAME,
colorsCSS2: {},
colorsCSS3: {},
colorsESA: {},
};
d3.range(9).map(n=> `CSS2_${(n+1)}`)
.forEach(k => {
nd.colorsCSS2[d[k]] = nd.colorsCSS2[d[k]] ? nd.colorsCSS2[d[k]] + 1: 1;
})
d3.range(9).map(n=> `CSS3_${(n+1)}`)
.forEach(k => {
nd.colorsCSS3[d[k]] = nd.colorsCSS3[d[k]] ? nd.colorsCSS3[d[k]] + 1: 1;
})
d3.range(9).map(n=> `ESA_${(n+1)}`)
.forEach(k => {
nd.colorsESA[d[k]] = nd.colorsESA[d[k]] ? nd.colorsESA[d[k]] + 1: 1;
})
return nd;
})
colorList = {
const listColor = [];
time_cpaintings.map(d => d.value) // lista di dizionari con i colori per ogni timeframe
.forEach(t => listColor.push(d3.keys(t))) // estraggo le chiavi di ogni dizionario e le aggiungo in una lista di liste
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
}
time_cpaintings
time_cpaintings_v2=time_cpaintings
//non va bene, deve restituire un array di oggetti non un oggetto.
timeSeriesData = {
let obj={}
time_cpaintings_v2.forEach(function (el,i) {
let countColors = {};
colorList.forEach(item => countColors[item]=el.value[item] ? el.value[item]:0);
el.value = countColors
// obj[timeFrame[i]]=countColors;
})
return obj
}
//nome colore
colorDict= {
let colorDict ={}
colorList.map(color => {
let qColor =[];
time_cpaintings_v2.map(x => x.value).forEach(item => {
qColor.push(item[color])
})
colorDict[color]=qColor;
})
return colorDict
}
css3All=cpaintings.map(d => d.colorsCSS3)
time_cpaintings
colorListCss3 = {
const listColor = [];
css3All.forEach(t => listColor.push(d3.keys(t)) ) // estraggo le chiavi di ogni dizionario e le aggiungo in una lista di liste
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
}
// array.indexOf(newItem) === -1 ? array.push(newItem)
allColors = {
let colorCounter3 = {};
let treemapDataColors = []
let allPaintings = cpaintings.filter(d => `${time}`!="ALL PERIODS" ? d.TIMEFRAME===`${time}`:d.TIMEFRAME)
allPaintings.map(d => d.colorsCSS3)
.forEach(e => {
// console.log(Object.entries(e))
Object.entries(e).map(a =>{
Object.keys(colorCounter3).indexOf(a[0]) === -1 ? (colorCounter3[a[0]] = a[1] ) : colorCounter3[a[0]] += a[1]
})
})
Object.entries(colorCounter3).map(obj => {
let nc = {key:obj[0],value:obj[1]}
treemapDataColors.push(nc)
});
const sortedColors = treemapDataColors.sort((a, b) => b.value - a.value)
return sortedColors
}
cpaintings
cData = d3.hierarchy({key:'ALL PAINTINGS', values:allColors}, d => d.values)
treemapColors(cData)
cpaintings.filter((d,i) => i === 1)
.map(d => {
const nd = {
colorsCSS3: Object.entries(d.colorsCSS3),
};
return nd
})
edgesList= {
let edgeList = [];
paintings
// .filter((d,i) => i < 50)
.map(d => {
let lista =[]
d3.range(9).map(n=> `CSS3_${(n+1)}`)
.forEach(k => {
lista.push(d[k])
})
lista = [... new Set(lista)]
let listaC = d3.cross(lista,lista)
edgeList.push(listaC)
});
return edgeList.flat()
}
nodes= {
let nodes = [];
colorListCss3.forEach((d,i) => {
const nd = {
id: d,
color:d
};
nodes.push(nd)
})
return nodes
}
links = {
let edges = [];
edgesList.map( (d,i) =>{
const ed = {
source: d[0],
target: d[1],
weight: 1,
}
edges.push(ed);
})
return edges;
}
edges={
const sumEdges= d3.nest(links)
.key(function(d) { return [d.source,d.target]; })
.rollup(function(v) { return v.length; })
.entries(links)
let edges =[]
sumEdges.map(d => {
let ed ={
source: d.key.split(',')[0],
target: d.key.split(',')[1],
value: d.value,
}
edges.push(ed)
})
return edges
}
dataNet= {
const data = {};
nodes.forEach(function(d) {
d.degree = 0;
});
// peso i nodi:
let wNodes = d3.nest()
.key(d => d.source)
//dal momento che conto due volte ogni arco, dopo il raggruppamento il peso del nodo va diviso (e arrotondato)
.rollup(v => Math.round(d3.sum(v, d => d.value)/2) )
.entries(edges)
// applico una funzione di map per rinominare le chiavi: key, value
.map(function(group) {
return {
id: group.key,
value : group.value
}
});
data['nodes']=wNodes;
data['links']=edges;
return data
}
chartNet = {
const weightFilter = 100;
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))
.force("charge", d3.forceManyBody().strength(-1500))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX().strength(0.008))
.force("y", d3.forceY().strength(0.008));;
const svg = d3.select(DOM.svg(width, height));
// 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)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
chartRadial = {
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, height / 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, height/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, height));
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", "#ccc")
.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();
}
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
width = 800
height = width
format = d3.format(",d")
color = d3.scaleLinear()
.domain([0, 3])
// .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.range(["hsl(0,0%,60%)", "hsl(0,0%,90%)"])
.interpolate(d3.interpolateHcl)
colorT = d3.scaleOrdinal().range(d3.schemeSet3)
_ = require('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
