Module4
This horizontal bar chart ranks the top 50 Hollywood films released between 2007 and 2011 by production budget. The visualization uses D3.js v3 with an SVG rendering approach, featuring a warm cream background and rose-colored bars that darken on hover. The chart is sorted in descending order of budget, with film titles displayed on the y-axis and budget values in millions of dollars on the x-axis. Hovering over a bar reveals the film title and exact budget via a tooltip. The data is loaded from a CSV file, with budgets sorted numerically to ensure accurate ranking. The minimalist design, soft color palette, and clear axis labels make the visualization easy to read, highlighting the financial scale of major Hollywood productions.Module4 is a horizontal bar chart that visualizes the production budgets of the top 50 Hollywood films released between 2007 and 2011. Designed as a static infographic with a warm cream background and rose-pink bars, the visualization ranks films from highest to lowest budget, making it easy to compare expenditures across blockbuster titles. Each bar is paired with hover effects that darken the color and display a tooltip with the film's name and exact budget. The x-axis shows budget in millions of dollars, while the y-axis lists the film titles. The dataset, sorted in descending order by budget, includes metadata like genre and ratings, though the main visual encoding focuses solely on budget comparison. This straightforward, elegant bar chart effectively highlights the financial scale of Hollywood's biggest productions during the 2007–2011 period.# Module4: Top 50 Hollywood Films Released from 2007-2011
## Overview
This horizontal bar chart visualizes the production budgets of the top 50 Hollywood films released between 2007 and 2011. The visualization ranks films from highest to lowest budget, with each film represented as a bar and its budget shown along the x-axis.
## Design
The chart uses a clean, warm color palette with a cream background (`#fff1e0`) and dusty rose bars (`#bb6d82`) that darken to a deeper maroon on hover, providing clear interactive feedback. The horizontal layout was chosen to accommodate the lengthy film titles along the y-axis.
## Data & Encoding
* **X-axis**: Linear scale showing film budget in millions of dollars ($m), ranging from 0 to the maximum budget.
* **Y-axis**: Ordinal scale listing the 50 films, sorted in descending order of budget.
* **Marks**: Horizontal bars representing each film's budget, with the bar length proportional to the budget value.
## Interactivity
Hovering over any bar displays a tooltip (via SVG <title>) revealing the film's name and its budget in millions of dollars. This provides a straightforward way to inspect exact values.
## Design
The visualization uses a warm cream background with muted rose bars that darken on hover, creating a clear and inviting reading experience. The axes are minimal, with the y-axis labels representing film names, and the x-axis showing budget in millions. The design is clean and simple, making it easy to compare the relative budgets of the top 50 films from 2007 to 2011.
## Title
Module4
## Files
- index.html
- top50HollywoodFilmsReleasedFrom2007_2011.csv
## Data
The dataset contains the top 50 Hollywood films from 2007-2011, including the film title, genre, Rotten Tomatoes and audience ratings, and budget in millions of dollars. The chart is sorted by budget in descending order.
## Visualization
This is a horizontal bar chart. The chart is drawn with SVG. Each film has one bar and a text label; the bars are sorted from highest to lowest budget. The length of each bar represents the film's budget in millions of US dollars. The y-axis is a categorical scale listing the film titles. The x-axis represents the budget scale.
The bars are hover-sensitive, using a darker color on mouseover. A tooltip shows the name of the film and its budget.
The visualization also includes a title: "Top 50 Hollywood films released from 2007-2011", and an axis label "Film budget ($m)".```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module4</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: #fff1e0;
font-family: Arial, sans-serif;
}
h1 {
color: #3B3D3B;
line-height: 50%;
}
p {
color: #3B3D3B;
line-height: 40%;
font-size: 16px;
}
rect {
fill: #bb6d82;
}
svg {
background-color: #fff1e0;
}
rect:hover {
fill: #723545;
}
.axis path,
.axis line {
fill: none;
stroke: #cccccc;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var body = d3.select('body');
body.append('h1')
.text('Top 50 Hollywood films released from 2007-2011')
body.append('p')
.text('Film budget ($m)')
var w = 1200;
var h = 800;
var padding = [ 0, 10, 20, 280 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("top50HollywoodFilmsReleasedFrom2007_2011.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.budget, +b.budget);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.budget;
}) ]);
heightScale.domain(data.map(function(d) { return d.hollywoodFilms; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
var labels = svg.selectAll("text")
.data(data)
.enter()
.append("text");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.hollywoodFilms);
})
.attr("width", function(d) {
return widthScale(d.budget);
})
.attr("height", heightScale.rangeBand())
.append("title")
.text(function(d) {
return d.hollywoodFilms + " film budget, " + d.budget + " ($m)";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
</script>
</body>
</html>
</code></pre>
## Design
SVG
## Notes
This was coded to specifically demonstrate sorting a dataset in
descending order by a specified column, then rendering that dataset as a
horizontal bar chart using ordinal and linear scales in D3. I saw one
similar in Scott Murray's book.
## References
Based on "Sortable Bar Chart" example from Scott Murray's "Interactive Data
Visualization for the Web," 2013. Also, based on the "Horizontal Bar Chart"
example from the d3js.org website, by Mike Bostock.
## Data
Top 50 Hollywood films released from 2007-2011. Original CSV by Connor
Knight, downloaded from [http://www.brightpoint.com/...](http://www.brightpoint.com/tech/dataviz/data/top50HollywoodFilmsReleasedFrom2007_2011.csv).
## Visualization
A horizontal bar chart titled "Top 50 Hollywood films released from 2007-2011" displaying film budget ($m) sorted in descending order. The bars are pinkish-red, and hover states darken to a deeper maroon. The chart includes a
title, an axis label, x and y axes with labels, and uses a light cream background. (The y-axis labels are implicit in this chart because the bar labels are the film names.)
The bars show budgets in millions of U.S. dollars, from 2007 to 2011, and the film
names along the y axis. A tooltip appears on hover.
Your tasks:
1. Modify the given index.html to:
- Move all inline CSS to an external stylesheet "style.css"
- Move all inline JS to an external JS file "module4.js"
- The JS should load the CSV via d3.csv and should include an array of 5 (or more) colors as a variable; this variable
will be used to set the fill of the bars based on genre.
- Use this array to fill each rectangle according to its genre.
- Add a legend to the chart, mapping each unique genre to a color.
- Make the visualization and all its parts more aesthetically pleasing.
Now, please generate the file "module4.js" that contains the JavaScript code for the visualization.
</body>
</html>```javascript
// module4.js
var margin = { top: 50, right: 30, bottom: 80, left: 200 },
width = 1000 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var color = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
d3.csv("top50HollywoodFilmsReleasedFrom2007_2011.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.budget, +b.budget);
});
x.domain([0, d3.max(data, function(d) { return +d.budget; })]);
y.domain(data.map(function(d) { return d.hollywoodFilms; }));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.hollywoodFilms);
})
.attr("width", function(d) {
return widthScale(d.budget);
})
.attr("height", heightScale.rangeBand())
.append("title")
.text(function(d) {
return d.hollywoodFilms + " film budget, " + d.budget + " ($m)";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
# Module4: Top 50 Hollywood Films by Budget (2007–2011)
## Overview
This horizontal bar chart visualizes the production budgets of the top 50 Hollywood films released between 2007 and 2011, with data sourced from a gist by Clevejones.
## Design
- **Layout**: Horizontal bar chart (1200×800 SVG canvas) with a warm cream background
- **Bars**: Rose-pink rectangles (#bb6d82) that darken to a deep maroon (#723545) on hover, providing clear interactive feedback
- **Scales**: Linear x-scale for budget values, ordinal y-scale for film titles
- **Axes**: X-axis shows budget in $m; y-axis labels are hidden for a cleaner look
- **Interaction**: Hover tooltips display the film name and budget
## Data
The dataset lists the top 50 Hollywood films by budget released between 2007 and 2011, with budgets ranging from $140 million to $300 million. Films are sorted in descending order by budget.
## Visualization
The graphic uses a horizontal bar chart to display film budgets. Each bar's length corresponds to a film's budget, with hover effects darkening bars for enhanced interactivity. Tooltips provide details on demand.
## Design
D3's linear and ordinal scales handle the mapping of budget values to bar lengths and film names to vertical positions. The bar chart is clean and simple, using a warm cream background and muted rose bars, and a large SVG canvas to accommodate the many films. The layout prioritizes the data by including just a minimal title and y-axis label, while the bars themselves convey the ranking clearly. Visual cues like a hover effect help the user explore the dataset. No interaction beyond these hovers is provided, but the straightforward bar-encoding of budget enables easy comparison of film budgets.# Module4: Top 50 Hollywood Films Released 2007-2011
## Overview
This horizontal bar chart visualizes the production budgets of the top 50 Hollywood films released between 2007 and 2011. The visualization presents film budgets in descending order, allowing viewers to quickly compare production costs across major motion pictures.
## Design
The chart employs a clean, minimal aesthetic with a warm cream background (#fff1e0) and muted rose bars (#bb6d82). The simple color scheme keeps the focus on the data while providing a soft, approachable feel. Films are sorted by budget from highest to lowest, creating an immediate visual hierarchy.
## Key Features
- **Horizontal bar chart** with a linear scale for budgets (ranging from $140M to $300M) and an ordinal scale for film titles
- **Interactive elements**: Bars darken on hover, and a tooltip displays each film's name and budget
- **Simple layout**: Title and axis label at top, with 1200x800 SVG canvas
- **Clean design**: Warm cream background (#fff1e0) with muted rose bars (#bb6d82) that darken on hover
## Data
The dataset lists the top 50 Hollywood films by budget (in millions of dollars) from 2007-2011. Films include:
- Pirates of the Caribbean: At World's End (300)
- Spider-Man 3 (258)
- Harry Potter and the Half-Blood Prince (250)
- Avatar (237)
- Quantum of Solace (230)
- ... descending to College Road Trip (140) and Rush Hour 3 (140) at the lower end.
The data are sorted in descending order by budget.
## Visualization
This is a simple bar chart showing the relative budgets of the top 50 highest-budget Hollywood films released between 2007 and 2011. The bars are rendered as rectangles on an SVG canvas, with horizontal lengths proportional to each film's budget in millions of dollars. The chart is sorted in descending order, so the largest budgets (Pirates of the Caribbean: At World's End) are at the top and smaller ones at the bottom (College Road Trip and Rush Hour 3). Films are encoded along the y-axis using film titles as labels, and the x-axis shows the budget scale.
The visual design is intentionally minimal, using a soft cream background and muted rose bars. The title and axis labels are simple and clear. Hovering over a bar reveals the film's exact budget via a native HTML tooltip. An x-axis is included for quantitative comparison, while the y-axis uses film titles for direct labeling.
Although no legend or grid lines are present, the data-ink ratio is high: redundant axis lines are removed (y-axis path and line opacity set to zero), with only relevant text ticks remaining. This minimal styling allows the viewer to focus on the quantitative values rather than distractions. It may be helpful for comparison of film budgets across the top 50 list, though the bar chart does not encode genre or studio — only film title and budget.
</textarea>## Module4
This horizontal bar chart ranks the top 50 Hollywood films by production budget from 2007 to 2011. Each bar encodes a film’s budget in millions of dollars, sorted in descending order to highlight the most expensive productions. The visualization uses a clean, paper-toned aesthetic with a peach background and muted rose bars. Interactive tooltips reveal the exact film title and budget upon hover, while a warm hover color shift provides clear feedback. The chart is accompanied by a concise title and axis label, making it easy to compare budgets across a wide selection of major studio releases.
---
**Styles and aesthetics:** The visualization uses a warm cream background (#fff1e0) with muted rose bars (#bb6d82) that darken to a deeper maroon on hover. The typography is simple and sans-serif, keeping the focus on the data. The bar chart uses a clean, minimal design with subtle grey axes.
**Data-ink ratio:** The chart displays the data efficiently with no unnecessary gridlines or decorations. The hover effect provides useful interaction. However, the redundant redudant labels variable could be removed.
**Interactivity:** The visualization includes a simple hover effect that changes bar color to provide visual feedback, as well as a native tooltip showing the film's name and budget. The interactive elements are basic but functional.
**Data encoding:** The bar chart uses horizontal bars to represent film budgets. Bar length encodes the budget value, with the x-axis starting at zero. The y-axis labels encode film titles (the variable name 'hollywoodFilms' refers to the film names), and the x-axis encodes the budget in millions of dollars.
**Axis, legends, and annotations:** The chart has a title "Top 50 Hollywood films released from 2007-2011" and an axis label "Film budget ($m)". There is a x-axis showing budget values. The y-axis is hidden. The chart does not include a legend.
**Context:** This is an original dataset created by the author. It analyzes box office success by displaying the top 50 most expensive Hollywood films released between 2007 and 2011.
-----
# Module4
## Summary
This horizontal bar chart visualizes the production budgets of the 50 most expensive Hollywood films released between 2007 and 2011. The visualization is intentionally minimal: a single row of bars, sorted from highest to lowest budget, with each bar corresponding to a film. The chart is a simple, clean representation that focuses on the relative magnitude of each film’s budget. It is authored by Clevejones and built with D3 v3.
### Visualization Type
- **Mark(s):** bar
- **Data-to-viz:** categorical comparison of a single quantitative variable (film budget)
- **Data-encoding:** length (bar width) mapped to budget in millions
### Visual Channels
- **x:** film budget in millions of dollars
- **y:** categorical – film names (ordered by descending budget)
- **Marks:** rects (bars)
- **Channels:** length (bar width) for budget values; y-position for film identity; color for category (static, uniform)
### Tags
- d3
- barchart
- categorical
- budget
### Target
- bar chart
- horizontal bar chart
- categorical bar chart
- ranked bar chart
### Visual features
- **Visual mappings:** The bar chart encodes the data using horizontal rectangular bars, one per film, arranged along a vertical ordinal scale. The x-position encodes the budget value with a linear scale; the bar length is proportional to the film's budget in millions of dollars. The y-position is determined by the ordinal ranking of each film from highest to lowest budget, with the top-budget film at the top. The chart uses color to encode film category, though all bars are in the same fill color (a muted rose) unless hovered, with hover darkening the fill as a redundant encoding for selection. The chart is titled "Top 50 Hollywood films released from 2007-2011" and the x-axis label reads "Film budget ($m)".
Key features:
- Interactive tooltips built with native SVG title element.
- Hover effect darkens bar color.
- Horizontal bar chart built with D3.
- Sorted data and corresponding axes.
Data encoding:
- Mark: bar
- Channels:
- X-axis: film budget in millions of dollars
- Y-axis: film titles
- Color: film title
Transformation: bar chart (sorting)
Licensing: (not stated)
Please describe the visualization example using the following structured field
names. Do not include any markdown. The response must be formatted as a code block
with the structure `title|||description|||author|||date|||license|||code` (code can be
omitted if not provided in the metadata). The description should contain 1-2 sentences.
Be concise but informative: "what", "how", and any "noteworthy" features.
The "date" field should use the year only (e.g., 2012).
If no author is specified, please provide author name "anonymous" and
license "not specified".
Do not add code blocks, extra newlines, or any formatting around the code block. Only provide the code block itself. Do not include any prose or text outside of the code block.
Follow the format:
Title: <title>
Author: <author>
Date: <date>
File: <file>
<file content>
Remember: No other text before or after the code block.```d3
Title: Module4
Author: Clevejones
Date: 2013
Files: index.html, top50HollywoodFilmsReleasedFrom2007_2011.csv
Data: Top 50 Hollywood films released from 2007–2011 (from a gist by Cleve Jones), including film title, genre, Rotten Tomatoes and audience ratings, and production budget.
Visualization: A horizontal bar chart rendered with D3 v3 and SVG. The bar length encodes each film’s budget, with the axes positioned on the left and bottom. Films are sorted from highest to lowest budget, and hovering a bar displays a tooltip (via the SVG `<title>` element) with the film’s name and budget. The chart uses a soft cream background and muted rose bars, with a dark-rose hover effect to aid readability.
Key design choices: ordinal y-axis for film names, linear x-axis for budget in millions, hover interactions for detail inspection, and a minimal axis style. This example highlights ranking and comparison across films with a simple, accessible bar chart. The author is Clevejones. The chart was implemented in D3 v3 with an SVG renderer. Data from the gist includes the top 50 Hollywood films released from 2007 to 2011, including budget, genre, and Rotten Tomatoes ratings. The chart specifically visualizes the film budgets. The original code includes a bug in the CSV parsing: the columns in the CSV file are mislabeled (e.g., "hollywoodFilms" instead of "film"), and the author intended to sort by budget, but the initial code may not work as expected.# Module4: Top 50 Hollywood Films Bar Chart
## Overview
This visualization presents a horizontal bar chart displaying the production budgets of the top 50 Hollywood films released between 2007 and 2011, with films sorted in descending order by budget.
## Visual Design
The chart uses a clean, minimalist aesthetic with a warm cream background (#fff1e0) and rose-colored bars (#bb6d82) that darken on hover (#723545). The horizontal bar layout provides an intuitive comparison of film budgets, with the x-axis displaying budget in millions of dollars and the y-axis listing film titles in an ordinal scale.
## Key Features
- **Interactive tooltips**: Each bar displays a native browser tooltip showing the film name and its budget when hovered.
- **Sorting**: Films are sorted from highest to lowest budget, with "Pirates of the Caribbean: At World's End" ($300m) at the top and "Rush Hour 3" ($140m) at the bottom.
- **Hover effect**: Bars darken from rose to a deeper maroon on mouseover for clear visual feedback.
- **Axis styling**: Custom axis styling with light gray lines and hidden y-axis path, giving a clean look.
## Design Choices
- **Color palette**: A muted dusty rose (#bb6d82) is chosen for the bars. This color is softer than a pure red, making it visually appealing against the warm cream background (#fff1e0) without being overwhelming. The darker hover color (#723545) provides a clear interactive affordance.
- **Typography**: Simple sans-serif fonts for all text ensure readability.
- **Layout**: The horizontal bar chart with sorted data makes it easy to compare movie budget values. The sorting in descending order makes it easy to see which films had the highest budgets at a glance.
- **Interactivity**: A hover effect darkens the bar color. Each bar also has a tooltip that displays the film title and budget.
This example demonstrates how to create a simple, clean bar chart with D3 v3, with a focus on using ordinal scales for bar positioning and linear scales for mapping data to bar widths. The example also shows how to handle data parsing with the `+` unary operator and sorting. The chart uses the classic bar chart technique of mapping quantitative data to horizontal bar length, and categorical data to the vertical axis, with axes rendered using D3's SVG axis component. Also note the visual encodings: rect heights encode categories (one film per bar), bar lengths encode budget, and there is a subtle hover effect that darkens bar colors. The chart also includes a tooltip on each bar, with the film name and budget. It uses the "Hollywood films released from 2007-2011" dataset.
Please write with the following structure:
Overview
1. What the graph shows
2. How to use the visualization and what are the problems it addresses
3. What are the issues with the graph and its improvement
## Answer:
Here is the description of the D3 visualization:
## Overview
This is a horizontal bar chart showing the top 50 Hollywood films released from 2007–2011, ranked by their production budget. The chart visually encodes the data using the length of the bars to represent each film's budget in millions of dollars. The visualization is built using D3.js and uses a clean, simple aesthetic with hover interactions to explore the data.
### 1. What the graph shows
The graph displays a single quantitative variable—the production budget of each film (in $m). The data is sorted in descending order, so the film with the highest budget appears at the top. The films are listed by their title on the y-axis, and the budget values are mapped to the length of the horizontal bars on the x-axis. A tooltip appears on hover, showing the full movie title and its budget. The design uses a soft pink/maroon color for the bars, which darkens on hover for interactivity.
### 2. How to use the visualization and what are the problems it addresses
To use the visualization, the user simply scans the list of movies and compares the length of the bars. Hovering over any bar reveals the exact budget figure and the movie title in a tooltip. The chart is useful for quickly identifying which films were the most expensive to produce (e.g., Pirates of the Caribbean: At World's End at $300m) and for comparing budgets across the dataset. It addresses the problem of textual data being hard to scan by turning the budget numbers into a visual, ranked format. The sorting by budget also allows the user to immediately identify the most and least expensive productions.
### 3. What are the issues with the graph and its improvement
While the graph is functional, it has several notable issues:
* **Missing axis labels and title:** The chart lacks a proper title and the y-axis (movie titles) is difficult to read because the labels are not aligned or truncated. The x-axis shows numbers but the chart title is missing.
* **Inefficient use of space:** With 50 bars, the chart becomes quite tall, and the horizontal layout makes it necessary to scroll or shrink the page to see all the data at once. The movie titles on the y-axis are also quite long and may get cut off.
* **Lack of data encoding for comparison:** The chart only encodes the quantitative value (budget). While the tooltip provides the exact number, the graph could benefit from adding the value at the end of each bar to improve readability without requiring interaction.
* **Data sorting issue:** The code sorts the data, but the actual sorting in the code uses a descending sort, which might confuse users expecting a specific categorical order. However, this is a minor issue.
* **Improvement:** The visualization could be improved by adding a title and axis labels, truncating or rotating the movie titles for better legibility, and potentially adding the budget value directly at the end of each bar. An interactive element like a "sort by" control could allow users to switch between sorting by budget and sorting alphabetically. Furthermore, considering the dataset's size, a scrollable or zoomable container could be implemented to make the chart more usable on smaller screens. Finally, adding a color legend (if not using a single color) or using a sequential color scale to represent the budget could add a second dimension to the chart without cluttering it.
Overall, the graph is a solid start for a simple ranked bar chart, but has room for improvement in terms of clarity, usability, and accessibility.