Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
Vveeramallivaishnavi3@gmail.com
Last edited Mar 27, 2025
Created on Mar 27, 2025
Forked from Hello VizHub

This visualization presents the survival distribution of Titanic passengers as a pie chart, using D3.js to render each passenger category as a colored slice. It shows the proportion of survivors versus casualties with interactive hover tooltips that display the count and percentage for each group, alongside a legend summarizing total counts. The chart uses d3.pie and d3.arc to generate the SVG slices, with d3.scaleOrdinal and schemeCategory10 for coloring. Data comes from a CSV dataset fetched from a GitHub gist, filtered by the "Survived" field.

AI-generated description

Titanic Survival Pie Chart

This visualization presents the survival rates from the Titanic disaster as a pie chart. The data is divided into two categories:

  • Survived: Passengers who survived the disaster
  • Died: Passengers who perished in the disaster

Features

  • Interactive pie chart showing the distribution of survivors and casualties
  • Hover effects to display detailed information with percentages
  • Legend providing an overview of the categories
  • Clean, responsive design

Data Source

The visualization uses a sample of the Titanic dataset, which contains information about passengers aboard the RMS Titanic, including their survival status, age, sex, and passenger class.

How to Use

  1. Open the visualization in a web browser
  2. Hover over sections of the pie chart to see detailed information
  3. Refer to the legend for the category counts
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of titanic

This fork of the Titanic dataset visualizes passenger survival status as an interactive pie chart. The code uses D3.js v7 (d3.pie, d3.arc, d3.rollup, d3.scaleOrdinal) to aggregate CSV data into two slices—Survived and Not Survived—with hover scaling effects and readable labels. Legend items and axis titles clarify the comparison, while SVG rendering and transitions provide smooth visual feedback. Data loads from a remote Gist-hosted CSV file, and the chart includes color-coded slices with animation on mouseover and mouseout.

Bboinapallyhimaja657@gmail.com
89% match
Loading thumbnail…

titanic

This D3.js v7 visualization presents a pie chart of passenger survival outcomes from the Titanic disaster, sourced from a CSV file hosted on a GitHub Gist. The animation highlights each slice on hover using a scale transform. The code employs `d3.pie`, `d3.arc`, and `d3.rollup` to aggregate survivor counts, with an SVG renderer and a color scale distinguishing survivors (green) from non-survivors (red). The chart also includes labeled slices, a legend, and axis titles for survival status and passenger counts.

Vveeramallivaishnavi3@gmail.com
88% match
Loading thumbnail…

Fork of Assignment 2 - Pie Chart

A static pie chart displaying the survival distribution of Titanic passengers, split into two categories: "Survived" and "Not Survived." The chart reads data from a remote CSV file, parsing each row to increment counts based on the survival flag. It is rendered as an SVG using D3 v7, with slices drawn via `d3.arc` and positioned by `d3.pie`. The visualization includes a title, color-coded slices, and a simple legend, all styled with inline SVG attributes and CSS rules.

Ssaitejakaranam10@gmail.com
87% match
Loading thumbnail…

Pie Chart of Titanic

This pie chart visualizes survival outcomes for Titanic passengers, splitting the dataset into green "Survived" and red "Not Survived" slices with value labels and a legend. It loads CSV data from a GitHub repository using `d3.csv`, aggregates counts via `d3.rollup`, and generates the chart with `d3.pie` and `d3.arc`. Hover interactions trigger a scale transition on slices, while SVG text elements provide axis labels and legend annotations. The visualization renders entirely in SVG with D3 v7.

AAreeba Hassan
85% match
Loading thumbnail…

SDA HW2-1

This example shows the survival outcomes of Titanic passengers as a pie chart, separating the data into two categories: those who survived and those who died. The chart uses D3 v6 to load a CSV dataset from a GitHub gist, then computes aggregate counts for each outcome. The visualization is rendered as SVG using D3’s `pie` and `arc` generators, with a categorical color scale assigning green to survivors and red to non-survivors. A custom HTML legend is built alongside the chart to label each slice with its corresponding count, and extra elements like the initial heading are removed for a clean presentation.

Vvits.18731a0539@gmail.com
84% match
Loading thumbnail…

SDA HW2-1

This example shows the survival distribution of Titanic passengers with a pie chart comparing the counts of survivors and non-survivors. D3 v5 loads the dataset via `d3.csv` from a GitHub gist, aggregates counts using `d3.rollup`, and renders the chart with `d3.pie` and `d3.arc` into an SVG. The visualization includes labels at each arc’s centroid via `arc.centroid`, a color scale from `d3.schemeSet2`, and an interactive legend built with D3 selections. Axis titles and a chart heading are added as SVG text elements.

Vvits.18731a0539@gmail.com
84% match
Loading thumbnail…

SDA HW2-1

This pie chart visualizes the survival rates of Titanic passengers by splitting the dataset into two categories: non-survivors (0) and survivors (1). The chart uses a purple and green color scale to distinguish between the two groups, with labels showing the count for each category. Built with D3 v6, the visualization loads CSV data from a GitHub gist and uses the `d3.pie()` and `d3.arc()` functions to generate the SVG slices. A legend to the right of the chart displays the color-keyed categories, while text annotations label the axes as survival count and passenger total.

Vvits.18731a0539@gmail.com
84% match
Loading thumbnail…

Activity7_Que1

This pie chart visualizes the distribution of survival outcomes among Titanic passengers, separating data into "Survived" and "Did Not Survive" categories. Using D3 v6, the code loads a CSV file, aggregates records by the `Survived` attribute, and renders the result with `d3.pie` and `d3.arc`. Each slice is colored via `d3.scaleOrdinal` and labeled directly on the chart.

MMannava Priyanka Chowdary
82% match