M

MeghanaChowdaryVelaga@my.unt.edu

@meghanachowdaryvelaga·23 public vizzes

Loading thumbnail…

Network Graph_11703795

A force-directed network graph visualizes career progression paths across three distinct fields: software development, design, and healthcare. Pink circular nodes represent job titles, with gray lines showing progression links, including one cross-field connection from Data Scientist to UI/UX Designer. The layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. Users can drag any node, which triggers `d3.drag` events that adjust the simulation's alpha target and apply temporary position forces during interaction.

Loading thumbnail…

Tree_11703795

This dendrogram visualizes a career-path hierarchy, showing the relationships from a central "Career Root" through three main domains (Technology, Healthcare, and Creative) to specific job roles. Each node is a colored circle, with branches colored by category (steelblue for Technology, tomato for Healthcare, green for Creative). The example uses the D3 v7 `d3.stratify` and `d3.tree` layout functions to compute the tree structure and positions, rendering 1300x400 coordinate space onto an SVG. Node and link drawing relies on `root.links()` and `root.descendants()` to populate the SVG elements.

Loading thumbnail…

ICE_8_Harsha_Palacharla

This visualization shows a hierarchical tree of patient health records, where each node represents an individual with their age, blood pressure, and cholesterol levels. Node size encodes blood pressure, while color indicates cholesterol risk categories (green, amber, red). Built with D3.js v7, the code uses `d3.stratify()` to build the hierarchy, `d3.tree()` for layout, and `d3.linkHorizontal()` for curved links, rendering the final result as SVG circles and labels.

Loading thumbnail…

Area chart_11703795

This area chart shows how daily step counts vary with age, using a semi-transparent blue filled region to emphasize the trend across the age range. The visualization loads data from a CSV file hosted on GitHub, converts the age and daily_steps fields to numbers, and sorts the records by age to ensure a continuous path. Built with d3.v7, it uses d3.area() to generate the SVG path, along with scaleLinear for the x and y axes, and d3.axisBottom and d3.axisLeft to render the labeled axes.

Loading thumbnail…

line chart_11703795

This line chart shows the relationship between age and daily steps, with age on the x-axis and daily step counts on the y-axis. The data is loaded from a GitHub gist via `d3.csv` and sorted by age to create a continuous steelblue line. The visualization uses `d3.scaleLinear` for both axes, a `d3.line` generator to produce the path, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes, all rendered as SVG within a 600×400 pixel chart area.

Loading thumbnail…

SCATTER PLOT 11703795

This scatter plot displays the relationship between age and weight using a reusable function pattern. The visualization renders steelblue circles with 70% opacity on an SVG canvas, with axes labeled "Age" and "Weight." Built with D3 v7, the code defines a `scatterPlot` factory function that supports configurable width, height, data, and accessor methods. It uses `d3.scaleLinear` for both x and y scales, `d3.axisBottom` and `d3.axisLeft` for the axes, and loads data from a CSV file hosted on GitHub Gist via `d3.csv`.

Loading thumbnail…

ICE7_11703795_PieChart

This pie chart displays the distribution of smokers versus non-smokers from a health information dataset, revealed through two labeled slices. The visualization aggregates the dataset’s `smoker` column by counting occurrences of “yes” and “no” values. Using D3 v7, the code applies the `d3.pie()` layout and `d3.arc()` generator to render SVG paths, with `d3.schemeCategory10` coloring each slice. A legend, constructed manually with SVG rectangles and text, maps colors to categories. The chart loads remote CSV data via `d3.csv()` and includes a fixed 400x400 pixel SVG canvas.

Loading thumbnail…

ICE7_11703795_SCATTER PLOT

This reusable scatter plot displays the relationship between years of experience (x-axis) and salary midpoint in thousands (y-axis) for a dataset of tech professionals. The visualization is rendered as SVG circles with steelblue fill and white strokes, using D3 v7’s `scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes. The code structures the chart as a reusable `scatterPlot()` function with configurable width, height, and accessor methods. Axis labels clarify the variables, while the data is embedded as a CSV string in the page.

Loading thumbnail…

ICE6_11703795_SCATTER PLOT

This scatter plot visualizes the Iris dataset, showing the relationship between two numerical dimensions with points colored by species. A legend allows users to hover over a species to highlight those points while fading others. The visualization is built using D3.js scaleLinear, scaleOrdinal, axisBottom, and axisLeft, with data loaded asynchronously. Points are rendered as SVG circles, and the chart follows a BBC-style theme with custom styling for titles, axes, and species-specific colors.

Loading thumbnail…

ICE6_11703795_BARGRAPH

This bar chart visualization displays the distribution of job roles across a small dataset, with each bar representing the frequency of a specific role such as Software Engineer or Data Analyst. The chart uses D3 v6's `d3.rollup` to aggregate role counts, then renders bars as SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated category labels. The dark green bars transition to hot pink on hover, while the chart sits on a light coral SVG background within a dark gradient page.

Loading thumbnail…

ICE6_11703795_SCATTER PLOT

This scatter plot visualizes the relationship between years of experience and salary for a small dataset of ten individuals, using a dark-themed, styled web page. It renders data points as dark red circles on a light coral SVG background inside a bordered, rounded container. The visualization employs D3.js v6, using `d3.scaleLinear` for both the x and y axes and `d3.axisBottom` and `d3.axisLeft` to draw the scales. Hovering over a point transitions its fill to orange and increases its radius via CSS.

Loading thumbnail…

ICE6_11703795_BARGRAPH

A bar chart displays average body mass index (BMI) by age, using orange rectangles to represent binned age groups. The visualization calculates BMI from weight and height data and aggregates it per age bin. Built with D3 v7, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `bin` to construct the axes and data groups. The SVG output is rendered via the `select` and `append` API, drawing axes with tick marks and labeled "Average Body Mass Index" and "Age". Data is loaded from a CSV source.

Loading thumbnail…

ICE6_11703795_BARGRAPH

A bar chart displays average body mass index (BMI) by age, using orange rectangles to represent binned age groups. The visualization calculates BMI from weight and height data and aggregates it per age bin. Built with D3 v7, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `bin` to construct the axes and data groups. The SVG output is rendered via the `select` and `append` API, drawing axes with tick marks and labeled "Average Body Mass Index" and "Age". Data is loaded from a CSV source.

Loading thumbnail…

ICE6_11703795

This example presents two linked charts that analyze a small job dataset. It displays a bar chart showing the count of people in each job role, using a dark green fill that changes to hot pink on hover, and a scatter plot mapping experience against salary, where points transition to orange and enlarge when hovered. The visualization is built with D3 version 6, using its `scaleBand`, `scaleLinear`, `rollup`, and selection methods within an SVG canvas. The code encodes the dataset directly and uses CSS transitions for interactive styling effects.

Loading thumbnail…

ICE5_11703795

This visualization presents a static summary of a professional career dataset, showing key statistics such as file size, row count, and column count alongside contextual information about career roles and salary ranges. The example uses D3 v7 solely to load the library, with the display built entirely through HTML and CSS styling, including a pink container and styled typography. The page presents the dataset overview as a simple, structured text-based dashboard without any interactive or dynamic data-binding features.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

ICE5_11703795

This interactive visualization celebrates Holi, the Hindu Festival of Colors, with a canvas-based animation of colorful particles floating across the screen. It displays a rangoli-inspired lotus pattern drawn in the background, alongside floating symbols such as pichkaris, water balloons, flowers, and drums. The piece uses the HTML5 Canvas API with custom drawing functions and physics-based movement for each particle, which rotate and change size to mimic real gulal powder. Users can click or touch anywhere to trigger color explosions, while automatic color bursts simulate festival celebrations. The code includes a resize handler and employs requestAnimationFrame for smooth, responsive animation.

Loading thumbnail…

Chocolate Dipped Strawberry

A chocolate-dipped strawberry rendered as a decorative SVG built with D3.js v6. The drawing programmatically constructs the fruit from a strawberry body path, a darker chocolate dip overlay, a wooden stick, green leaves, and a glossy highlight. Small vanilla cream circles and randomized orange sprinkle rectangles are placed across the chocolate surface for detail. The code uses D3 selections, path definitions, and data joins to generate the shapes, with each element styled via CSS classes for a clean, layered composition.

Loading thumbnail…

Chocolate Dipped Strawberry

A chocolate-dipped strawberry rendered as a decorative SVG built with D3.js v6. The drawing programmatically constructs the fruit from a strawberry body path, a darker chocolate dip overlay, a wooden stick, green leaves, and a glossy highlight. Small vanilla cream circles and randomized orange sprinkle rectangles are placed across the chocolate surface for detail. The code uses D3 selections, path definitions, and data joins to generate the shapes, with each element styled via CSS classes for a clean, layered composition.