Skip to content

Commit

Permalink
Refactor adding new artists; add animation
Browse files Browse the repository at this point in the history 
 - Replace calls to `map.putCountryCount` with `map.addArtists`
 - Reduce logic in `putCountryCount` by  passing better data from `script.js`
 - flash a country when it gets a new artist!!! wow!
  • Loading branch information
@mold
mold committed Jan 27, 2024
1 parent 8938176 commit a9bca3b
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 70 deletions.
52 changes: 38 additions & 14 deletions src/assets/js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,27 +1158,51 @@ function getCountryCenter(countryTopoData) {

}

/** "PUBLUC" FUNCTIONS **/
map.putCountryCount = function(object) {
countryCount = JSON.parse(JSON.stringify(object));
function animateCountries(countryDict) {
var countries = g.selectAll(".country").filter(c => !!countryDict[c.id]);

setTimeout(() => {
// bounce - didn't look too good but might be fun to try again
// later

// countries.transition()
// .duration(200)
// .style("transform", "scale(1.1)")
// .delay((_, i) => i * 100)
// .transition().duration(150)
// .style("transform", "scale(1)");

// fade
countries.transition()
.duration(200)
.style("opacity", "0.8")
.delay((_, i) => i * 100)
.transition().duration(150)
.style("opacity", "1");
})
}

function putCountryCount(newArtists) {
Object.entries(newArtists).forEach(([key, value]) => {
countryCount[key] = (countryCount[key] || []).concat(value);
});

countryScore = 0;
var countryList = [];

// Extract info for the current user
d3.keys(countryCount).forEach(function(id) {
if (countryCount[id][SESSION.name]) {
countryCount[id] = countryCount[id][SESSION.name];
countryScore = countryScore + 1;
countryList.push(+id)
} else {
// delete countryCount[id];
}

d3.keys(countryCount).forEach(function (id) {
countryScore = countryScore + 1;
})

if (topo) redraw();

window.countryScore = countryScore;
}

/** "PUBLUC" FUNCTIONS **/

map.addArtists = function (newArtistsByCountry) {
putCountryCount(newArtistsByCountry);
animateCountries(newArtistsByCountry);
}

map.makeSummaryDiv = makeSummaryDiv;
Expand Down
99 changes: 43 additions & 56 deletions src/assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,61 +145,44 @@ var countryCountObj = {};
// var n = count++;

// Get country for all artists
api.getCountries(artistNames,
function (data) {
// Count plays for each country?
// countryCountList = countryCountList.concat(data);
var dataObj = d3.nest() //Gör så att man kan slå upp på land-id och få upp en lista på artister.
.key(function (d) {
return d.id;
})
.rollup(function (leaves) { //gör så att man får en lista på alla artister för ett land.
return leaves;
})
.map(data); //Skickar in en lista med ett objekt för varje artist.

d3.keys(dataObj).forEach(function (id) {
countryCountObj[id] = countryCountObj[id] || {};
countryCountObj[id][user] = countryCountObj[id][user] || [];
var artistList = countryCountObj[id][user]; // list of artists for a country

// if (artistList) {
artistList = artistList.concat(dataObj[id]);

//Lägger på de nya dataObj-elementen i countryCountObj-listan.
// } else {
// artistList = dataObj[id];
// }

artistList.forEach(function (el, i) {
//Här lägger vi till ett fält image med artistens bild-url som ett fält till det "inre" objektet.
artistList[i].url = STORED_ARTISTS[el.artist].url;
artistList[i].playcount = STORED_ARTISTS[el.artist].playcount;
// if (artistList[i].users) {
// artistList[i].users.push(user);
// } else {
// artistList[i].users = [user];
// }
});
//countryCountObj är en lista med "country"-objekt.
//Varje country-objekt innehåller en lista med "inre" objekt med artistnamn, lands-id och landsnamn.
//dataObj är typ samma som countryCountObj, fast är bara för de tillfälligt sparade artisterna (intervallet).
countryCountObj[id][user] = artistList;
})

addArtistsWithNoCountry(data.filter(function (artist) {
return !artist.id; // && artist.artist && artist.url;
}));

map.putCountryCount(countryCountObj);

if (currPage > maxPage) {
end();
return;
} else {
getAllArtists();
}
});
api.getCountries(artistNames, function (data) {
//Gör så att man kan slå upp på land-id och få upp en lista på artister.
var newArtistCountries = d3.nest().key((d) => d.id)
// gör så att man får en lista på alla artister för ett land.
.rollup((leaves) => leaves)
// Skickar in en lista med ett objekt för varje artist.
.map(data);

d3.keys(newArtistCountries).forEach(function (id) {
countryCountObj[id] = countryCountObj[id] || {};
countryCountObj[id][user] = countryCountObj[id][user] || [];

var artistsFromCountry = countryCountObj[id][user];

artistsFromCountry = artistsFromCountry.concat(newArtistCountries[id]);

artistsFromCountry.forEach(function (el, i) {
//Här lägger vi till ett fält image med artistens bild-url som ett fält till det "inre" objektet.
artistsFromCountry[i].url = STORED_ARTISTS[el.artist].url;
artistsFromCountry[i].playcount = STORED_ARTISTS[el.artist].playcount;
});
// countryCountObj är en lista med "country"-objekt.
// Varje country-objekt innehåller en lista med "inre" objekt med artistnamn, lands-id och landsnamn.
// dataObj är typ samma som countryCountObj, fast är bara för de tillfälligt sparade artisterna (intervallet).
countryCountObj[id][user] = artistsFromCountry;
})

addArtistsWithNoCountry(data.filter((artist) => !artist.id));

map.addArtists(newArtistCountries);

if (currPage > maxPage) {
end();
return;
} else {
getAllArtists();
}
});
});
}

Expand Down Expand Up @@ -417,7 +400,11 @@ var countryCountObj = {};
});

setTimeout(function () {
map.putCountryCount(countryCountObj);
map.addArtists(
Object.keys(countryCountObj).reduce((acc, countryId) => ({
...acc,
[countryId]: countryCountObj[countryId][SESSION.name]
}), {}));
end();
}, 1000)
} else {
Expand Down

0 comments on commit a9bca3b

Please sign in to comment.