100 lines
2.6 KiB
HTML
100 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- run: http-server & -->
|
|
|
|
<head>
|
|
<title>Running Total of TMDb Movies by Year</title>
|
|
<style>
|
|
</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 = 100
|
|
width = 800 - margin,
|
|
height = 500 - 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(1);
|
|
var y = d3.scaleLinear().range([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", 800)
|
|
.attr("height", 500);
|
|
|
|
var g = svg.append("g").attr("transform", "translate(75 , 50)");
|
|
|
|
g.append("text")
|
|
.attr("x", (width / 2))
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "16px")
|
|
.text("Running Total of TMDb Movies by Year");
|
|
|
|
g.append("text")
|
|
.attr("x", width - 30)
|
|
.attr("y", height + 30)
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", "16px")
|
|
.text("psrinivasan48");
|
|
|
|
// Get the data
|
|
var pathToCsv = "q3.csv";
|
|
|
|
d3.dsv(",", pathToCsv, function (d) {
|
|
return {
|
|
year: +d.year,
|
|
running_total: +d.running_total
|
|
}
|
|
}).then(function (data) {
|
|
console.log(data);
|
|
x.domain(data.map(function(d){return d.year}));
|
|
y.domain([0, d3.max(data.map(function(d){return d.running_total}))]);
|
|
|
|
g.selectAll("bar").data(data).enter().append("rect")
|
|
.attr("x", function(d){return x(d.year)})
|
|
.attr("y", function(d){return y(d.running_total)})
|
|
.attr("fill", "steelblue")
|
|
.attr("width", 5)
|
|
.attr("height", function(d) { return height - y(d.running_total);});
|
|
|
|
g.append("g").attr("transform", "translate(0," +height+")")
|
|
.call(d3.axisBottom(x).tickValues(x.domain().filter(function(d,i){ return !(parseInt(d)%10)})));
|
|
|
|
g.append("g").call(d3.axisLeft(y));
|
|
|
|
g.append("text")
|
|
.attr("transform","translate(" + width/2+ " ," + (height + 30) + ")")
|
|
.style("text-anchor", "middle")
|
|
.text("year");
|
|
|
|
g.append("text")
|
|
.attr("y", -50)
|
|
.attr("x", -height/2)
|
|
.attr("transform","rotate(-90)")
|
|
.style("text-anchor", "middle")
|
|
.text("running_total");
|
|
|
|
|
|
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|