102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
|
|
|
|
function createMapAndLegend(world, gameData, selectedGame) {
|
|
var ratingsData = {};
|
|
var ratings = [];
|
|
console.log({world, gameData, selectedGame})
|
|
|
|
gameData.forEach((d) => (d["Average Rating"] = +d["Average Rating"]));
|
|
gameData.forEach(function (d) {
|
|
if (d.Game === selectedGame) ratings.push(d["Average Rating"]);
|
|
});
|
|
|
|
var color = d3.scaleQuantile().range(colors).domain(ratings);
|
|
|
|
var legend = d3.legendColor().labelFormat(d3.format(".2f")).scale(color);
|
|
|
|
var div = d3.select("body").selectAll("#legend").attr("class", "column");
|
|
|
|
div.html("");
|
|
|
|
var legSvg = div.append("svg").attr("transform", "translate(20, 10)");
|
|
|
|
legSvg.append("g").attr("class", "legend").call(legend);
|
|
|
|
gameData.forEach(function (d) {
|
|
if (d.Game === selectedGame) ratingsData[d.Country] = d;
|
|
});
|
|
|
|
world.features.forEach(
|
|
(d) =>
|
|
(ratingsData[d.properties.name] = ratingsData[d.properties.name] || {
|
|
"Average Rating": 0,
|
|
})
|
|
);
|
|
world.features.forEach(
|
|
(d) =>
|
|
(d.ratings_data = ratingsData[d.properties.name] || {
|
|
"Average Rating": 0,
|
|
})
|
|
);
|
|
|
|
d3.select("#choropleth").empty();
|
|
|
|
var svg = d3
|
|
.select("#choropleth")
|
|
.attr("transform", "translate(50, 50)")
|
|
.attr("height", height)
|
|
.attr("width", width)
|
|
.append("g");
|
|
svg
|
|
.attr("id", "countries")
|
|
.attr("class", "countries")
|
|
.selectAll("path")
|
|
.data(world.features)
|
|
.enter()
|
|
.append("path")
|
|
.attr("d", path)
|
|
.style("fill", function (d) {
|
|
if (ratingsData[d.properties.name]["Average Rating"] === 0) return "gray";
|
|
return color(ratingsData[d.properties.name]["Average Rating"]);
|
|
})
|
|
.style("stroke", "white")
|
|
.on("mouseover",function (d) {
|
|
var rating = ratingsData[d.properties.name]["Average Rating"];
|
|
d.rating = rating > 0 ? rating : "N/A";
|
|
d.users = ratingsData[d.properties.name]["Number of Users"] || "N/A";
|
|
d.game = selectedGame;
|
|
tip.show(d);
|
|
d3.select(this).style("stroke-width", 2);
|
|
})
|
|
.on("mouseout", function (d) {
|
|
tip.hide(d);
|
|
d3.select(this).style("stroke-width", 0.3);
|
|
});
|
|
}
|
|
|
|
function ready(error, world, gameData) {
|
|
var games = [...new Set(gameData.map((item) => item.Game))].sort();
|
|
|
|
d3.select("#gameDropdown")
|
|
.selectAll("options")
|
|
.data(games)
|
|
.enter()
|
|
.append("option")
|
|
.text(function (d) {
|
|
return d;
|
|
}).attr("value", function (d) {
|
|
return d;
|
|
});
|
|
|
|
d3.select("#gameDropdown").on("change",function () {
|
|
createMapAndLegend(world, gameData, d3.select(this).property("value"));
|
|
});
|
|
|
|
createMapAndLegend(world, gameData, games[0]);
|
|
|
|
svg
|
|
.append("path")
|
|
.datum(topojson.mesh(world.features, (a, b) => a.id !== b.id))
|
|
.attr("class", "names")
|
|
.attr("d", path);
|
|
} |