Revenue by Passenger Class

100%

Revenue by Passenger Class

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Feb 6, 2024

Created on Feb 3, 2024

This visualization shows the total revenue collected from each passenger class on the Titanic, aggregated from a CSV dataset loaded via `loadTable`. The p5.js `draw()` function iterates through every row, summing the `Fare` values per `Pclass` and mapping the totals to horizontally scaled rectangles. Revenue amounts are labeled at the end of each bar, with an x-axis manually marked in increments of 1000 from 0 to 5000. The chart uses the Canvas API through p5.js's `rect` and `text` functions, and the axis lines are drawn with p5.js’s `line` method.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Revenue by Pclass

This example visualizes the distribution of Titanic passenger fares by passenger class (Pclass) using vertical bars rendered with p5.js. Each row in the dataset corresponds to a passenger, and the width of each bar represents the fare paid. The data is loaded from a Google Sheets CSV file via `loadTable`, and the visualization uses `createCanvas`, `rect`, and `noLoop` to draw the static chart. The sketch is set up for VizHub’s hot reloading environment.

Cctan13@dons.usfca.edu

90% match

Loading thumbnail…

[A2] Revenue by Class (Bar Chart)

This bar chart visualizes the total revenue collected from first, second, and third class passengers on the Titanic, revealing that second class generated the least income. The chart is rendered using p5.js, with data loaded from a CSV file via `loadTable`. The `setup()` function creates a full-window canvas, and `draw()` computes cumulative fares per class from the `Pclass` and `Fare` columns, then draws horizontal bars scaled to revenue values along labeled axes. Axis tick marks increment by thousands to indicate revenue amounts.

Cctan13@dons.usfca.edu

89% match

Loading thumbnail…

A2 - Revenue by Class [Bar Chart]

This bar chart displays the total revenue collected from each passenger class on the Titanic, using a simple p5.js sketch. It draws three horizontal bars that show the sum of all fares paid by first, second, and third class passengers, with each bar labeled and accompanied by its total fare value. The visualization highlights the surprising finding that second class generated the least revenue. The data is loaded from a remote CSV file using p5.js’s `loadTable` and rendered on a canvas with basic shapes.

Cctan13@dons.usfca.edu

88% match

Loading thumbnail…

A2 - Passengers per Class (Dot Plot)

This dot plot visualizes the number of Titanic passengers per class using p5.js, with CSV data loaded via the `loadTable` function from a GitHub gist. The sketch counts passenger records by class and renders three circles with labels, revealing an inverse relationship between class affluence and passenger count. A light blue background, axis lines, and annotations highlight the trend. The visualization displays passenger counts (Class 1: 216, Class 2: 184, Class 3: 491) on a canvas sized to the window, with axes labeled from 0 to 300 in increments of 100.

Cctan13@dons.usfca.edu

79% match

Loading thumbnail…

A2 - Revenue by Class [Bar Chart]

This bar chart visualizes revenue by class, displaying distinct categorical values as vertical bars. The P5.js sketch renders the visualization dynamically, using the canvas size derived from the container’s client dimensions. The chart employs P5’s `createCanvas`, `background`, and `fill` functions to draw the bars, with the data drawn from the `ctan13dons` source. The sketch runs continuously, updating via P5’s `setup` and `draw` loop, while hot reloading allows for live edits to the underlying numbers.

Cctan13@dons.usfca.edu

73% match

Loading thumbnail…

reusable scatter plot

This reusable scatter plot visualizes the relationship between passenger age and fare from the Titanic dataset, colored by gender. Built with D3.js v6, it uses an SVG-based rendering approach with scales that adapt to the data domain. The x-axis represents age in years, the y-axis displays fare in dollars, and each circle is colored according to the passenger's gender using a categorical color scale. The code follows a modular, reusable function pattern, allowing the chart to be easily configured with different dimensions, data, and accessor functions. Axis labels clearly identify the variables, and the plot updates dynamically based on the data provided.

Vvishnupriya eupuri

69% match

Loading thumbnail…

area chart

This area chart visualizes the relationship between passenger age and fare from a Titanic dataset, using a subset of eight data points. The chart employs D3.js v7 to create an SVG-based area graph, with age on the x-axis and fare on the y-axis. The area is filled in steelblue beneath a path generated by `d3.area()`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. Data is loaded asynchronously via `fetch` and parsed with `d3.csvParse` from a remote CSV source.

Ssriram.official9@gmail.com

69% match

Loading thumbnail…

Untitled

This interactive visualization presents multiple coordinated views of Titanic passenger data, including gender and survival pie charts alongside age and fare histograms. Users can filter by passenger class via dropdown, while clicking pie chart slices triggers linked selections across all views. The code uses D3.js with `d3.pie`, `d3.arc`, `d3.histogram`, and `transition.attrTween` for animated updates, rendered as SVG. Data originates from the Titanic passenger manifest, though the README references a different population dataset without visible integration.

Wwishcsdev

69% match