usersData = [artists_angie, artists_stash, artists_evelyn, artists_amelia, artists_rosemary, artists_reid, artists_vivi, artists_fiona, artists_annalise, artists_gabby];
allArtists = {
let allArtists = {};
usersData.forEach((oneUser, userId) => oneUser.forEach(artist => {
if (artist.fans >= 500000 && !allArtists[artist.id]) {
allArtists[artist.id] = {
name: artist.name,
fans: +artist.fans,
id: artist.id,
genres: artist.genres.split(","),
SharedUserCount: 1,
userIds: [userId]
};
// Adds to usercount if there is
} else if (allArtists[artist.id]) {
if (!allArtists[artist.id].userIds.includes(userId)) {
allArtists[artist.id].SharedUserCount++;
allArtists[artist.id].userIds.push(userId);
}
}
}));
// Add condition to filter artists by userCount
let filteredArtists = {};
for (let artistId in allArtists) {
let artist = allArtists[artistId];
if (artist.SharedUserCount >= SharedFollowers) {
filteredArtists[artistId] = artist;
}
}
return filteredArtists;
};
viewof genres = Inputs.range([1, 100], {label: "number of genres", step: 1, value: 10})
topGenres = {
let genreCounts = {};
let keys = Object.keys(allArtists);
for (let i = 0; i < keys.length; i++) {
let genres = allArtists[keys[i]].genres;
for (let j = 0; j < genres.length; j++) {
let genre = genres[j].trim();
if (!genreCounts[genre]) {
genreCounts[genre] = 1;
} else {
genreCounts[genre]++;
}
}
}
let topGenres = Object.keys(genreCounts).sort((a, b) => {
return genreCounts[b] - genreCounts[a];
}).slice(0, genres);
return topGenres;
}
allArtistsWithTopGenre = {
let allArtistsWithTopGenre = {};
Object.keys(allArtists).forEach( key => {
const artist = allArtists[key];
allArtistsWithTopGenre[key] = {...artist};
for (let genreCandidate of topGenres){
if (allArtistsWithTopGenre[key].genres.includes(genreCandidate)) {
allArtistsWithTopGenre[key].genre = genreCandidate;
break;
} else {
allArtistsWithTopGenre[key].genre = "other";
}
}
})
return allArtistsWithTopGenre;
}
artistPairs = {
let artistpairs = [];
let keys = Object.keys(allArtists);
for (let i = 0; i < keys.length; i++) {
for (let j = i+1; j < keys.length - 1; j++) {
artistpairs.push({
source: keys[i],
target: keys[j],
value: 0
})
}
}
return artistpairs;
}
filteredPairs = {
usersData.forEach(user => {
let userArtists = user.map(m => m.id);
artistPairs.forEach(pair => {
if (userArtists.includes(pair.source) && userArtists.includes(pair.target)) pair.value++;
})
})
return artistPairs.filter(f => f.value);
}
graphData = {
let object = {};
object.nodes = Object.values(allArtistsWithTopGenre);
object.links = filteredPairs;
return object;
}
maxFans = d3.max(Object.values(allArtists), d => d.fans)
fanCountScale = d3.scaleLog()
.domain([500000, maxFans])
.range([4, 9])
.clamp(true);
chart = ForceGraph(graphData, {
nodeId: d => d.id,
colors: d3.schemeCategory10,
nodeGroup: d => d.genre,
nodeTitle: d => d.name + " (" + d.genre +")",
nodeRadius: d => fanCountScale(graphData.nodes[d.index].fans),
linkStrokeWidth: l => Math.sqrt(l.value),
width: 1200,
height: 1200,
invalidation
})
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.
