movies_viz = {
const barMargin = { top: 80, right: 15, bottom: 180, left: 110 };
const barWidth = 1120;
const barHeight = 650;
const barX = d3
.scaleBand()
.domain(imdbData1.map((d) => d.Series_Title))
.range([barMargin.left, barWidth])
.padding(0.2);
const barXAxis = (g) =>
g
.attr("transform", `translate(0, ${barHeight})`)
.call(d3.axisBottom().scale(barX));
const barY = d3
.scaleLinear()
.domain([10, d3.max(imdbData1, (d) => d.Gross) + 15])
.range([barHeight, barMargin.top]);
const barYAxis = (g) =>
g
.attr("transform", `translate(${barMargin.left}, 0)`)
.call(d3.axisLeft().scale(barY));
const svg = d3
.create("svg")
.attr("width", barWidth + barMargin.left + barMargin.right)
.attr("height", barHeight + barMargin.top + barMargin.bottom);
svg.append("text")
.attr("x", barWidth / 2)
.attr("y", barMargin.top)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.text("How much money did top rated movies make?")
svg.append("g").call(barXAxis)
.selectAll("text")
.style("text-anchor", "end") // set text anchor to end
.attr("dx", "-.8em") // set text offset
.attr("dy", ".15em") // set text offset
.attr("transform", "rotate(-45)"); // rotate text by -45 degrees
// add x axis
svg
.append("text")
.attr("x", barWidth / 2) // center label
.attr("y", barHeight + barMargin.bottom + barMargin.top - 5)
.attr("text-anchor", "middle")
.attr("font-family", "sans serif")
.text("Movies");
// add y axis
svg.append("g").call(barYAxis);
svg
.append("text")
// .attr("x", barWidth / 2) // center label
// .attr("y", barHeight)
// .attr("font-size", 10)
.attr("font-family", "sans serif")
.attr(
"transform",
`translate(${barMargin.left / 4}, ${barHeight / 2})rotate(-90)`
)
.attr("text-anchor", "middle")
.text("Box office ($)");
// add bars
svg
.append("g")
.attr("id", "bars")
.selectAll("rect")
.data(imdbData1)
.join("rect")
.attr("width", barX.bandwidth())
.attr("x", (d) => barX(d.Series_Title))
.attr("height", 0)
.attr("y", barHeight)
.transition()
.delay((d, i) => {
return 100 * i;
})
.attr("height", (d) => barHeight - barY(d.Gross))
.attr("y", (d) => barY(d.Gross))
.attr("stroke", "black")
.attr("fill", "orange");
// added gross value of each bars for accurate data representation
svg
.append("g")
.attr("id", "numbers")
.selectAll(".Gross")
.data(imdbData1)
.join("text")
.attr('class','Gross')
.attr("text-anchor", "middle")
.attr("x", (d) => barX(d.Series_Title) + barX.bandwidth()/2)
.attr("y", barHeight - 5)
.attr("font-size", "13px")
.attr("transform", (d) => "rotate(-45 " + (barX(d.Series_Title) + barX.bandwidth()/6) + "," + (barY(d.Gross) - 30) + ")") // add rotation
.transition()
.delay((d, i) => {
return 100 * i;
})
.attr("y", (d) => barY(d.Gross) - 5)
.text(d => d.Gross)
return svg.node();
}