pashamsahithi2391@gmail.com

@Sahithi0916·12 public vizzes

ICE8-q2-2

A network visualization maps research collaborations between eight authors and eight papers. Circle nodes represent authors colored by group, while square nodes represent papers; links connect authors to their published works, including cross-group collaborations. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes, with drag interaction enabled. Rendered as SVG, the chart uses d3.v7 and includes hover effects that highlight nodes and links.

Nov 10, 2025

Loading thumbnail…

ICE8-q2-1

This visualization presents a hierarchical tree of programming languages, organized into three levels of categories such as high-level, low-level, and domain-specific languages. It uses d3.tree() to compute the layout and renders nodes as colored SVG circles with labels, sized by depth, and links as horizontal paths via d3.linkHorizontal(). A d3.scaleOrdinal color scale maps hierarchy levels to distinct colors. The data is defined inline as a static JavaScript object, and the SVG canvas is 1200 by 800 pixels.

Nov 10, 2025

Loading thumbnail…

ICE8

This visualization displays a world map where each country is colored according to its population using a logarithmic rainbow color scale. The map is rendered as SVG using D3.js v7 with a Natural Earth projection and TopoJSON data loaded from world-atlas. Countries are drawn as paths using d3.geoPath, with colors assigned via d3.scaleSequentialLog and d3.interpolateRainbow based on population values from an embedded dataset. Hovering over a country triggers a tooltip showing additional information.

Nov 10, 2025

Loading thumbnail…

ICE8

This interactive world map visualizes country populations with a sequential YlGnBu color scale. It loads TopoJSON world boundaries via `d3.json` and population data from a CSV, then joins them through ISO country codes. The SVG map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render countries, with hover tooltips and an axis-labeled gradient legend built using `d3.scaleSequential` and `d3.axisBottom`. Missing values are shown in gray.

Nov 10, 2025

Loading thumbnail…

ICE7-q3

This area chart displays stock levels by product ID for a cosmetics dataset, showing a clear upward trend in inventory quantities as product IDs increase. The visualization uses a blue filled area with a darker blue stroke to represent the stock values, with an annotated legend clarifying that the shaded region corresponds to stock levels. The code loads CSV data from a GitHub gist, maps the ProductID and Stock fields to numeric values, and constructs the chart using d3.csv, d3.scaleLinear for both axes, and d3.area to generate the filled path. Axis labels and ticks are rendered using d3.axisBottom and d3.axisLeft within an SVG container.

Oct 27, 2025

Loading thumbnail…

ICE7-q2-1

This D3.js v7 SVG line chart visualizes cosmetic stock levels across product IDs. The chart plots a blue Stock line with red data point markers, using a linear x-axis for ProductID and a y-axis scaled from zero to 110% of the maximum stock value. Data is loaded from a remote CSV file via `d3.csv`, and the visualization employs `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` to generate the path geometry.

Oct 26, 2025

Loading thumbnail…

ICE7-q2

This example shows the distribution of cosmetics brand stock as a pie chart, with each slice labeled directly on the chart and an interactive legend to the side displaying brand names and total values. It uses D3.js v7 with SVG rendering, loading CSV data from a GitHub Gist via `d3.csv`. The chart employs `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.group` with `d3.sum` to aggregate stock values by brand.

Oct 26, 2025

Loading thumbnail…

ICE7-q1

This scatter plot visualizes the relationship between calories and protein content for various food items, with each point colored and grouped by food category such as Fruit, Meat, or Dairy. The visualization is built using the Plotly.js library, which handles chart rendering and layout configuration. Data is loaded asynchronously from a CSV file hosted on GitHub Gist, and the code parses the raw text manually before creating individual scatter traces for each category, styled with custom colors and black marker outlines.

Oct 26, 2025

Loading thumbnail…

ICE-6 QUESTION 3

This example uses Plotly.js to visualize tree data from a CSV file fetched from a GitHub gist. The first chart is a multi-series line chart plotting tree height, diameter, and age against Tree ID, with dashed and dotted lines distinguishing the series. The second chart combines a bar trace showing species counts with a line trace overlaying average height per species. Data is parsed manually from CSV text, and both charts are rendered using `Plotly.newPlot` with custom colors and grid styling.

Oct 19, 2025

Loading thumbnail…

ICE-6 QUESTION 2

A scatter plot visualizes the relationship between calories and protein content for various foods, colored by category. Built with Plotly.js, the chart loads CSV data from a GitHub gist and renders each food item as a point, with category-specific colors and hover labels showing food names. The plot includes axis labels, a legend, and a light gray background, using predefined category colors to distinguish between food groups like Fruit, Vegetable, and Meat.

Oct 19, 2025

Loading thumbnail…

ICE-6 QUESTION 1

This bar chart displays the average clothing price by category, computed from the ICE-6.csv dataset. The visualization uses D3.js v7 to load the CSV, group data by category with `d3.group`, and calculate means via `d3.mean`. SVG rectangles represent bars, scaled with `d3.scaleBand` and `d3.scaleLinear`, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`. The chart includes rotated category labels, a title, and axis annotations for clear interpretation.

Oct 19, 2025

Loading thumbnail…

ICE5

This visualization shows the distribution of clothing items across nine types, such as Accessories, Traditional, One-piece, and Outerwear, using horizontal bars with custom SVG icons. It loads data from a CSV file via `d3.csv` and uses `d3.scaleLinear` to map counts to bar widths. The bar chart is rendered in SVG with hover transitions and includes summary text displaying total items and type names.

Oct 5, 2025