MuraliMohanMekala@my.unt.edu

ice - 8 murali1

This interactive map of India colors each state by cultural region—North, South, East, West, Northeast, and Central—using a D3 ordinal color scale over a Mercator projection via d3.geoPath. The SVG renders state boundaries from an external GeoJSON file, and hovering triggers a tooltip showing 2021 population estimates from embedded data. The example uses d3.v7 and topojson-client to load and display geographic features.

Murali ice - 8

A rotating orthographic globe displays world landmasses in green against a dark ocean sphere, with graticule lines marking latitude and longitude. The visualization continuously spins using `d3.timer` to update the projection’s rotation. It renders geographic data from `world-atlas@2/countries-110m.json` via TopoJSON, converting features with `topojson.feature` and projecting them through `d3.geoOrthographic` and `d3.geoPath` in an SVG.

Network Graph ICE 8 MuraliM

A network graph depicts seven Indian cities as nodes connected by seven routes, with each city rendered as a distinct SVG symbol shape—circle, square, diamond, triangle, star, cross, or wye—in its own color. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while `d3.drag` enables interactive repositioning. Routes appear as gray lines whose positions update on each simulation tick, and city labels are placed beside the symbols.

Fork of Tree Graph ICE 8 Murali

This D3.js v7 visualization renders a hierarchical tree structure representing the anatomy of a natural tree, from root to leaves. The SVG output uses a custom `d3.tree()` layout and `d3.hierarchy()` to position nodes, with `d3.linkHorizontal()` drawing the connecting paths. Node shapes and colors vary by depth: brown circles for the root, green rectangles for trunk and branches, rotated diamonds for sub-branches, and light green circles for leaves. The code uses `d3.select()` and `join()` to bind data to SVG elements, with text labels applied to all nodes.

ice - 8 Murali

This example displays a hierarchical tree of programming languages, organized into object-oriented, functional, and scripting categories. The visualization uses a horizontal layout, with the root node on the left and child nodes branching to the right, and differentiates leaf nodes from parent nodes by color. The code constructs the tree using D3's `d3.tree()` layout and `d3.hierarchy()` functions, renders links as horizontal paths with `d3.linkHorizontal()`, and draws the node circles and text labels from the `root.descendants()`. The SVG output is styled with CSS classes and rendered within a fixed viewBox.

pie chart ice 7

This chart displays the average fare paid by passengers in each of the three Titanic classes, showing a clear price decline from first to third class. The chart uses a monotone area graph where the x-axis represents passenger class from 1 to 3, and the y-axis shows the average fare in dollars. The visualization is created with D3 v7, using `d3.area` to render the path, along with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for the axes, and `d3.select` for DOM manipulation. The source data is a predefined array of three averages computed from the passenger records in `data.csv`.

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.

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.

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.

MuraliM (bar+line) ice6

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.

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.

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.