Skip to main content
SimilarExport ZIP
100%

Murali1 ICE 5

✓ Published0🌍 Public
Mmuralionline6@gmail.com
Last edited Oct 5, 2025
Created on Oct 5, 2025
Forked from RiFa_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.

AI-generated description
MIT Licensed

Similar vizzes

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-5 MuraliM

This example displays a student performance dataset loaded from a GitHub Gist CSV, presenting a summary message, a styled table previewing the first five rows, and a bar chart of GPA values. Using D3 v7, the visualization builds the table dynamically and renders an SVG bar chart with `d3.scaleBand` and `d3.scaleLinear`, pairing these scales with `d3.axisBottom` and `d3.axisLeft` for axis generation. The page relies on `d3.csv` for asynchronous data loading and update selection methods like `selectAll().data().enter().append()` to bind data to DOM elements.

Mmuralionline6@gmail.com
79% 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
79% match
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
78% 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
76% match
Loading thumbnail…

ICE 5 Mukthamukhi

This example demonstrates how to load and parse a CSV dataset of cars with D3, displaying the first 100 rows in an interactive, sortable HTML table. It uses `d3.csv` to fetch remote data and `d3.select` to build table elements, while JavaScript event listeners handle click-based column sorting and a live search box filters rows by any field. The table features styled headers, zebra striping, and hover states for readability.

Kkmuktha09@gmail.com
76% 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
74% match
Loading thumbnail…

ICE-5 Muk

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying a preview of the first ten rows in a styled HTML table. It fetches the "datascience salaries" CSV from a GitHub gist, uses `d3.csvParse` to convert the text into an array of objects, and reports the file size, row count, and column count. The code uses `fetch` for asynchronous data retrieval, `d3.select` to manipulate the DOM, and dynamically builds the table header and body using `data.columns` and nested `forEach` loops.

Kkmuktha09@gmail.com
74% match