muralionline6@gmail.com

@MuraliMohan67·4 public vizzes

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.

Oct 5, 2025

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.

Oct 5, 2025

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.

Oct 5, 2025

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.

Oct 5, 2025