kmuktha09@gmail.com

ICE8 - Task 2A

This visualization shows a three-level hierarchical tree of food categories, displaying a root node ("Food"), three category nodes (Fruits, Vegetables, Grains), and nine leaf items. The SVG rendering uses d3.hierarchy and d3.tree() to compute the layout, with d3.linkVertical() drawing the curved connections. Nodes are distinguished by shape and color: a yellow circle for the root, light-blue rounded rectangles for categories, and green diamonds for leaf items, each accompanied by text labels. The page includes a static, inline JavaScript dataset with no external data source.

Nov 6, 2025

ice 8 Task 1

This visualization displays a world map colored by average daily internet usage hours per person, using a blue sequential scale where darker shades indicate higher usage. It renders geographic boundaries with TopoJSON data and `d3.geoPath`, while `d3.scaleSequential` maps values to colors. Countries without data appear gray. Interactive tooltips appear on mouseover showing the country name and hours. The map uses a Natural Earth projection, includes a gradient legend, and animates tooltip transitions via D3’s `transition.style`.

Nov 6, 2025

Fork of ICE8-Network

This example visualizes a collaboration network among six team members, with nodes colored by department and links showing connections. Using D3.js’s force-directed layout, the `d3.forceSimulation` API applies link, many-body charge, and centering forces to arrange the vertices dynamically. Circles and lines are rendered as SVG elements, and labels place names beside each node. The simulation updates positions on each tick, while drag handlers allow interactive repositioning of nodes, restarting the physics as needed.

Nov 2, 2025

ice7_Task3

This stacked area chart displays the changing values of three metrics (`metric_A`, `metric_B`, `metric_C`) over time, using a time-series dataset loaded from a CSV file via `d3.csv`. The visualization emphasizes composition and trends by stacking the areas, with each series assigned a distinct color (steelblue, orange, green) and rendered with 80% opacity. The chart is built using D3 v7, constructing an SVG with `d3.scaleTime` and `d3.scaleLinear` for axes, and leverages `d3.stack` to create the stacked layout and `d3.area` to generate the area paths. It includes labeled axes, a legend, and a title, with all rendering handled through SVG elements.

Ice7task2_2

This example shows three metrics—metric_A, metric_B, and metric_C—plotted as separate colored lines over time in a single SVG line chart. The data loads from a remote CSV file and is parsed with d3.csv, with dates converted to JavaScript Date objects. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, d3.line to generate each path, and d3.axisBottom and d3.axisLeft to render the axes. A legend, created manually with SVG rect and text elements, identifies each metric’s color.

ice7task2

A pie chart displays the aggregated sums of three metrics—A, B, and C—from a multiseries CSV dataset. Using D3.js v7, the code loads the data via `d3.csv`, computes totals with `d3.sum`, and generates slices with `d3.pie` and `d3.arc`. Each slice is labeled using the arc’s `centroid`, and a color-coded legend is appended manually. The SVG rendering uses ordinal color scaling and explicit positioning for the chart and legend.

Ice7_task1

This example presents a reusable scatter plot component that visualizes the relationship between x_value and y_value across three categorical groups (g1, g2, g3). The chart renders SVG circles colored via a d3.scaleOrdinal, with axes, gridlines, and an interactive tooltip that appears on mouseover to display group and coordinate details. The component pattern encapsulates all chart dimensions, scales, and margins inside a scatterPlot() factory function, which is invoked with d3.select().call(). Data loads from an external CSV file using d3.csv, demonstrating a clean, reusable D3 v7 architecture for basic exploratory data analysis.

Ice7_task1

This scatter plot displays the relationship between x_value and y_value for a CSV dataset, with points colored by group category (steelblue for g1, orange for g2, green for others). The reusable component pattern encapsulates the chart logic, using D3 v7 scales and axes to map the data to an SVG canvas. The visualization loads data via d3.csv and renders circles with hover tooltips showing group membership through appended title elements.

ice6

A multi-series combined chart displays three time-based metrics (metric_A, metric_B, metric_C) as smooth lines alongside vertical bars representing monthly averages of metric_B. The SVG visualization uses D3 v7 with d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.rollups for monthly aggregation, and d3.line with curveMonotoneX for line generation. Gridlines and a legend support the view, with data sourced from a remote CSV file.

Oct 20, 2025

ice 6 (bar+line)

This visualization combines a time-series line chart with a monthly bar overlay, showing three metrics (metric_A, metric_B, metric_C) over time alongside the monthly average of metric_A as semi-transparent blue bars. The code uses d3.csv and d3.rollup to aggregate the data, with d3.scaleTime, d3.scaleLinear, and d3.scaleBand for positioning, and d3.line for the trend lines. The SVG is rendered with an axis on the bottom and left, a legend on the right, and a light blue bar fill at 50% opacity. The source data is loaded from a GitHub Gist as a multiseries CSV.

Oct 19, 2025

ICE-6(Scatter plot)

This scatter plot visualizes 150 samples of x_value against y_value, with points colored by group using a Tableau10 ordinal scale. The data is loaded from a CSV file via d3.csv and rendered as SVG circles with opacity, axes, labels, and a legend. Built with D3 v6, it uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft/d3.axisBottom for tick marks. Points respond to hover with a black stroke, and the chart includes a white background with margin-based layout.

Oct 19, 2025

ICE6 BarChart

This bar chart displays total product sales in USD, aggregated from a CSV dataset loaded via `d3.csv`. It shows that Product E has the highest revenue while Product D has the lowest, with bars sorted in descending order. Using D3 v6, the visualization applies `d3.rollups` and `d3.sum` to aggregate data, then renders SVG bar charts with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom`. Interactive hover effects change bar color via CSS.

Oct 19, 2025

ICE5 datascience salaries

This example demonstrates loading and parsing a CSV dataset of data-science salaries using D3 v7. It fetches the remote CSV file via the Fetch API, parses it with `d3.csvParse`, and displays a summary showing the file size in kilobytes, row count, and column count. The interface renders a preview table of the first 15 rows using D3’s table-building methods, alongside a static SVG badge that reports the loaded data dimensions. The visualization uses standard D3 selection and DOM manipulation with `d3.select`, `.append`, and SVG elements like `rect` and `text`, all rendered in SVG.

Fork mk

This example demonstrates how to load and parse a CSV file using D3 v7, displaying a summary of the dataset’s size and a preview of its first five rows in a styled HTML table. The code uses the Fetch API to retrieve the text and `d3.csvParse` to convert it into objects, then leverages `d3.select` and data joins to build the table header and body dynamically. The dataset comes from a remote GitHub gist on traffic accident prediction.

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.

kk

This example demonstrates how to load and parse a remote CSV file using D3 v7, displaying a summary of the dataset’s size, row count, and column count alongside a preview table of the first ten rows. The page fetches the raw text via the Fetch API, then uses `d3.csvParse` to convert it into JavaScript objects. A small SVG badge, built with D3 selections and SVG attributes, visually confirms the loaded data metrics. The data comes from a GitHub-hosted `cars2025.csv` file.

Fork of ICE-5 mm

This example presents a tabular preview of a car performance dataset, displaying the first ten rows from a CSV file loaded from a remote GitHub gist. The page shows a summary of the dataset’s size, row count, and column count above the table. The visualization is built using the D3.js v7 library, specifically using `d3.csv` to parse the data and `d3.select` with `.append` and `.join` methods to construct the HTML table structure. Styling is applied via an external CSS file, with column headers transformed from underscores to uppercase text.

Fork of ICE-5 mm

This example displays a preview of the Student Performance dataset, showing the first ten rows in an HTML table with column headers and a summary of file size, row count, and column count. It loads the CSV asynchronously via `d3.csv`, then uses D3 selections, `append`, `selectAll`, and `join` to construct the table structure dynamically. The styling applies responsive table formatting with hover effects, alternating row colors, and a blue header, all defined in the accompanying stylesheet. The data originates from a remote GitHub Gist URL specified in the script.

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.

Oct 5, 2025