saitejak1619@gmail.com

@KST16·13 public vizzes

ICE8_Tree

This example shows a hierarchical tree of global cuisines and popular dishes, organized by region and category. It uses `d3.stratify` to convert flat parent-child data into a hierarchy, then `d3.tree` to compute the layout. The visualization renders links as vertical paths via `d3.linkVertical` and styles circular nodes with a color scale based on depth. All elements are drawn as SVG, with node size varying by hierarchy level. The data is embedded directly in the HTML as a static array.

Apr 12, 2026

Loading thumbnail…

ICE8_Country Map

This map visualizes comparative state-level index scores across the United States, using an orange sequential color scale to encode values from a CSV dataset. Hovering over each state reveals its name and score via an interactive tooltip. Built with D3 v7 and TopoJSON, the visualization uses d3.geoPath and d3.geoAlbersUsa to render state boundaries from the us-atlas TopoJSON file, with a gradient legend showing the color-to-value mapping.

Apr 12, 2026

Loading thumbnail…

ICE8_Network Visualization

This force-directed network visualizes collaboration relationships among seven software team members, with node colors mapping to distinct professional roles. The visualization uses a D3 force simulation (`d3.forceSimulation`) with link, many-body, and collision forces to position nodes, while SVG lines and circles render the connections and actors. Dragging a node with `d3.drag` updates its position in real time, allowing interactive exploration of the team structure.

Apr 12, 2026

Loading thumbnail…

ICE8_ Map

This choropleth map displays population distribution across selected countries, using an orange sequential color scale to encode values from a CSV dataset. Built with D3.js v7 and TopoJSON, the visualization projects country boundaries with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Hovering triggers a tooltip showing country ID and formatted population, while a gradient legend with an axis communicates the color scale. The base geometry comes from the world-atlas TopoJSON file, and countries without data appear gray.

Apr 12, 2026

Loading thumbnail…

ICE_7_Area Chart

This area chart visualizes the average monthly screen time from a digital usage dataset. Using D3.js v7, the example groups daily records by month, calculates mean hours, and renders a smooth area with axes, gridlines, and interactive tooltips. Data is loaded as CSV from a GitHub gist, with dates parsed and scales computed via `d3.scaleTime` and `d3.scaleLinear`. The SVG output includes rotated month labels and labeled axes for clarity.

Mar 28, 2026

Loading thumbnail…

ICE_7_Line Chart

This line chart visualizes monthly average screen time from a digital usage dataset, with each point representing the mean daily screen time for that month. The chart includes labeled axes, styled tick marks, and hover tooltips for data inspection. Built with D3 v7, it loads data from a CSV file, parses dates with `d3.timeParse`, groups entries by month using `d3.rollup`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. An SVG canvas with a white background and drop shadow presents the final visualization.

Mar 28, 2026

Loading thumbnail…

ICE_7_Pie Chart

This pie chart shows the distribution of total screen time across four app categories (Work, Gaming, Education, Social) using the Digital Usage dataset, with each slice sized proportionally and labeled with its percentage. D3’s `pie` layout and `arc` generator convert the aggregated `screen_time_hours` into SVG paths, while tooltips and hover highlighting are implemented via mouse events. A `scaleOrdinal` color scale differentiates categories, and a legend accompanies the chart. The visualization reveals a fairly even usage split, with Education holding a slightly smaller share than the other three categories.

Mar 28, 2026

Loading thumbnail…

ICE_7_Reusable Scatter Plot

This reusable scatter plot explores the Digital Usage dataset by mapping screen time hours to productivity scores, with color distinguishing application categories such as Work, Social, Gaming, and Education. A regression trend line summarizes the negative relationship, while tooltips reveal exact values per point. Built with d3.v7, the chart uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal for scales and axes, with SVG circles for the marks. The design accepts configurable properties, enabling the same structure to be reused with different quantitative pairs.

Mar 28, 2026

Loading thumbnail…

Saiteja_ICE_6_Line Chart

This multi-series line chart displays monthly trends in screen time, sleep hours, and productivity by aggregating daily records from the digital usage dataset into monthly averages. Three colored lines, generated with d3.line and scaled using d3.scaleTime and d3.scaleLinear, allow direct comparison of how these behavioral metrics change over time. The SVG chart includes gridlines, labeled axes, a legend, and uses d3.rollup to compute monthly means from the CSV data before rendering.

Mar 7, 2026

Loading thumbnail…

Saiteja_ICE_6_Scatter Plot

This scatter plot shows the relationship between math and reading scores for each student in the dataset, with each orange circle representing an individual. It reveals a clear positive correlation, as higher math scores tend to correspond with higher reading scores. The visualization uses D3.js v7’s `d3.csv` to load remote data, `d3.scaleLinear` for both axes, and SVG circles with opacity. Gridlines are added via `d3.axisLeft` with negative tick sizes, and axis labels are manually appended as SVG text elements.

Mar 7, 2026

Loading thumbnail…

Saiteja_ICE_6_Combined Chart (Bar + Line)

This combined bar and line chart displays monthly average notifications as light-blue bars on a left axis, with the average productivity score overlaid as an orange line on a right axis, facilitating comparison between the two metrics across time. The visualization aggregates daily records from a digital usage dataset by month using `d3.rollup` and `d3.timeMonth.floor`, then renders the result in SVG with D3 v7’s `scaleBand`, `scaleLinear`, `axisLeft`, and `line` generator.

Mar 7, 2026

Loading thumbnail…

Saiteja_ICE5

This visualization summarizes a 150-row CSV dataset of simulated digital behavior records, showing key performance indicators like average app usage time and sleep hours in a left-hand card. An adjacent SVG bar chart, built with D3.js v7, displays the distribution of social media platforms using aggregated frequency counts. The page loads the remote CSV via JavaScript’s `fetch()`, parses it with `d3.csvParse`, and computes rollups with `d3.rollups`. A scrollable preview table shows the first eight rows to verify parsing.

Mar 7, 2026

Loading thumbnail…

SaiTeja_ICE_6_Bar Chart

A bar chart shows the average daily screen time in hours for each app category, sorted from highest to lowest, based on a digital usage dataset loaded from a CSV file. Each bar is rendered as an SVG `rect` with a rounded corner, and the average value is labeled above each bar. The chart uses D3 v7 APIs including `d3.rollup` to aggregate data by category, `d3.mean` to compute averages, and `d3.scaleBand` with `d3.scaleLinear` for axes, with horizontal gridlines and axis labels.

Mar 7, 2026