BhanuGadde@my.unt.edu

@GaddeBhanu·8 public vizzes

ICE 8 Network

A hierarchical network graph maps global health initiatives by linking a central "Global Health" node to four countries, each branching into disease categories and specific conditions like Alzheimer's, Heart Disease, and Malaria. Nodes are colored by group (global, country, category, disease) and labeled, with edges conveying the taxonomy. Built with D3 v7, the visualization uses `d3.forceSimulation` with force-link, many-body charge, and center forces to compute layout, while SVG elements are positioned during the simulation's tick callback to render the interactive, draggable network.

Apr 8, 2025

Loading thumbnail…

ICE 8 Tree

This horizontal tree diagram visualizes a hierarchy of global health data, tracing from a "Global Health" root through four countries (Canada, Japan, Germany, Kenya) into disease categories and specific illnesses. Node colors encode the tree depth, with a legend distinguishing global health, country, category, and disease levels. The code uses D3 v7’s `d3.hierarchy` and `d3.tree` layout, drawing links with `d3.linkHorizontal` and rendering nodes as SVG circles and text labels. Styling is minimal, relying on CSS classes for links and nodes.

Apr 8, 2025

Loading thumbnail…

Reusable scatter plot with different symbols

A scatter plot visualizes the relationship between income and time spent surfing, with each circle representing a data point. Hovering over a dot reveals a tooltip displaying exact values. The visualization uses D3.js v7 to load CSV data, create linear scales, and render SVG circles with axes. Mouseover transitions adjust the tooltip's opacity and display the relevant income and time-spent figures for each point.

Apr 2, 2025

Loading thumbnail…

Internet Reusable Scatter Plot

This reusable scatter plot visualizes surfing data, showing the relationship between cost and duration for different surfing areas, with each point colored to encode additional information. Built with D3 v6, the visualization uses a modular function pattern with chainable setter methods for configuring width, height, data accessors, margins, and radius. The code loads CSV data from a GitHub gist and renders SVG circles with axes, axis labels, and a responsive layout. The example demonstrates D3's data join pattern for updating marks and supports animation through D3's transition capabilities.

Apr 2, 2025

Loading thumbnail…

Internet Area chart

This area chart shows how the average time spent surfing varies by age, with a red semi-transparent filled area overlaid on a line. The visualization groups individual-level CSV data by age and computes the mean surfing time per age group. Built with D3 v7, the chart uses `d3.csv`, `d3.group`, and `d3.mean` to aggregate data, then renders an SVG path via the `d3.area()` generator. Linear scales map age and time values to x and y axes, with axis labels and a title drawn as SVG text elements.

Apr 2, 2025

Loading thumbnail…

Internet Line chart

This chart shows the average time spent surfing the internet for different ages, using a line graph with individual data points marked by circles. It plots age on the x-axis against average hours on the y-axis. The visualization is built with D3 v7, using `d3.csv` to load data from a remote file, `d3.group` and `d3.mean` to aggregate the data by age, and `d3.line`, `scaleLinear`, and `axisBottom`/`axisLeft` to render the line, scales, and axes as SVG elements.

Apr 2, 2025

Loading thumbnail…

Internet Pie Chart

A pie chart displays the distribution of user counts across three internet platforms: Instagram at 41, Facebook at 29, and YouTube at 29. The visualization uses D3.js v7 to compute the pie layout via `d3.pie()` and renders each slice as an SVG path with `d3.arc()`. Platform names are placed at each slice's centroid, and a separate HTML legend maps platform labels to their corresponding colors from `d3.schemeCategory10`. The chart is drawn inside a 500×500 pixel SVG element with margins applied to the radius calculation.

Apr 2, 2025

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the basic cost of Netflix subscriptions across ten countries, sorted in descending order. The SVG chart uses D3 v5’s `pie` and `arc` generators to render segments, with `scaleOrdinal` and `schemeCategory10` assigning colors. A legend on the right lists each country with its corresponding cost in dollars, formatted via a custom helper. Data is loaded from a remote CSV using `d3.csv`, and mouseover events log segment values to the console.

Apr 2, 2025