kotlavamsireddy@gmail.com

ICE 8- Network Graph

ICE 8 - Tree Graph

ICE 8 - Tree & Network

Fork of ice-8_TreeStructure

ICE 7- Area Chart

This area chart visualizes the average insurance charges for each age group, using a steelblue filled area to show the trend across ages. Built with D3.js v7 and React, the code fetches a CSV from a GitHub gist, aggregates the raw data by age, and computes average charges. It uses `d3.scaleLinear` for the x and y axes, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for the axes. Interactive tooltips appear on hovering over the data points, which are drawn as SVG circles. The visualization is rendered as a static SVG with no animation.

ICE 7- Line Chart

This line chart visualizes insurance charges by age, using a dataset of individual policyholder records. It shows a positive correlation between age and medical costs, with the line rising steadily as age increases. The visualization is built with D3.js v7 in a React environment, employing SVG for rendering and a tooltip for interactive data inspection. The chart sorts the data by age, then applies linear scales for both axes, and includes axis labels and a styled tooltip that appears on hover.

ICE 7 - Pie Chart

This pie chart shows the distribution of smokers versus non-smokers in an insurance dataset, highlighting the proportion of each category. It uses D3.js v7’s `d3.pie` and `d3.arc` to generate the SVG arcs, with a color scale assigning teal to smokers and orange to non-smokers. Interactive tooltips appear on mouseover, displaying the category name and count. The data is fetched from a remote CSV file, and a legend below the chart clarifies the color coding.

ICE7- Reusable scatter plot

This animated scatter plot visualizes an insurance dataset, plotting age on the x-axis against BMI, charges, or children, which cycle every two seconds. Built with D3.js, the SVG chart uses distinct symbols and colors to differentiate smokers from non-smokers, with axes labeled dynamically as the y-axis metric changes.

Reusable scatter plot

This reusable D3 scatter plot visualizes the insurance dataset, mapping age on the x-axis and cycling through BMI, charges, and children values on the y-axis every two seconds. It uses SVG rendering with animated transitions to swap the y-axis label and rescale the data points. The plot differentiates data points by smoker status using distinct symbols and colors from D3's `schemeCategory10` scale, and is built with reusable accessors for width, height, data, and margins.

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Fork of Fork of vamshi scatter

This scatter plot displays the weight of various fruits, with each fruit category plotted along the x-axis and its corresponding weight in grams on the y-axis. The code uses D3.js v7 to fetch data from a remote CSV file via `d3.csv`, then maps the categorical fruit names to a band scale (`d3.scaleBand`) and the numeric weights to a linear scale (`d3.scaleLinear`). Circles are rendered as SVG elements representing each fruit’s weight. The chart includes rotated x-axis labels through `d3.axisBottom` and labeled axes, with the styling applied via CSS classes.

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Fork of ICE-6-Prathima -coffee

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

Fork of Bar Chart with Basic Hover

This example shows a horizontal bar chart of the top 20 most populous countries, with a hover interaction that highlights the selected bar in black and dims the others to gray. The chart is built using D3's `scaleBand` and `scaleLinear` to map country names and population values to positions, while `axisLeft` renders the y-axis. Mouseenter and mouseleave events on the bars update a `hoveredDatum` state to drive the color changes. The data comes from a CSV file containing country population figures, and the visualization uses an inner rectangle fill for visual separation.

Fork of Simple Bar Chart

This fork of a simple bar chart visualizes the top 10 most populous countries as of January 1st, 2024, using an SVG rendering approach. The chart loads data from a CSV file hosted on GitHub via D3's `d3.csv` method, then displays it using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as SVG rectangles, with axes added via `d3.axisBottom` and `d3.axisLeft`. The code includes a video tutorial link and is structured for easy modification with new datasets.

Fork of Simple Scatter Plot

This example shows a static bar chart of a fruits dataset, displaying categorical values along the x-axis and numeric magnitudes on the y-axis. It loads a remote CSV file using `d3.csv` and renders the visualization as an SVG on the page. The code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the value axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The chart explicitly constructs bars with SVG `rect` elements, while the data originates from a GitHub-hosted CSV file.

VamshiIce5

This interactive webpage displays a fruit dataset in a searchable table, styled with a purple background and colorful CSS. It features a navigation bar containing repeated SVG icons of apples and mangoes, which serve as decorative elements. The page is built using HTML and CSS, with the table styled for readability, including hover effects and alternating row colors. The SVG fruit icons change color on hover, and the page includes a search input for filtering the dataset. The design emphasizes a playful, colorful aesthetic while maintaining functional data presentation.

new creature.js

This example uses HTML and CSS to construct a small, friendly creature called a Pentacritter. The scene shows a static character with a body, eyes, mouth, antennae, ears, a nose, hands, and legs, all arranged using positioned `div` elements. The CSS defines the creature's shape and colors, using properties like `border-radius` for rounded features and absolute positioning to place each part. The code does not rely on any JavaScript libraries or data sources; it is a purely visual, style-based illustration built with standard markup and cascading style sheets.

Fork of Fork of Main.js

This example builds a playful nature scene with emoji characters placed on a light green background. The scene includes a sun, trees, flowers, birds, a cat, a dog, a butterfly, clouds, mountains, a river, a house, and a road, each represented by an emoji and styled with CSS. The HTML file uses JavaScript to dynamically create and append these elements to the scene, while the CSS file defines their positioning and colors. The code uses the `createElement` and `appendChild` DOM APIs, along with CSS classes for layout, to compose the illustrative landscape.