85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!DOCTYPE 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="Q5.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 -->
|
|
<span>
|
|
Select Board Game: <select id="gameDropdown"></select>
|
|
</span>
|
|
<!-- append visualization svg to this div-->
|
|
<div>
|
|
<div id="choropleth" style="float:left"></div>
|
|
<div id="legend" style="float: right"></div>
|
|
</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')
|
|
.append('svg').attr("transform", "translate(50, 50)")
|
|
.attr('height', height)
|
|
.attr('width', width);
|
|
svg.append("text")
|
|
.text("psrinivasan48")
|
|
.attr("transform", "translate(800, 490)");
|
|
|
|
svg = svg.append("g");
|
|
|
|
const colors = d3.schemeBlues[4];
|
|
|
|
// enter code to define tooltip
|
|
const tip = d3.tip()
|
|
.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> |