vedasrivarma13@gmail.com

vedasri-ICE8-Social Network Graph

Veda - ICE8 - Tree Graph

Fork of veda_piechart7

This example shows a pie chart of GDP per capita from the 2019 Happiness Report, with each slice labeled by country or region and accompanied by a colored legend. Built with D3.js v6 and React, the chart uses `d3.pie()` to compute arc segments and `d3.arc()` for path generation, assigning colors via `d3.scaleOrdinal` with the `schemeCategory10` palette. Country labels are placed using arc centroids, and the legend maps colors to country names, all rendered as SVG elements within a 960x500 canvas.

area chart_veda

This area chart visualizes the perception of corruption across countries using the 2019 Happiness Report dataset. It shows the value for each country along a continuous x-axis, with the area filled in a soft teal and a darker line marking the trend. The chart is built with D3 v7, using `d3.area()` to generate the path and `d3.scaleLinear` for both axes. Country names are rotated along the x-axis for legibility, and the data is loaded via `d3.csv` from a GitHub repository.

line Chart

This line chart visualizes the relationship between age and the mean diabetes outcome, revealing how the average outcome varies across different ages. The data comes from a diabetes dataset loaded via `d3.csv` and processed with `d3.rollup` to calculate mean outcomes per age group. The visualization uses D3 v7’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs within a React-compatible SVG rendering, styled with the Poppins font on a teal background. The chart includes rotated x-axis labels and axis titles for clarity.

Reusable D3 Scatter Plot

This reusable scatter plot displays the diabetes dataset, mapping glucose, BMI, age, and blood pressure attributes to axes. The visualization cycles through different x-axis metrics every two seconds using `setInterval`, while keeping BMI fixed on the y-axis. Built with d3.v6, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with `selection.join` to bind circles to data points. The D3 module pattern via `scatterPlot()` enables configurable width, height, margins, and radius, rendering as animated SVG with steelblue circles on a light gray background.

pie chart

This pie chart visualizes the happiness scores of countries in Western Europe from the 2019 World Happiness Report. The visualization uses D3.js version 5 with an SVG rendering approach, employing `d3.pie()` and `d3.arc()` to generate slices, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `arc.centroid` for label placement. Each slice represents a country, with its size proportional to the reported happiness score, while a legend identifies the color coding. The data is loaded directly from a CSV file hosted on GitHub.

ice6-bargraph

This bar chart displays the number of Hogwarts students in each of the four houses, using the Chart.js library with canvas rendering. It shows Gryffindor, Slytherin, Ravenclaw, and Hufflepuff in their canonical colors, with counts derived from a CSV file. The code fetches the data via the fetch API, processes it by counting house occurrences, and draws the chart with explicit axis titles and a hidden legend.

s6

This scatter plot maps Hogwarts house names to numeric hobby values, showing the distribution of hobby associations across Gryffindor, Hufflepuff, Slytherin, and Ravenclaw. The visualization uses an SVG rendered through React, with D3 v6’s `scalePoint` for the categorical x-axis and `scaleLinear` for the y-axis. Circles represent individual data points, positioned via `x()` and `y()` scale functions. Axis labels and a title are added using SVG text elements, while the chart is styled with CSS for a light blue background and tomato-red dots.

Fork of ICE6.1

This visualization displays student data from Hogwarts, mapping roll numbers against hobby categories as colored dots. It uses D3 v6 to load a CSV file, scales the data linearly, and renders circles colored by house (Gryffindor, Hufflepuff, Slytherin, Ravenclaw) via an SVG. The code uses `d3.csv`, `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) to create the scatterplot. Labels for "Petal Length" and "Sepal Length" are added, though the data fields are roll number and hobby.

test

This example visualizes the fictional Hogwarts student dataset from the Palmer Penguins-derived template, plotting the distribution of student hobbies across four houses and seven school years. The visualization uses a stacked bar chart, with each bar representing a school year and segments colored by hobby, encoded via the d3-scale-chromatic categorical color scheme. The chart highlights the frequency of each hobby, such as Wizard chess and Potion brewing, across houses and years, emphasizing patterns like the prevalence of Magical creatures in Gryffindor or the concentration of Wizard chess among second-years. The author demonstrates how to parse categorical and quantitative fields—Roll Num as a number, Year as a quantitative axis—and map them to visual channels. The original data is attributed to the Harry Potter fandom and is licensed under MIT.

ice6

This example visualizes the distribution of students across the four Hogwarts houses using a bar chart. It shows that Gryffindor and Slytherin have the highest counts (56 and 57, respectively), while Ravenclaw and Hufflepuff have slightly lower numbers. The chart is built with plain HTML and CSS, using flexbox for layout and fixed heights for bars. It relies on inline styles for bar dimensions and CSS classes for house-specific colors, with no JavaScript libraries or data-fetching involved. The x- and y-axes are manually constructed with styled divs.

veda_ice5

This example summarizes a Hogwarts-themed dataset using D3.js version 7, loading CSV data from a GitHub repository. The visualization displays the dataset’s structure by computing and presenting row and column counts, along with an estimated file size in kilobytes, in an HTML summary panel. The page also features a hand-coded SVG illustration of a wand with an animated sparkle effect, created with CSS keyframes, alongside a simple geometric triangle composition rendered directly in SVG. The code uses D3’s `csv` method to fetch and parse the data, then dynamically updates the Document Object Model (DOM) elements to show the calculated metadata.

veda_ice5

This example visualizes a dataset by rendering it as a simple, centered text block on a blue background. The code uses D3.js v7 to load and display the data, but the primary focus is on a minimal HTML page with inline CSS styling. It demonstrates a basic setup for embedding D3 in a React or plain JavaScript environment, leveraging the `d3.min.js` library. The visualization itself is static, with no interactive elements or complex charts, serving as a barebones starting point for integrating D3 with a custom layout. The author’s name and source version are noted in the metadata.

veda_ice5

This example summarizes the Hogwarts dataset by displaying key statistics about the loaded CSV file, including row and column counts and estimated file size. It uses D3.js v7 to fetch the data from a remote GitHub repository and compute these metrics. The page also features a decorative wand with a sparkle animation and an embedded SVG triangle image, rendered with inline SVG markup. The visualization focuses on presenting a simple data summary alongside playful, Harry Potter-themed visual elements, all styled with custom CSS.

Fork of Flowers for my project

This visualization uses D3.js to render a stylized garden scene on a black canvas. It draws white circles to represent clouds, a pink rectangle for the stem, and twelve purple petals composed of double circles arranged around a central heart symbol. A yellow circle in the corner acts as the sun, while a blue rectangle near the bottom represents water. All elements are positioned using mathematical calculations for the petal angles, with shapes created via D3 selections and appended SVG primitives.

Fork of Let's make a face with me D3.js!

This example demonstrates how to build a stylized smiley face with SVG using D3.js v5, showing how to select elements, append shapes, and apply transformations. The code creates a blue circular head, heart-shaped eyes, rectangular eyebrows, and a mouth using the `d3.arc` path generator. The eyebrows are positioned dynamically based on variables like `eyeSpacing` and `eyebrowYOffset`, but the visualization remains static—it renders the face once without any interactive or animated behavior. The project is a fork of a tutorial by VedasriTulabandula, using D3’s `select` and `arc` APIs.