117 lines
3.1 KiB
HTML
117 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- cse6242 s21 -->
|
|
|
|
<!-- run: http-server & -->
|
|
|
|
<head>
|
|
<style>
|
|
<!-- define CSS rules -->
|
|
</style>
|
|
<title>Running Total of TMDb Movies by Year</title>
|
|
</head>
|
|
|
|
<body>
|
|
<text id="titlep">Running Total of TMDb Movies by Year</text>
|
|
<script src="lib/d3/d3.min.js"></script>
|
|
<script src="lib/d3-dsv/d3-dsv.min.js"></script>
|
|
<script src="lib/d3-fetch/d3-fetch.min.js"></script>
|
|
<svg width="700" height="500"></svg>
|
|
|
|
<text id="credit">tlou31</text>
|
|
|
|
<script>
|
|
// define the dimensions and margins for the graph
|
|
var svg = d3.select("svg")
|
|
margin = 200,
|
|
width = svg.attr("width") - margin,
|
|
height = svg.attr("height") - margin;
|
|
|
|
|
|
// define function to parse time in years format
|
|
|
|
|
|
// create scales x & y for X and Y axis and set their ranges
|
|
var x = d3.scaleBand().range([0, width]).padding(0.04),
|
|
y = d3.scaleLinear().range([height, 0]);
|
|
|
|
|
|
// append svg element to the body of the page
|
|
// set dimensions and position of the svg element
|
|
|
|
var g = svg.append("g")
|
|
.attr("transform", "translate(" + 100 + "," + 100 + ")");
|
|
|
|
// Get the data
|
|
var pathToCsv = "q3.csv"; // path to csv
|
|
|
|
d3.dsv(",", pathToCsv, function (d) {
|
|
return {
|
|
// format data attributes if required
|
|
year: d.year,
|
|
running_total: d.running_total
|
|
};
|
|
}).then(function (data) {
|
|
|
|
/* Create bar plot using data from csv */
|
|
|
|
// set the domains of X and Y scales based on data
|
|
x.domain(data.map(function(d) { return d.year; }));
|
|
y.domain([0, d3.max(data, function(d) { return +d.running_total;} )]);
|
|
|
|
// Add bars to svg - create new elements based on your data
|
|
g.selectAll(".bar")
|
|
.data(data)
|
|
.enter().append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function(d) { return x(d.year); })
|
|
.attr("y", function(d) { return y(d.running_total); })
|
|
.attr("width", x.bandwidth())
|
|
.attr("height", function(d) { return height - y(d.running_total); })
|
|
|
|
|
|
// Add the X Axis
|
|
g.append("g")
|
|
.attr("transform", "translate(" + 0 + "," + 300 + ")")
|
|
.attr("id", "x_axis")
|
|
.call(d3.axisBottom(x)
|
|
.tickValues(x.domain().filter(function(d, i, curr) {
|
|
return (d % 10) === 0; }
|
|
))
|
|
);
|
|
|
|
// Add the text label for X Axis
|
|
g.append("text")
|
|
.attr("y", height + 50)
|
|
.attr("x", width - 200)
|
|
.attr("id", "x_axis_label")
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Year");
|
|
|
|
// Add the Y Axis
|
|
g.append("g")
|
|
.attr("id", "y_axis")
|
|
.call(d3.axisLeft(y));
|
|
|
|
// Add the text label for Y axis
|
|
g.append("g")
|
|
.append("text")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", 10)
|
|
.attr("x", -100)
|
|
.attr("dy", "-5.1em")
|
|
.attr("id", "y_axis_label")
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Running Total");
|
|
|
|
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|