314 lines
9.1 KiB
JavaScript
314 lines
9.1 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 svgLineChart = d3
|
|
.select("#line_chart")
|
|
.attr("width", width + 2 * margin)
|
|
.attr("height", height + 2 * margin)
|
|
.attr("transform", "translate(" + margin + "," + margin + ")");
|
|
|
|
var g_container = svgLineChart.append("g").attr("id", "container")
|
|
.attr('transform',"translate(50,50)")
|
|
;
|
|
var g_lines = g_container.append("g").attr("id", "lines");
|
|
var g_circles = g_container.append("g").attr("id", "circles");
|
|
|
|
var svgFig = g_container;
|
|
|
|
// 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");
|
|
|
|
var barPlot = d3
|
|
.select("#bar_chart")
|
|
.attr("width", widthb + 2 * margin)
|
|
.attr("height", heightb + 2 * margin)
|
|
.append("g")
|
|
.attr("id", "container_2")
|
|
.attr("transform", "translate(" + 2 * margin + "," + margin + ")");
|
|
|
|
d3.dsv(",", "average-rating.csv", (d) => 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([0, 9]);
|
|
y.domain([0, 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 = 0; j <= 9; j++) yearData[j] = yearData[j] || 0;
|
|
|
|
for (var count in yearData)
|
|
countData.push({
|
|
count: +count,
|
|
value: yearData[+count],
|
|
});
|
|
|
|
var lg = d3
|
|
.line()
|
|
.x((d) => x(d.count))
|
|
.y((d) => y(d.value));
|
|
|
|
g_lines
|
|
.append("path")
|
|
.data([countData])
|
|
.attr("class", "line")
|
|
.attr("d", lg)
|
|
.style("stroke", d3.schemeCategory10[i]);
|
|
|
|
g_circles
|
|
.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");
|
|
console.log(+d.value)
|
|
|
|
if (+d.value > 0) {
|
|
var ccol = d3.select(this).attr("fill");
|
|
|
|
plotHorizontalBarChart(year, d.count, data, ccol);
|
|
document.querySelector('#bar_chart').style.display="block"
|
|
}else{
|
|
|
|
}
|
|
})
|
|
.on("mouseout", function (d) {
|
|
d3.select(this).attr("r", 4);
|
|
d3.select("#container_2").html("");
|
|
|
|
document.querySelector('#bar_chart').style.display="none"
|
|
});
|
|
|
|
years.push(year);
|
|
colors.push(d3.schemeCategory10[i]);
|
|
i++;
|
|
|
|
// console.log({
|
|
// year: 2019,
|
|
// d: { count: 6 },
|
|
// data,
|
|
// ccol: "#d62728",
|
|
// });
|
|
|
|
// if (year == 2019) {
|
|
// plotHorizontalBarChart(year, 6, data, "#d62728");
|
|
// }
|
|
}
|
|
|
|
svgFig
|
|
.append("g")
|
|
.attr("id", "x-axis-lines")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
svgFig.append("g").attr("id", "y-axis-lines").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)");
|
|
|
|
// <g id=”legend”> element for legend
|
|
console.log({ years });
|
|
console.log({ colors });
|
|
var g_legend = g_container
|
|
.append("g")
|
|
.attr("id", "legend")
|
|
.attr("transform", "translate(600, 30)")
|
|
.attr("class", "legend");
|
|
|
|
years.forEach((year, idx) => {
|
|
console.log(year);
|
|
g_legend
|
|
.append("text")
|
|
.attr("transform", "translate(10, " + idx * 20 + ")")
|
|
.text(year);
|
|
|
|
g_legend
|
|
.append("circle")
|
|
.attr("fill", colors[idx])
|
|
.attr("r", 6)
|
|
.attr("cy", idx * 20 - 5)
|
|
// .attr("transform", "translate(1, " + idx * 20 + ")")
|
|
.text(year);
|
|
});
|
|
|
|
// <text id=”line_chart_title”> element for line chart title
|
|
g_container
|
|
.append("text")
|
|
.attr("id", "line_chart_title")
|
|
.attr("x", width / 2)
|
|
.attr("y", -40)
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "16px")
|
|
.text("Board games by Rating 2015-2019")
|
|
.attr("transform", "translate(10, 10)");
|
|
|
|
// <text id=”credit”> element for GT username
|
|
g_container
|
|
.append("text")
|
|
.attr("id", "credit")
|
|
.attr("x", width / 2)
|
|
.attr("y", -25)
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "13px")
|
|
.text("tlou31")
|
|
.attr("fill", "blue");
|
|
|
|
// <text> element for x axis label
|
|
g_container
|
|
.append("text")
|
|
.attr("data-mark", "<text> element for x axis label")
|
|
.attr(
|
|
"transform",
|
|
"translate(" + width / 2 + " ," + (height + 30) + ")"
|
|
)
|
|
.style("text-anchor", "middle")
|
|
.text("Rating");
|
|
|
|
// <text> element for y axis label
|
|
g_container
|
|
.append("text")
|
|
.attr("data-mark", "<text> element for y axis label")
|
|
.attr("y", -30)
|
|
.attr("x", -height / 2)
|
|
.attr("transform", "rotate(-90)")
|
|
.style("text-anchor", "middle")
|
|
.text("Count");
|
|
})
|
|
.catch((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((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((d) => d.name)).padding(0.2);
|
|
|
|
barPlot
|
|
.append("g")
|
|
.attr("id", "bars")
|
|
.selectAll("myRect")
|
|
.data(gameData)
|
|
.enter()
|
|
.append("rect")
|
|
.attr("x", xb(0))
|
|
.attr("y", (d) => yb(d.name))
|
|
.attr("width", (d) => xb(d.count))
|
|
.attr("height", yb.bandwidth())
|
|
.attr("fill", ccol);
|
|
|
|
// y-axis-bars
|
|
barPlot.append("g").attr("id", "y-axis-bars").call(d3.axisLeft(yb));
|
|
|
|
// x-axis-bars
|
|
barPlot
|
|
.append("g")
|
|
.attr("id", "x-axis-bars")
|
|
.attr("transform", "translate(0," + heightb + ")")
|
|
.call(d3.axisBottom(xb));
|
|
|
|
d3.select("#bar_chart_title")
|
|
.attr("x", widthb / 2)
|
|
.attr("y", -15)
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "16px")
|
|
.text("top 5 most rated Games of " + year + " with rating " + average_rating);
|
|
|
|
// <text id=”bar_x_axis_label”> element for x axis label
|
|
barPlot
|
|
.append("text")
|
|
.attr("id", "bar_x_axis_label")
|
|
.attr("dm", "<text id=”bar_x_axis_label”> element for x axis label")
|
|
.attr(
|
|
"transform",
|
|
"translate(" + widthb / 2 + " ," + (heightb + 30) + ")"
|
|
)
|
|
.style("text-anchor", "middle")
|
|
.text("Number of Users");
|
|
|
|
barPlot
|
|
.append("text")
|
|
.attr("id", "bar_y_axis_label")
|
|
.attr("dm", "<text id=”bar_y_axis_label”> element for x axis label")
|
|
.attr("y", -80)
|
|
.attr("x", -heightb / 2)
|
|
.attr("transform", "rotate(-90)")
|
|
.style("text-anchor", "middle")
|
|
.text("Games");
|
|
}
|
|
}
|