B

bhargavinalamothu@gmail.com

@VBhargavi23·27 public vizzes

Loading thumbnail…

NETWORK GRAPH ( ICE 8)

This interactive network graph visualizes the relationship between five Indian sweets and their ingredients. Orange nodes represent dishes while light blue nodes show components such as flour, sugar, and ghee, with gray links connecting each recipe to its required items. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while SVG circles and text labels render the data. Users can drag nodes to rearrange the layout, which was built with D3 v7.

Loading thumbnail…

TREE STRUCTURE ( WITH ELEMENTS) ICE

This interactive tree diagram maps a small dataset of Indian dishes into a hierarchical structure organized by region and course type. The visualization uses distinct shapes and colors—circles for the root and courses, squares for regions, and diamonds for dishes—with a legend explaining each category. Built with D3 v7, the code constructs the hierarchy from CSV-style data, applies a tree layout, and renders the result as an SVG using `d3.tree`, `d3.linkHorizontal`, and custom node styling.

Loading thumbnail…

TREE STRUCTURE ( ICE)

This example displays a hierarchical tree visualization of Indian food items, organized by region and course. The data is embedded as an array of objects showing five dishes, which is converted into a tree structure using a custom `buildHierarchy` function. The visualization uses `d3.hierarchy` and `d3.tree` to compute the layout, with `d3.linkHorizontal` generating curved paths for the links. Nodes are rendered as SVG circles with text labels, positioned via the `transform` attribute, and styled with CSS classes.

Loading thumbnail…

ICE 7 REUSABLE SCATTER PLOT

This scatter plot visualizes the relationship between sleep hours and age for a small sample of individuals. It uses D3.js (v6) with SVG rendering, demonstrating a reusable function that accepts a selector and dataset to generate the chart. The code creates linear scales for both axes, adds labeled axes with tick marks, and renders red circles with white strokes as data points.

Loading thumbnail…

AREA CHAT for the ICE7

This area chart, built with D3 v6, visualizes the relationship between sleep hours and age for a small dataset of five individuals. The graphic displays sleep hours on the x-axis and age on the y-axis, using a filled gray area rendered as an SVG path with opacity. The chart employs `d3.scaleLinear` for both axes, `d3.area` with `d3.curveMonotoneX` for the smoothed area, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. The data is hardcoded within the script, and the visualization is rendered directly into the SVG element.

Loading thumbnail…

Fork of ICE7_AreaChart_HarshaPalacharla

This area chart visualizes the relationship between sleep hours and age, plotting age on the y-axis against sleep hours on the x-axis for a dataset loaded from a CSV file. The chart uses D3 v6 with a linear scale for both axes, an area path filled in steelblue with semi-transparency, and a monotone curve for smooth transitions. Data points are parsed from the CSV columns "SLEEP HOURS" and "AGE", and the SVG rendering includes bottom and left axes.

Loading thumbnail…

Fork of ICE7_LineChart_HarshaPalacharla

This example shows a line chart depicting the relationship between sleep hours and age for a small set of individuals. The visualization plots five data points on a Cartesian coordinate system, using a monotone curve to connect them in sequence. The chart is rendered with SVG and built using D3 v6, with d3.scaleLinear for the x and y axes, d3.line with d3.curveMonotoneX to generate the path, and d3.axisBottom and d3.axisLeft for the axes. The styling uses a steelblue stroke for the line.

Loading thumbnail…

ICE 7 LINE CHART

This line chart visualizes the relationship between age and sleep hours using five data points. The SVG rendering relies on d3.line to generate the path, with d3.scaleLinear mapping the age and sleep domains to pixel coordinates. Axes are added via d3.axisBottom and d3.axisLeft. The chart applies a steelblue stroke to the line and includes margins for layout.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

A line chart shows sleep duration in hours for 17 named individuals, with each name on the x-axis and duration from 0 to 9 on the y-axis. The SVG visualization uses d3.scalePoint for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.line to generate the path connecting data points. Axes are rendered with d3.axisBottom and d3.axisLeft, with rotated bottom labels for readability. The chart's static dataset lists names and sleep durations directly in code, styled with steelblue strokes and labeled axes.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with age on the y-axis and sleep duration on the x-axis, using data from a CSV file fetched from a GitHub gist. The visualization is built with D3 v6, rendering circles as SVG elements within a full-window canvas. The code implements a reusable scatter plot function with configurable width, height, margins, and radius, and uses D3's scaleLinear for axis scaling and axisLeft/axisBottom for the axes. Axis labels are added as text elements via SVG.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between age and sleep duration, showing sleep duration on the x-axis and age on the y-axis. It uses d3.csv to load data from a remote GitHub gist, d3.scaleLinear for x and y scales, and d3.axisLeft and d3.axisBottom to render axes. The visualization is built with d3 v6, rendering circles to an SVG, with the chart size that adapts to the window dimensions.

Loading thumbnail…

ICE 7 REUSABLE SCATTER PLOT

This interactive scatter plot visualizes the relationship between sleep duration and age, with each circle representing an individual data point sourced from a CSV file. Built using D3.js v6, the chart renders as an SVG and employs reusable chart patterns through a custom `scatterPlot` function with getter-setter methods. The visualization uses `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and includes labeled axes for sleep duration (x-axis) and age (y-axis).

Loading thumbnail…

ICE 7 PIECHART

This pie chart shows the distribution of productivity levels in relation to sleep duration, using counts of categorical values from a CSV dataset. It fetches the data from a GitHub Gist, parses the rows, and aggregates the third column into named categories. The visualization is rendered with Chart.js on a canvas element, applying a predefined color palette per slice. A legend appears on the right, and an error message displays if no valid rows are found.

Loading thumbnail…

Fork of Fork of Fork of PIE chart for ICE-7

The example shows a colorful pie chart categorizing products from an ICE-7 dataset, with a legend on the right, rendered alongside an animated scene of a meditating Buddha, a tree, clouds, and a gradient sky and ground. The pie chart is built with D3.js v6 using d3.pie, d3.arc, and d3.scaleOrdinal, while the background environment is composed of React components drawing SVG shapes. Clouds drift horizontally via React state updates, and the tree uses recursive branching logic, all rendered as SVG within React.

Loading thumbnail…

Fork of Fork of ice-7 q2

This example displays a pie chart with labeled slices, where each slice’s color corresponds to a categorical label and its size reflects a numeric value. The visualization is rendered as static SVG using D3.js v6, with the chart centered in a 500×500 viewport and slice labels placed at each arc’s centroid. Data is loaded asynchronously from a remote JSON file via `d3.json`. The chart uses `d3.pie` to compute arc segments, `d3.arc` for path geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign colors.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between an individual's sleep duration in hours and their age in years, with each data point represented as a steelblue circle. The visualization is built using D3 v6, where the code fetches a text dataset from a GitHub gist, parses the CSV-formatted data, and scales the values linearly for both axes. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with explicit margins defining the plotting area, and the plot is rendered as an SVG element within the HTML page.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with each point representing an individual’s reported hours of sleep plotted against their age. The visualization uses a reusable `scatterPlot` function built with D3 v6, which configures linear scales for both axes, draws circles with a fixed radius, and appends axis labels. Data is loaded asynchronously via `d3.csv` from a remote gist URL, with numeric parsing applied to the `Sleep Duration` and `Age` fields. The SVG fills the entire browser window, and the chart is rendered using standard D3 selections and joins.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot visualizes the relationship between sleep duration and age from a CSV dataset loaded via `d3.csv`. It renders blue circles positioned with `d3.scaleLinear` scales and adds axes using `d3.axisBottom` and `d3.axisLeft`. Built with D3 v6, the SVG chart computes domain padding by subtracting and adding one to the data extents.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This interactive scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples, with each point representing a data entry from a provided CSV file. The visualization, rendered on an HTML5 Canvas using the Chart.js library, initially fetches JSON data from a GitHub Gist URL but includes code for parsing CSV data with PapaParse as an alternative data source. The chart displays each sample as a blue point on axes labeled for the two acidity measurements, facilitating quick comparison of wine characteristics across the dataset.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This visualization presents a scatter plot that examines the relationship between a passenger's age and ticket price. The plot uses D3.js v6 to render the data as individual circles on an SVG canvas, with axes labeled and scaled according to the data's extent. The data is loaded remotely from a GitHub gist and parsed as CSV, with values converted to numeric types for accurate plotting. The code uses D3 API methods including `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` for the coordinate system.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples. The D3.js v6 code loads CSV data and renders circles on an SVG canvas using `d3.scaleLinear` for axes and `d3.extent` to determine the domain. The x-axis uses `d3.axisBottom` and the y-axis `d3.axisLeft`, with points colored steelblue.

Loading thumbnail…

ICE Assignment-6 scatter plot

This scatter plot displays the relationship between X and Y values from an external CSV file, fetched from a GitHub Gist. The visualization uses Plotly’s `newPlot` function to render blue markers, with axis labels and a title. The CSV is parsed client-side with PapaParse, which converts numeric strings into numbers. The chart updates asynchronously after retrieving the data via the `fetch` API, with basic error handling for loading failures.

Loading thumbnail…

Fork of ICE6 - Marks and Channels

This example shows a bar chart of sales revenue per product from January through May 2024. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist and aggregating it with `d3.rollup` to sum revenues by product. Horizontal bars are drawn as `rect` elements with a steelblue fill that turns orange on hover, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

learning loading of data

This example demonstrates how to load and summarize a remote CSV dataset using D3.js v7. It fetches a CSV file from a GitHub gist, parses it with `d3.csvParse`, and displays the file size, row count, and column count alongside a dynamically generated HTML table of the data. A loading spinner animation is shown until the fetch completes, with error handling if the request fails. The page uses a green background and styled cards to present the dataset summary and preview clearly.

Loading thumbnail…

cake formation with 2 layers

This example uses D3.js v5 to draw a two-layer cake with decorative elements. The visualization shows a bottom and top cake tier, five candles with flames, a knife, three balloons, and ten randomly placed sprinkles. The code builds the scene by appending SVG shapes directly to the document, using `d3.select()` for DOM manipulation and `selectAll().data().enter()` for iterative creation of repetitive elements like candles and sprinkles, with randomized positioning for the latter.