A2 - Revenue by Class [Bar Chart]

100%

A2 - Revenue by Class [Bar Chart]

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Feb 6, 2024

Created on Feb 6, 2024

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.

AI-generated description

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

Similar vizzes

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

97% match

Loading thumbnail…

Revenue by Passenger Class

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.

Cctan13@dons.usfca.edu

88% match

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

86% 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

83% 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

83% match

Loading thumbnail…

pie chart ice 7

This chart displays the average fare paid by passengers in each of the three Titanic classes, showing a clear price decline from first to third class. The chart uses a monotone area graph where the x-axis represents passenger class from 1 to 3, and the y-axis shows the average fare in dollars. The visualization is created with D3 v7, using `d3.area` to render the path, along with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for the axes, and `d3.select` for DOM manipulation. The source data is a predefined array of three averages computed from the passenger records in `data.csv`.

MMuraliMohanMekala@my.unt.edu

77% match

Loading thumbnail…

Titanic passenger class distribution

This example shows the distribution of Titanic passengers across first, second, and third class, with percentage labels overlaid on each slice. A simple SVG pie chart is generated using D3 v7’s `d3.pie` and `d3.arc` layouts, with each slice filled by a hard-coded color and separated by white strokes. The dataset is hard-coded as three objects containing class name, count, and color. Labels are positioned via the arc `centroid` method and rendered as multi-line text elements showing both class and percentage.

Kkfhujosefsson@dons.usfca.edu

75% match

Loading thumbnail…

Act 7 Q1

This pie chart visualizes the distribution of passenger classes in the Titanic dataset, showing three categorical slices for Class 1, 2, and 3. The chart uses D3 v7 with an SVG renderer, employing `d3.pie()` and `d3.arc()` to generate the arcs and `d3.rollups()` to aggregate class counts from a CSV. A custom legend displays exact passenger numbers, while axis labels are added despite the circular layout. The color scale maps distinct colors to each class using `d3.scaleOrdinal`.

AAnushaHyderaboeni@my.unt.edu

75% match