170 lines
4.8 KiB
HTML
170 lines
4.8 KiB
HTML
<!doctype html>
|
|
<!-- cse6242 s21 -->
|
|
|
|
<!-- run: http-server & -->
|
|
|
|
<head>
|
|
<title>Running Total of TMDb Movies by Year</title>
|
|
|
|
<style>
|
|
.bar {
|
|
fill: steelblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<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>
|
|
|
|
<script>
|
|
// define the dimensions and margins for the graph
|
|
var margin = { top: 20, right: 30, bottom: 30, left: 63.2 },
|
|
width = 960 - margin.left - margin.right,
|
|
height = 500 - margin.top - margin.bottom;
|
|
|
|
const full_width = 960;
|
|
const full_height = 500;
|
|
const graph_content_width = 960 - (margin.left + margin.right);
|
|
const graph_content_height = 500 - (margin.top + margin.bottom);
|
|
|
|
// define function to parse time in years format
|
|
var parseYear = d3.timeParse("%Y");
|
|
var parseFormat = d3.timeFormat("%Y");
|
|
|
|
// create scales x & y for X and Y axis and set their ranges
|
|
var x = d3.scaleBand().range([0, graph_content_width]).padding(0.001);
|
|
|
|
var y = d3.scaleLinear().range([graph_content_height, 0]);
|
|
|
|
// append svg element to the body of the page
|
|
// set dimensions and position of the svg element
|
|
var svg = d3
|
|
.select("body")
|
|
.append("svg")
|
|
.attr("width", full_width)
|
|
.attr("height", full_height)
|
|
.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
// Get the data
|
|
var pathToCsv = "q3.csv"; // path to csv
|
|
|
|
d3.dsv(",", pathToCsv, function (d) {
|
|
return {
|
|
year: parseFormat(parseYear(d.year)),
|
|
running_total: +d.running_total,
|
|
// format data attributes if required
|
|
};
|
|
})
|
|
.then(function (data) {
|
|
console.log(data); // you should see the data in your browser's developer tools console
|
|
|
|
/* 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
|
|
svg
|
|
.selectAll(".bar")
|
|
.data(data)
|
|
.enter()
|
|
.append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function (d) {
|
|
return x(d.year);
|
|
})
|
|
.attr("width", x.bandwidth())
|
|
.attr("y", function (d) {
|
|
return y(d.running_total);
|
|
})
|
|
.attr("height", function (d) {
|
|
return graph_content_height - y(d.running_total);
|
|
});
|
|
|
|
// Add the X Axis
|
|
svg
|
|
.append("g")
|
|
.attr("id", "x_axis")
|
|
.attr("transform", "translate(0, " + graph_content_height + ")")
|
|
.call(
|
|
d3.axisBottom(x).tickValues(
|
|
x.domain().filter(function (d, i, curr) {
|
|
return d % 10 === 0;
|
|
}),
|
|
),
|
|
);
|
|
|
|
// Add the text label for X Axis
|
|
svg
|
|
.append("g")
|
|
.append("text")
|
|
.attr("id", "x_axis_label")
|
|
.attr("y", graph_content_height + margin.top + 20)
|
|
.attr("x", width / 2)
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Year");
|
|
|
|
// Add the Y Axis
|
|
svg.append("g").attr("id", "y_axis").call(d3.axisLeft(y));
|
|
|
|
// Add the text label for Ys axis
|
|
svg
|
|
.append("g")
|
|
.append("text")
|
|
.attr("id", "y_axis_label")
|
|
// .attr("transform", "rotate(-90)")
|
|
.attr(
|
|
"transform",
|
|
`rotate(-90), translate(${-height / 2 + margin.top + 30},${
|
|
-margin.left + 20
|
|
})`,
|
|
)
|
|
// .attr("y", (graph_content_height / 24))
|
|
// .attr("x", (graph_content_width /100))
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Running Total");
|
|
|
|
// Add the Title
|
|
svg
|
|
.append("text")
|
|
.attr("id", "title")
|
|
.attr("x", graph_content_width / 2)
|
|
.attr("y", -(margin.top / 2))
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "14px")
|
|
.style("text-decoration", "underline")
|
|
.text("Running Total of TMDb Movies by Year");
|
|
|
|
// Add the credit
|
|
svg
|
|
.append("text")
|
|
.attr("id", "credit")
|
|
.attr("x", graph_content_width - 20)
|
|
.attr("y", graph_content_height + margin.top + 20)
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "14px")
|
|
.style("text-decoration", "underline")
|
|
.text("tlou31");
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
</script>
|
|
|
|
</body>
|