Skip to main content
SimilarExport ZIP
100%

Ice6_question2

✓ Published0🌍 Public
Ssrujana reddy
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

question 6

A scatter plot displays Titanic passengers, mapping Fare on the x-axis and Age on the y-axis. Each passenger is represented by a star or diamond symbol, colored red for non-survivors and green for survivors, using the D3.js library with SVG rendering. The chart loads data from a CSV file via `d3.csv`, processes missing values, and uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes. Custom D3 symbols and a survival-based color scale reveal the relationship between fare, age, and survival outcome.

Vvinaykollapudi@my.unt.edu
89% 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
89% match
Loading thumbnail…

Activity6-question3

This interactive scatter plot visualizes the Titanic dataset, showing the relationship between passenger fare and age as individual steelblue circles. The visualization uses D3 v6 with an SVG rendering approach, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map the data. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with the chart sized to the full browser window and axes labeled "Age" and "Fare". The plot provides a straightforward view of fare versus age distribution across all passengers.

Mmeenam1106@gmail.com
88% 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
86% match
Loading thumbnail…

Fork of ICE-7

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.

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

task3

This scatter plot visualizes the Titanic dataset, plotting passenger age against survival status (0 or 1) with steelblue circles. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load the data, map the values, and render the axes in an SVG. Data is fetched from a remote gist URL, and the visualization fills the full browser window with labeled axes for Age and Survived.

Kkeerthanachinthalapally@gmail.com
84% 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
84% match
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
83% match