291 lines
8.8 KiB
HTML
291 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<title>Games Rating: 2015 - 2019</title>
|
|
<meta charset="utf-8" />
|
|
|
|
<!-- define CSS rules -->
|
|
<style>
|
|
.line {
|
|
fill: none;
|
|
stroke: black;
|
|
}
|
|
#bar_chart_title {
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="text/javascript" src="../lib/d3.v5.min.js"></script>
|
|
<script type="text/javascript" src="../lib/d3-dsv.min.js"></script>
|
|
|
|
<!-- Example hiding an element -->
|
|
<!-- <g id="" style"display:none;" /> -->
|
|
|
|
<!-- Example of styling an element -->
|
|
<!-- svg_element.style()-->
|
|
|
|
<script>
|
|
barchart_Colors = ["#1f77b4", "#2ca02c", "#9467bd", "#d62728", "#ff7f0e"];
|
|
var margin = { top: 60, right: 180, bottom: 60, left: 80 };
|
|
var width = 1000 - margin.left - margin.right;
|
|
var height = 400 - margin.top - margin.bottom;
|
|
|
|
// a. [3 points] Create a line chart.
|
|
// b. [3 points] Line styling, legend, title and username.
|
|
var body = d3.select("body");
|
|
var svg_line_chart = body.append("svg").attr("id", "line_chart");
|
|
|
|
var g_container = svg_line_chart.append("g").attr("id", "container");
|
|
|
|
var g_lines = g_container.append("g").attr("id", "lines");
|
|
var g_x_axis_lines = g_container.append("g").attr("id", "x-axis-lines");
|
|
var g_y_axis_lines = g_container.append("g").attr("id", "y-axis-lines");
|
|
var g_circles = g_container.append("g").attr("id", "circles");
|
|
|
|
var text_line_chart_title = g_container
|
|
.append("text")
|
|
.attr("id", "line_chart_title");
|
|
var text_credit = g_container.append("text").attr("id", "credit");
|
|
|
|
var g_legend = g_container.append("g").attr("id", "legend");
|
|
var text_element_x_axis_label = svg_line_chart.append("text");
|
|
var text_element_y_axis_label = svg_line_chart.append("text");
|
|
|
|
// c. [5 points] Create a horizontal bar chart,
|
|
// d. [3 points] Bar styling, grid lines and title
|
|
// e. [3 points] Mouseover Event Handling
|
|
// f. [3 points] Mouseout Event Handling
|
|
|
|
var div_bar_chart_title = body.append("div").attr("id", "bar_chart_title");
|
|
var g_container_2 = svg_line_chart.append("g").attr("id", "container_2");
|
|
var g_bars = g_container_2.append("g").attr("id", "bars");
|
|
var rect = g_bars.append("rect");
|
|
|
|
var g_x_axis_bars = g_container_2.append("g").attr("id", "x-axis-bars");
|
|
var g_y_axis_bars = g_container_2.append("g").attr("id", "y-axis-bars");
|
|
var text_bar_x_axis_label = g_container_2
|
|
.append("text")
|
|
.attr("id", "bar_x_axis_label");
|
|
var text_bar_y_axis_label = g_container_2
|
|
.append("text")
|
|
.attr("id", "bar_y_axis_label");
|
|
|
|
// define the dimensions and margins for the line chart
|
|
// Use the Margin Convention referenced in the HW document to layout your graph
|
|
|
|
// define the dimensions and margins for the bar chart
|
|
|
|
// append svg element to the body of the page
|
|
// set dimensions and position of the svg element
|
|
|
|
// NOTE: block original DOM element
|
|
// let svg = d3
|
|
// .select("body")
|
|
// .append("svg")
|
|
// .attr("id", "line_chart")
|
|
// .attr("width", width + margin.left + margin.right)
|
|
// .attr("height", height + margin.top + margin.bottom)
|
|
// .append("g")
|
|
// .attr("id", "container")
|
|
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
svg_line_chart
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom);
|
|
|
|
// Fetch the data
|
|
var pathToCsv = "average-rating.csv";
|
|
text_credit.text("tlou31");
|
|
|
|
text_element_x_axis_label
|
|
.attr("x", "100")
|
|
.attr("y", "30")
|
|
.text("element_x_axis_label");
|
|
text_element_y_axis_label
|
|
.attr("x", "100")
|
|
.attr("y", "30")
|
|
.text("element_y_axis_label");
|
|
|
|
text_line_chart_title
|
|
.attr("x", "200")
|
|
.attr("y", "30")
|
|
.text("Board games by Rating 2015-2019");
|
|
|
|
function plot_Line_Chart(data, all_data, Years) {
|
|
var margin = { top: 60, right: 180, bottom: 60, left: 80 };
|
|
var width = 1000 - margin.left - margin.right;
|
|
var height = 400 - margin.top - margin.bottom;
|
|
|
|
var xScale = d3
|
|
.scaleLinear()
|
|
.domain([0, d3.max(data, (d) => d.avg_rating)])
|
|
.range([0, width]);
|
|
|
|
var yScale = d3
|
|
.scaleLinear()
|
|
.domain([0, d3.max(data, (d) => d.count)])
|
|
.range([height, 0]);
|
|
|
|
var xAxis = d3.axisBottom(xScale);
|
|
var yAxis = d3.axisLeft(yScale);
|
|
|
|
for (y in Years) {
|
|
console.log({ y });
|
|
plotdata = data.filter((n, i) => n.year == Years[y]);
|
|
plotdata = plotdata
|
|
.slice()
|
|
.sort(
|
|
(a, b) =>
|
|
d3.ascending(parseInt(a.avg_rating), parseInt(b.avg_rating)) ||
|
|
d3.ascending(parseInt(a.avg_rating), parseInt(b.avg_rating))
|
|
);
|
|
|
|
g_lines
|
|
.attr("transform", "translate(30,20)")
|
|
.append("path")
|
|
.datum(plotdata)
|
|
.attr("fill", "none")
|
|
.attr("stroke", barchart_Colors[y])
|
|
.attr("stroke-width", 1.5)
|
|
.attr(
|
|
"d",
|
|
d3
|
|
.line()
|
|
.x((d) => xScale(d.avg_rating))
|
|
.y((d) => yScale(d.count))
|
|
);
|
|
|
|
g_circles
|
|
.attr("transform", "translate(30,20)")
|
|
.selectAll(".dot" + y)
|
|
.data(plotdata)
|
|
.enter()
|
|
.append("circle")
|
|
.attr("class", "dot" + y)
|
|
.attr("fill", barchart_Colors[y])
|
|
.attr("cx", (d) => xScale(d.avg_rating))
|
|
.attr("cy", (d) => yScale(d.count))
|
|
.attr("r", 5)
|
|
.on("mouseover", function (d, i) {
|
|
d3.select(this).attr("r", 10);
|
|
showBarGraph(d, i);
|
|
})
|
|
.on("mouseout", function (d, i) {
|
|
d3.select(this).attr("r", 5);
|
|
hideBarGraph();
|
|
});
|
|
}
|
|
|
|
g_x_axis_lines
|
|
.attr("transform", "translate(30,300)")
|
|
.call(d3.axisBottom(xScale));
|
|
g_y_axis_lines
|
|
.attr("transform", "translate(30,20)")
|
|
.call(d3.axisLeft(yScale));
|
|
|
|
for (y in Years) {
|
|
g_legend
|
|
.append("rect")
|
|
.attr("height", "15px")
|
|
.attr("width", "15px")
|
|
.attr("fill", barchart_Colors[y])
|
|
.attr("x", width)
|
|
.attr("y", y * 20);
|
|
|
|
g_legend
|
|
.append("text")
|
|
.text(Years[y])
|
|
.attr("fill", barchart_Colors[y])
|
|
.attr("x", width + 20)
|
|
.attr("y", y * 20 + 12);
|
|
}
|
|
|
|
text_element_x_axis_label
|
|
.attr("transform", "translate(300,300)")
|
|
.text("Rating");
|
|
text_element_y_axis_label
|
|
.attr("transform", "translate(-20,250) rotate(-90)")
|
|
.text("Count");
|
|
|
|
console.log("done ?");
|
|
}
|
|
|
|
d3.dsv(",", pathToCsv, function (d) {
|
|
return {
|
|
// format data attributes if required
|
|
name: d.name.slice(0, 10),
|
|
year: +d.year,
|
|
average_rating: d.average_rating,
|
|
users_rated: d.users_rated,
|
|
};
|
|
})
|
|
.then(function (data) {
|
|
// you should see the data in your browser's developer tools console
|
|
// console.log(data);
|
|
|
|
/* Create bar plot using data from csv */
|
|
data = data.filter((n, i) => n.year < 2020);
|
|
data = data.filter((n, i) => n.year > 2014);
|
|
|
|
var plotdata = [];
|
|
var c = d3
|
|
.nest()
|
|
.key((d) => d.year)
|
|
.key((d) => Math.floor(d.average_rating))
|
|
.rollup((v) => {
|
|
console.log("find me ?");
|
|
plotdata.push({
|
|
year: v[0].year,
|
|
count: v.length,
|
|
avg_rating: Math.floor(v[0].average_rating),
|
|
});
|
|
|
|
return {
|
|
avg_rating: Math.floor(
|
|
d3.mean(v, function (d) {
|
|
return d.average_rating;
|
|
})
|
|
),
|
|
};
|
|
})
|
|
.entries(data);
|
|
|
|
var Years = d3.map(plotdata, (d) => d.year).keys();
|
|
var avg_rating = d3.map(plotdata, (d) => d.avg_rating).keys();
|
|
|
|
for (y in Years) {
|
|
plotdata.push({ year: Years[y], count: 0, avg_rating: 0 });
|
|
for (a in avg_rating) {
|
|
// TODO: need review
|
|
plt_data_temp = plotdata.filter((n, i) => n.year == Years[y]);
|
|
|
|
plt_data_temp = plt_data_temp.filter(
|
|
(n, i) => n.avg_rating == avg_rating[a]
|
|
);
|
|
|
|
if (plt_data_temp.length == 0) {
|
|
plotdata.push({
|
|
year: Years[y],
|
|
count: 0,
|
|
avg_rating: avg_rating[a],
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
var all_data = data;
|
|
|
|
console.log({ data, plotdata, c, Years, avg_rating, all_data });
|
|
console.log({ plotdata, data, Years });
|
|
plot_Line_Chart(plotdata, data, Years);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
</script>
|
|
</body>
|