MuraliM1 ICE6

100%

✓ Published0🌍 Public

MMuraliMohanMekala@my.unt.edu

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

MuraliM (bar+line) ice6

This bar chart shows the average Titanic survival rate broken down by passenger class, with percentage labels displayed above each bar. The visualization uses D3.js v7 APIs including `d3.csv` for data loading, `d3.rollups` for grouping and computing means, `scaleBand` for the categorical x-axis, and `scaleLinear` for the continuous y-axis. The SVG rendering includes styled axes with custom formatting via `d3.axisBottom` and `d3.axisLeft`, wrapping text labels, and rectangular bar elements filled with a blue color. Data is processed from a local CSV file containing passenger records.

MMuraliMohanMekala@my.unt.edu

87% 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…

Murali1 ice 6 - q1

This bar chart shows the survival rate of Titanic passengers by passenger class, with rates on a 0–100% scale across three class categories. The visualization loads data from titanic.csv using d3.csv, groups records by Pclass, and computes the mean of the Survived field via d3.rollups. Bars are drawn as SVG rectangles using D3 v7’s scaleBand and scaleLinear, with axes generated by d3.axisBottom and d3.axisLeft. The rendering is entirely SVG-based, with labels for both axes and a steelblue fill for each bar.

MMuraliMohanMekala@my.unt.edu

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

83% match

Loading thumbnail…

ICE 5_MuraliM1

This interactive dashboard presents the Titanic passenger dataset, starting with a styled HTML table of the first rows and then generating a series of D3.js charts, including a bar chart of average calories by category, a donut chart, a scatter plot, and other visualizations. The page also includes a US map, rendered using SVG, and dynamically creates container elements for each chart via JavaScript. The code relies on D3 v7 for data loading (`d3.csv`), aggregation (`d3.rollups`), and SVG chart construction, while the map uses the TopoJSON client to load geographic data, and a custom tooltip enhances interactivity.

Mmuralionline6@gmail.com

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

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…

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

79% match