https://twitter.com/unkleho
update = chart.update(processGraph({ exhibitionLimit }))
processGraph = ({ exhibitionLimit = 1 } = {}) => {
const exhibitionGroupedNodes = d3.group(rawData, d => d.exhibitionName);
// Nodes
const exhibitionNodes = Array.from(exhibitionGroupedNodes)
.map(([id, value]) => {
return {
id,
type: 'exhibition',
items: value,
artists: groupBy(value, 'artistId').map(([id, value]) => {
return {
id,
type: 'artist',
title: value[0].artistFirstName,
items: value
};
}),
catalogues: groupBy(value, 'catalogeName').map(([id, value]) => {
return {
id,
type: 'catalogue',
title: value[0].catalogueName
};
})
};
})
.splice(0, exhibitionLimit);
const artistNodes = exhibitionNodes.reduce((prev, curr) => {
return [...prev, ...curr.artists];
}, []);
const itemNodes = artistNodes.reduce((prev, curr) => {
return [
...prev,
...curr.items.map(item => {
return {
id: item.id,
type: 'item',
title: item.title,
artistId: item.artistId
};
})
];
}, []);
// Links
const artistItemLinks = artistNodes.reduce((prev, curr) => {
return [
...prev,
...curr.items.map(item => {
return {
source: item.id,
target: curr.id
};
})
];
}, []);
const exhibitionArtistLinks = exhibitionNodes.reduce((prev, curr) => {
return [
...prev,
...curr.artists.map(artist => {
return {
source: artist.id,
target: curr.id
};
})
];
}, []);
const exhibitionItemLinks = exhibitionNodes.reduce((prev, curr) => {
return [
...prev,
...curr.items.map(item => {
return {
source: item.id,
target: curr.id
};
})
];
}, []);
// console.log('exhibitionNodes', exhibitionNodes);
// console.log('artistNodes', artistNodes);
// console.log('itemNodes', itemNodes);
// console.log('artistItemLinks', artistItemLinks);
// console.log('exhibitionArtistLinks', exhibitionArtistLinks);
// console.log('exhibitionItemLinks', exhibitionItemLinks);
return {
nodes: [...exhibitionNodes, ...artistNodes, ...itemNodes],
links: [
...artistItemLinks,
...exhibitionArtistLinks,
...exhibitionItemLinks
]
};
}
rawData = d3.csvParse(
await FileAttachment(
"Australian Art Exhibition Catalogue Index 1845-1900 2019.11.251 DX Lab - Items@1.csv"
).text()
// d3.autoType
)
groupBy = (data, key) => {
return Array.from(d3.group(data, d => d[key]));
}
color = d3.scaleOrdinal(d3.schemeCategory10)
height = 600
d3 = require("d3@6")
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.
