90 lines
2.7 KiB
HTML
90 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<meta charset="utf-8" />
|
|
<head>
|
|
<!-- add title -->
|
|
<script type="text/javascript" src="../lib/d3.v5.min.js"></script>
|
|
<script type="text/javascript" src="../lib/topojson.v2.min.js"></script>
|
|
<script type="text/javascript" src="../lib/d3-tip.min.js"></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="../lib/d3-geo-projection.v2.min.js"
|
|
></script>
|
|
<script type="text/javascript" src="../lib/d3-legend.min.js"></script>
|
|
<script type="application/javascript" src="script.js"></script>
|
|
<!-- import required libraries here -->
|
|
|
|
<style>
|
|
.d3-tip {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Add heading for the visualization -->
|
|
<h1>Average Rating of Board Games Across the World</h1>
|
|
|
|
<!-- Dropdown -->
|
|
Select Board Game:
|
|
<select id="gameDropdown"></select>
|
|
|
|
<!-- append visualization svg to this div-->
|
|
<svg id="choropleth" style="float: left">
|
|
<g id="legend" style="float: right"></g>
|
|
</svg>
|
|
<div id="student_id"></div>
|
|
</body>
|
|
|
|
<script>
|
|
// enter code to define margin and dimensions for svg
|
|
var margin = { top: 100, right: 50, bottom: 100, left: 10 };
|
|
var width = 1000 - margin.left - margin.right;
|
|
var height = 700 - margin.top - margin.bottom;
|
|
|
|
// enter code to create svg
|
|
var svg = d3
|
|
.select("#choropleth")
|
|
.attr("transform", "translate(50, 50)")
|
|
.attr("height", height)
|
|
.attr("width", width)
|
|
.append("g");
|
|
|
|
d3.select("#student_id").text("tlou31");
|
|
// .attr("transform", "translate(800, 490)");
|
|
|
|
|
|
const colors = d3.schemeBlues[4];
|
|
|
|
// enter code to define tooltip
|
|
const tip = d3
|
|
.tip()
|
|
.attr("id", "tooltip")
|
|
.attr("class", "d3-tip")
|
|
.attr("offset", [-1, 0])
|
|
.html(function (d) {
|
|
return `<strong>Country: </strong><span class='details'>${d.properties.name}<br></span>
|
|
<strong>Game: </strong><span class='details'>${d.game}<br/></span>
|
|
<strong>Number of Users: </strong><span class='details'>${d.users}<br/></span>
|
|
<strong>Avg Rating: </strong><span class='details'>${d.rating}<br/></span>`;
|
|
});
|
|
|
|
svg.call(tip);
|
|
|
|
// enter code to define projection and path required for Choropleth
|
|
var path = d3.geoPath().projection(d3.geoRobinson());
|
|
|
|
// define any other global variables
|
|
Promise.all([
|
|
d3.json("world_countries.json"),
|
|
d3.csv("ratings-by-country.csv"),
|
|
]).then(
|
|
// enter code to call ready() with required arguments
|
|
(data) => ready(null, data[0], data[1])
|
|
);
|
|
</script>
|
|
</html>
|