Files
louiscklaw 9035c1312b update,
2025-02-01 02:09:32 +08:00

219 lines
7.2 KiB
JavaScript

function init(){
var margin = 50; //equal margins on all sides
var width = 700 - 2 * margin;
var height = 500 - 2 * margin;
var widthb = 800 - 2 * margin;
var heightb = 250 - 2 * margin;
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var xb = d3.scaleLinear().range([0, widthb]);
var yb = d3.scaleBand().range([heightb, 0]);
var svgFig = d3.select("#container")
.append("svg")
.attr("width", width + 2 * margin)
.attr("height", height + 2 * margin)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
var barPlot = d3.select("#barplot")
.append("svg")
.attr("width", widthb + 2 * margin)
.attr("height", heightb + 2 * margin)
.append("g")
.attr("transform", "translate(" + (2*margin) + "," + margin + ")")
.attr("id", "barsvg");
d3.dsv(",", "average-rating.csv", function (d) {
return d;
}).then(function (data) {
var yearwiseData = {};
var max = Number.NEGATIVE_INFINITY;
var min = Number.POSITIVE_INFINITY;
data.forEach(function (d) {
var yearData = yearwiseData[d.year] || {};
yearData.count = yearData.count || {};
var rating = Math.floor(+d.average_rating);
yearData.count[rating] =
(yearData.count[rating] || 0) + 1;
if (yearData.count[rating] > max) max = yearData.count[rating];
if (yearData.count[rating] < min) min = yearData.count[rating];
yearwiseData[d.year] = yearData;
});
x.domain([1, 10]);
y.domain([min, max]);
var i = 0;
var years = [];
var colors = [];
for (var year in yearwiseData) {
if (+year < 2015 || +year > 2019) continue;
console.log(year);
var yearData = yearwiseData[year].count;
var countData = [];
for (var j = 1; j <= 10; j++)
yearData[j] = yearData[j] || 0;
for (var count in yearData)
countData.push({
"count": +count,
"value": yearData[+count]
});
var lg = d3.line().x(function (d) {
return x(d.count);
}).y(function (d) {
return y(d.value)
});
svgFig.append("path")
.data([countData])
.attr("class", "line")
.attr("d", lg)
.style("stroke", d3.schemeCategory10[i]);
svgFig.selectAll("circles")
.data(countData)
.enter()
.append("circle")
.attr("fill", d3.schemeCategory10[i])
.attr("cx", function (d) {
return x(d.count)
})
.attr("data-year", year)
.attr("data-count", d => d.value)
.attr("cy", function (d) {
return y(d.value)
})
.attr("r", 4)
.on('mouseover', function (d) {
d3.select(this).attr("r", 8);
var year = d3.select(this).attr("data-year");
if(+d.value > 0){
var ccol = d3.select(this).attr("fill");
plotHorizontalBarChart(year, d.count, data, ccol);
}
}).on('mouseout', function (d) {
d3.select(this).attr("r", 4);
d3.select("#barsvg").html("");
});
years.push(year);
colors.push(d3.schemeCategory10[i]);
i++;
}
svgFig.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svgFig.append("g")
.call(d3.axisLeft(y));
var color = d3.scaleOrdinal()
.domain(years).range(colors);
var legend = d3.legendColor()
.scale(color);
var legSvg = d3.selectAll("#legend").append("svg")
.attr("transform", "translate(20, 10)");
legSvg.append("g")
.attr("class", "legend")
.call(legend);
svgFig.append("text")
.attr("x", (width / 2))
.attr("y", -40)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Board Games by Rating (2015-2019)");
svgFig.append("text")
.attr("x", width/2)
.attr("y", -25)
.attr("text-anchor", "middle")
.style("font-size", "13px")
.text("psrinivasan48")
.attr("fill", "blue");
svgFig.append("text")
.attr("transform", "translate(" + width / 2 + " ," + (height + 30) + ")")
.style("text-anchor", "middle")
.text("Rating");
svgFig.append("text")
.attr("y", -30)
.attr("x", -height / 2)
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.text("Count");
}).catch(function (error) {
console.log(error);
});
function plotHorizontalBarChart(year, average_rating, data, ccol) {
var gameData = [];
var max = Number.NEGATIVE_INFINITY;
data.forEach(function (d) {
if (d.year === year && Math.floor(+d.average_rating) == average_rating) {
gameData.push({
"name": d.name.substring(0, 10),
"count": +d.users_rated
});
if (+d.users_rated > max) max = +d.users_rated;
}
});
gameData = gameData.sort(function (a, b) {
return d3.ascending(+a.count, +b.count);
});
gameData = gameData.slice(gameData.length-5, gameData.length);
console.log(gameData);
xb.domain([0, max]);
yb.domain(gameData.map(function (d) {
return d.name;
})).padding(.2);
barPlot.selectAll("myRect")
.data(gameData)
.enter()
.append("rect")
.attr("x", xb(0))
.attr("y", function (d) {
return yb(d.name);
})
.attr("width", function (d) {
return xb(d.count);
})
.attr("height", yb.bandwidth())
.attr("fill", ccol);
barPlot.append("g")
.call(d3.axisLeft(yb));
barPlot.append("g")
.attr("transform", "translate(0," + heightb + ")")
.call(d3.axisBottom(xb));
barPlot.append("text")
.attr("x", (widthb / 2))
.attr("y", -15)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Top 5 Board Games of "+year+" with Rating "+average_rating);
barPlot.append("text")
.attr("transform", "translate(" + widthb / 2 + " ," + (heightb + 30) + ")")
.style("text-anchor", "middle")
.text("Number of Users");
barPlot.append("text")
.attr("y", -80)
.attr("x", -heightb / 2)
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.text("Games");
}
}