94 lines
2.8 KiB
HTML
94 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Running Total of TMDb Movies by Year</title>
|
|
<style>
|
|
.bar {
|
|
fill: steelblue;
|
|
}
|
|
</style>
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
<body>
|
|
<svg width="960" height="500"></svg>
|
|
<script>
|
|
|
|
var svg = d3.select("svg"),
|
|
margin = 200,
|
|
width = svg.attr("width") - margin,
|
|
height = svg.attr("height") - margin
|
|
|
|
svg.append("text")
|
|
.attr("id","title")
|
|
.attr("transform", "translate(300,0)")
|
|
.attr("y", 50)
|
|
.attr("font-size", "20px")
|
|
.text("Running Total of TMDb Movies by Year");
|
|
|
|
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
|
|
yScale = d3.scaleLinear().range([height, 100]);
|
|
|
|
var g = svg.append("g")
|
|
.attr("transform", "translate(" + 100 + "," + 100 + ")");
|
|
|
|
d3.csv("q3.csv", function(error, data) {
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
|
|
xScale.domain(data.map(function(d) { return d.year; }));
|
|
var maximum = d3.max(data, function(d) { return d.running_total; });
|
|
console.log("I'm here");
|
|
yScale.domain([0, 160885]);
|
|
//d3.max(data, function(d) { return d.running_total;
|
|
|
|
var xAxis = d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(d,i){ return !(i%10)}));
|
|
var yAxis = d3.axisLeft(yScale).tickFormat(function(d){return d;});
|
|
|
|
svg.append("g")
|
|
.attr("transform", "translate(100," + height + ")")
|
|
.attr("id", "x_axis")
|
|
.call(xAxis);
|
|
|
|
svg.append("text")
|
|
.attr("id", "x_axis_label")
|
|
.attr("y", height + 50)
|
|
.attr("x", width - 300)
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Year");
|
|
|
|
svg.append("text")
|
|
.attr("id","credit")
|
|
.attr("y", height + 50 )
|
|
.attr("x", width+100)
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("mpearl3");
|
|
|
|
svg.append("g")
|
|
.attr("id", "y_axis")
|
|
.attr("transform", "translate(100,0)")
|
|
.call(yAxis);
|
|
|
|
svg.append("text")
|
|
.attr("id", "y_axis_label")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", height -200)
|
|
.attr("x", -100)
|
|
.attr("dy", "-5.1em")
|
|
.attr("text-anchor", "end")
|
|
.attr("stroke", "black")
|
|
.text("Running Total");
|
|
|
|
svg.selectAll(".bar")
|
|
.data(data)
|
|
.enter().append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function(d) { return xScale(d.year) + 100; })
|
|
.attr("y", function(d) { return yScale(d.running_total); })
|
|
.attr("width", xScale.bandwidth())
|
|
.attr("height", function(d) { return height - yScale(d.running_total);});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |