Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7

✓ Published0🌍 Public
MMuraliMohanMekala@my.unt.edu
Last edited Oct 24, 2025
Created on Oct 24, 2025
Forked from ICE-6 QUESTION 3

This reusable scatter plot visualizes the Titanic dataset, mapping age against fare while encoding survival status through symbol shapes (diamonds for deceased, triangles for survivors) and sex through color. Built with D3 v7, the chart employs d3.scaleOrdinal, d3.symbol, and d3.axis functions within a reusable component pattern, rendering SVG paths with animated hover tooltips. The visualization includes gridlines, axis labels, and a legend, with color scales distinguishing male and female passengers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

MuraliM1 ICE6

This interactive scatter plot visualizes Titanic passenger age and fare, with each point colored by survival status (red for deceased, green for survivors). Built with D3 v7, the SVG visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and `d3.csv` to load the public Titanic dataset. Hovering reveals a tooltip with exact values. Axes, labels, and a legend are created using D3's `axisBottom`, `axisLeft`, and appended text elements. The animation is minimal, limited to tooltip opacity transitions.

MMuraliMohanMekala@my.unt.edu
86% match
Loading thumbnail…

Ice6_question2

This scatter plot visualizes the relationship between passenger age and fare price in the Titanic dataset, with each circle representing a passenger and colored by survival status (green for survived, red for did not survive). The visualization uses D3.js v7 with SVG rendering, loading data asynchronously via `d3.csv` from the public Titanic dataset on GitHub. D3 scales (`d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors) map data values to pixel positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. Hover effects increase point opacity, and a legend distinguishes survival outcomes.

Ssrujana reddy
86% 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
85% match
Loading thumbnail…

Ice 7 M

This pie chart displays the survival distribution of Titanic passengers, splitting the data into "Survived" and "Did Not Survive" categories. It uses D3.js v7 to load a CSV from a GitHub repository, filter for valid survival entries, and render an SVG pie chart with an ordinal color scale. The code explicitly calls `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` to construct the arcs, labels, and legend.

MMuraliMohanMekala@my.unt.edu
84% 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
82% 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
82% match
Loading thumbnail…

Fork of ICE-7

This visualization presents a dynamic scatter plot of the Iris dataset, split into two subsets that alternate every five seconds. Each plot maps Age against Fare, with points colored by the Sex attribute using D3’s categorical color scheme. The reusable chart module, based on the Towards Reusable Charts pattern, handles SVG rendering, axes, and labels, while a setInterval toggle switches between the two data halves, creating a time-based comparison of the same variables.

Ssriram.official9@gmail.com
82% match
Loading thumbnail…

reusable scatter

This example demonstrates a reusable scatter plot that visualizes Titanic passenger data, comparing age against fare and coloring points by gender. The visualization alternates between two halves of the dataset every five seconds, using a custom `scatterPlot` function built with D3 v6. The chart employs `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for tick marks. Data is loaded via `d3.csv` from a remote source, and the animation uses `setInterval` to switch plots, removing and redrawing SVG circles.

Ssriram.official9@gmail.com
82% match