Public
Edited
Apr 19, 2023
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
movies_viz = {
// define plotting parameters
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));

// create the container
const svg = d3
.create("svg")
.attr("width", barWidth + barMargin.left + barMargin.right)
.attr("height", barHeight + barMargin.top + barMargin.bottom);

//added a descriptive title for the viz
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();
}
Insert cell
imdb_top_1000@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
//created tooltip to show movie summary details on hovering over a bar in bar chart
Tooltip = {
let color = "green";
let rects = d3.select(movies_viz).selection("g#bars").selectAll("rect");
rects.on("mouseover.highlight", function (d) {
let rect = d3.select(this);
rect
.attr("fill", color)
.append("svg:title")
.text(d => {return ('Movie Summary: ' + d.Overview)});
});
rects.on("mouseout.highlight", function (d) {
let rect = d3.select(this);
rect.attr("fill", "green"); //purposefully made it green, similar to read reciepts
});

return
}
Insert cell
//- NOT WORKING - TRIED TO SHOW A LINE PROJECTING ON TO Y-AXIS WITH DATA OF EXACT GROSS VALUE OF A BAR WHEN HOVERED OVER IT - Kept for my reference

// Set up the SVG container
Line = {
const barMargin = { top: 15, right: 15, bottom: 180, left: 110 };
const barWidth = 800;
const barHeight = 650;
const svg = d3
.create("svg")
.attr("width", barWidth + barMargin.left + barMargin.right)
.attr("height", barHeight + barMargin.top + barMargin.bottom);

// Define the data for the line
var lineData = [
{x: 100, y: 150},
{x: 400, y: 150}
];

// Define the line function
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });

// Draw the line
var lineGraph = svg.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "none");
return
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more