Skip to main content
SimilarExport ZIP
100%

MuraliM (bar+line) ice6

✓ Published0🌍 Public
MMuraliMohanMekala@my.unt.edu
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from ice 6 (bar+line)

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
87% 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
81% 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
78% match
Loading thumbnail…

Murali ICE6

This bar chart visualizes total sales by product, aggregating a CSV dataset loaded from a GitHub Gist and displaying each product’s summed revenue as a horizontal bar. Product E leads in sales, while Product D records the lowest total. The visualization uses D3.js APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, and `scaleBand`/`scaleLinear` to compute and sort the aggregates, render the SVG bars, and append axes, labels, and a title, with hover effects changing bar color to orange.

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

Murali1 ICE 5

This example demonstrates loading and parsing a Titanic passenger CSV file with D3 v7, displaying a sortable, searchable table preview. It calculates and shows dataset size in kilobytes, row count, and column count. The code uses `d3.csv` for data loading, D3 selections and joins for table rendering, and custom event handlers for sortable column headers and a live search filter. The table includes zebra striping and hover effects styled through CSS.

Mmuralionline6@gmail.com
78% match
Loading thumbnail…

Murali of ICE-6

A bar chart displays the number of cricket tournament wins per country from 1975 to 2025, based on aggregated CSV data loaded via `d3.csv`. It uses `d3.rollups` to count wins per winner, then sorts them in descending order. The visualization renders as an SVG using D3 v7 with `scaleBand` and `scaleLinear` axes, horizontal grid lines, and tooltips that appear on bar hover via `mousemove`. Bar colors shift on interaction, and rotated country labels appear on the x-axis.

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

ICE-5 Murali M

This visualization summarizes a student performance dataset loaded via `d3.csv`, displaying a styled HTML table of the first five rows and a bar chart of GPA values using `d3.scaleBand` and `d3.scaleLinear`. The SVG bar chart renders student IDs along the x-axis and GPA scores on a 0–4 scale, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The data originates from a GitHub Gist CSV file, and the page includes a loading message and dataset summary.

Mmuralionline6@gmail.com
75% match