Untitled

100%

✓ Published0🌍 Public

Last edited Mar 22, 2019

Created on Mar 22, 2019

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive dashboard visualizes the distribution of Titanic passengers across age, fare, sex, and survival status using D3.js. Histograms show age and fare distributions, while pie charts display categorical breakdowns. Users can filter the entire dashboard by clicking pie chart segments or selecting passenger classes. The visualization uses D3's data join pattern with `transition.attrTween` for smooth updating animations and SVG rendering.

Mmab3105

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

85% match

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

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

82% match

Loading thumbnail…

Fork of 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.

Vveeramallivaishnavi3@gmail.com

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

81% match

Loading thumbnail…

Data Visualization ICE5

This example displays a bar chart of the Titanic disaster dataset, with bars colored by survival status and gender, using D3.js v7 for data binding and SVG rendering. It shows the number of passengers per class and sex, with an interactive tooltip revealing exact values on hover. The page also includes a message container that reports the CSV file size, row count, and column count, demonstrating basic data loading and inspection. The code loads data from a GitHub-hosted CSV and uses `d3.csv` and `d3.select` for chart construction.

TTharun2022

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

80% match