Untitled

100%

✓ Published1🌍 Public

Last edited Feb 15, 2020

Created on Feb 13, 2020

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.

AI-generated description

New Chart in v5

MIT Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

Qualitative Scatter Plot in D3

This qualitative scatter plot displays the relationship between passenger age, fare paid, and survival status for 887 Titanic passengers. Each circle represents a passenger, with blue and red indicating survival (1) or non-survival (0), using a color scale from D3’s ordinal scale. The visualization uses D3 v7 to load CSV data from a remote source and render SVG circles, axes, and a legend. The code specifically employs `d3.csv`, `d3.scaleLinear` for the x (age) and y (fare) axes, and `d3.legendColor` to create the categorical legend, with the chart positioned within an SVG container using custom margins.

EEunice Tu

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

79% match

Loading thumbnail…

ICE-7_Priyanka

This visualization presents a scatter plot of the Titanic dataset, depicting the relationship between passenger age and fare price. Built as a reusable D3.js component, the chart uses color to encode passenger sex, with circles positioned along the axes for Age (years) and Fare ($). The visualization dynamically splits the dataset into two halves and toggles between them every five seconds, offering an animated comparison of different passenger subsets. The plot includes labeled axes and a categorical color scale, and the animation alternates between the two data halves to highlight patterns in the data.

Jjammigumpula.priyanka193@gmail.com

78% match

Loading thumbnail…

Gist 121ed23ef467b1372d47e2e67d2aea1c

This example visualizes the Titanic passenger manifest, mapping each first-class passenger’s fare and age group. It uses `d3.forceSimulation` to position circles by passenger attributes, with color encoding survival status and gender. The code performs data loading via `d3.csv` and filters the dataset before rendering with SVG circles. It highlights fare disparities and demographic clusters among survivors and non-survivors, drawing directly from the provided `titanic20180616_coma.csv` file.

DDarioCel

78% match

Loading thumbnail…

Line chart.js!

This example visualizes the ages of Titanic passengers as a line chart, plotting each passenger’s age in sequence along the x-axis. The chart uses D3.js v7 to load CSV data from a GitHub-hosted file, parse the values, and render an SVG with scales, axes, and a line generator. The code employs `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.line` to draw the path, with axes appended via `d3.axisBottom` and `d3.axisLeft`. The rendering is entirely SVG-based, showing a simple yet effective use of core D3 DOM manipulation and data binding.

Vvishnupriya eupuri

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

77% match