lingaladineshteja23@gmail.com

project covid

This pie chart displays the distribution of total COVID-19 deaths by location, with each slice labeled by its corresponding region. The visualization is built using the D3.js library, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart. Data is loaded from a remote CSV file containing total death counts, which is parsed and converted to numeric values. The chart is rendered as an SVG, positioned at the center of the canvas, with slices colored via a categorical color scheme and textual labels placed at each slice’s centroid.

A-2_Q-2

This example shows an area chart of age versus height, with the area filled in a solid blue color beneath the line. It uses D3 v7 to load a CSV file from a GitHub gist, parse the data, and sort the entries by age in ascending order. The visualization defines linear scales for both axes and uses the `d3.area` generator to create the filled path, while `d3.axisBottom` and `d3.axisLeft` render the axes with labels. The SVG rendering is sized to 600 by 400 pixels, with a slightly filtered fill color applied to the area path.

A-2_Q-2

This chart shows how weight changes with age as a filled area, with age on the x-axis and weight in kilograms on the y-axis. The data is loaded from a remote CSV file and parsed with `d3.csvParse`. The visualization uses D3 v7 to create an SVG with a linear scale for both axes. An area path is generated with `d3.area` and appended to a group element, with green fill. Axis labels and a title are added using `d3.axisBottom` and `d3.axisLeft`.

A-2_Q-2

This chart shows how weight changes with age as a filled area, with age on the x-axis and weight in kilograms on the y-axis. The data is loaded from a remote CSV file and parsed with `d3.csvParse`. The visualization uses D3 v7 to create an SVG with a linear scale for both axes. An area path is generated with `d3.area` and appended to a group element, with green fill. Axis labels and a title are added using `d3.axisBottom` and `d3.axisLeft`.

AreaChart

Question 2

This area chart displays the relationship between age and BMI in a diabetes dataset, with age on the x-axis and BMI on the y-axis. The visualization encodes the data as a single filled area, using a steelblue fill to represent the trend of BMI values across increasing ages. The code loads CSV data from a GitHub Gist and sorts it by age before rendering. It employs D3.js v7’s `d3.area`, `d3.scaleLinear`, and axis components to construct the SVG chart.

assig_2-dinesh

This pie chart visualizes the distribution of diabetes cases across five age ranges (0-20, 21-40, 41-60, 61-80, and 81+). The code fetches a CSV file from a GitHub repository, parses it with `d3.csvParse`, and counts occurrences per age group. It renders the chart using D3.v7's `d3.pie` layout and `d3.arc` generator within an SVG, with a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`). A legend and labels for each segment are added dynamically via D3 selection and append methods.

Assig_2

This example shows a pie chart of diabetes data, displaying the count of each type as labeled segments with a corresponding legend. It visualizes the distribution of diabetes types by count in thousands, with each slice colored distinctly and annotated with its value. Built with D3 v7, it uses `d3.pie` to compute the angles, `d3.arc` to generate the paths and segment centroids, and `d3.scaleOrdinal` for color mapping. The data is fetched as CSV from a GitHub repository and parsed with `d3.csvParse`, while SVG rendering handles the chart and legend.

activity 6_Q3

This scatter plot visualizes the relationship between Attack and Defense statistics for a dataset of creatures, with each point colored by generation and a legend indicating the generation categories. The visualization uses D3.js (version 7.8.5) to render an SVG, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeDark2` for color encoding, and `axisBottom`/`axisLeft` for tick marks. Data is loaded from a CSV file and parsed in JavaScript before being passed to the rendering function, which also includes a legend generated dynamically based on the generation values.

Fork of Activity6_Q4

This bubble chart compares total alcohol and tobacco use across US states in the past month, with circle size encoding population and color intensity representing alcohol usage rates per 1000 people. It uses d3.csv to load data from a filtered CORGIS dataset and renders SVG circles with d3.scaleLinear for x, y, radius, and color scales. Tooltips are provided via SVG title elements on each circle.

Activity6_Q4

This D3.js bubble chart visualizes the relationship between reported alcohol and tobacco use across U.S. states, with data sourced from the CORGIS dataset. Circle position maps total alcohol use against total tobacco use, while circle size encodes population and color intensity represents the rate of alcohol use per 1000 people. The chart uses `d3.scaleLinear` for axes, size, and color, and renders SVG circles with hover tooltips via `<title>` elements. It includes labeled x and y axes, a chart title, and a legend explaining size encoding.

A6_t3_q3

A reusable scatter plot visualizes the relationship between calorie content and price for menu items, with points colored by category. The D3.js v6 code uses `d3.select` to append an SVG, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks. Data loads from a gist CSV, parsed with `d3.csv`, and colored via `d3.scaleOrdinal` with `d3.schemeCategory10`. Circle radius is fixed at 5 pixels.

activity6-q3

This animated scatter plot visualizes Test Cricket player records, plotting runs against batting average with SVG symbols colored by country. The chart cycles through different x-axis metrics—runs, average, strike rate, and innings—every three seconds using `setInterval`. Built with D3.js (v6.7.0), it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function implementing the reusable chart pattern. Player types are distinguished by geometric symbols from `d3.symbol`, with data loaded from a CSV file hosted on GitHub Gist.

Activity-6_Question-3

This scatter plot visualizes the relationship between fixed acidity and alcohol content in red wines, with each circle representing a wine sample. The chart uses axes labeled "Fixed Acidity" and "Alcohol" to display the distribution of these two chemical properties. Built with D3 v6, the visualization loads CSV data from a GitHub repository, parses it using custom row mappings, and renders points as semi-transparent steelblue circles. The code employs d3.csv, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to handle data loading, scaling, and axis generation.

activity6_task 4

This interactive bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a vehicle make, positioned by its horsepower and torque values, with the circle size encoding highway MPG and color distinguishing makes. The chart uses D3.js v7 with SVG for rendering and includes a tooltip that displays the make on mouseover, plus legends for bubble size and color categories. Data is loaded from a CSV file, and D3 scales and axes are used to map the quantitative fields.

A6_t4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes using D3.js v7. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and the car make, respectively. An interactive tooltip appears on mouseover using the `.on` event handlers, and a legend decodes the MPG bubble sizes. The chart reads data from `bubblechart.csv` and renders via SVG with smoothed color transitions from `d3.interpolateTurbo`.

Fork of Activity6_Q

This scatter plot visualizes the red wine quality dataset, showing the relationship between fixed acidity and alcohol content. Each circle represents a wine sample, colored by its quality rating using a categorical color scale. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and parse the data, scale the values, and render the SVG axes and circles. The plot is responsive to the window size, with axis labels for both variables.

activity6_t3.2

This interactive D3 v7 scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. The visualization encodes the categorical species variable through different point shapes, with a custom legend annotating each shape. Built using a modular structure with `scatterPlot`, `axes`, and `shapeLegend` modules, the example employs D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to map data to positions and glyphs, while `csvParse` loads the remote CSV data. The chart updates dynamically within an SVG canvas sized to the browser window.

Fork of Activity6_T3.2

This example visualizes the Iris dataset as a scatter plot, showing the relationship between petal length and width for three flower species, with each species color-coded (skyblue, lightgreen, orange). The code uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create an SVG chart. It loads CSV data asynchronously via `d3.csv`, maps data points to circle elements using `join('circle')`, and labels axes with rotated text. The plot fills the full browser window, with axes positioned according to specified margins.

Activity6_Task3

This scatter plot visualizes the classic Iris dataset, mapping petal length and width for each sample point. The visualization encodes the three Iris species—setosa, versicolor, and virginica—using distinct colors (skyblue, lightgreen, and orange), with each circle’s radius fixed at 5 pixels. Built with D3 v6, it loads the dataset via `d3.csv`, scales both axes with `d3.scaleLinear`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output displays labeled axes for petal length and width, with data points positioned using the `selectAll` and `join` pattern.

task2 question

A stacked bar chart displays the percentage distribution of five rating levels across different vegetables, with each bar segment colored by rating category and totaling 100%. Hovering over a segment highlights it and reveals a tooltip with the exact percentage for that vegetable and rating level. The visualization uses D3 v7’s `d3.stack()`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to encode data from a CSV file, rendering segments as SVG rectangles with mouse event handlers for interaction.

Fork of IMDb Movie ratings

This stacked bar chart shows the percentage distribution of IMDb ratings across five movie genres, with each genre’s bar segmented into five rating brackets from below 5.0 to above 8.5. Hovering over a segment displays a tooltip with the exact percentage for that rating level within the selected genre. The visualization uses D3 v7’s `d3.stack()` to compute the stacked data and `d3.scaleOrdinal()` for the color mapping, rendering the chart as SVG elements. The data originates from a CSV file and is loaded asynchronously via `d3.csv()`.

Activity6_Task2

A stacked bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from “below 5.0” to “above 8.5.” The visualization uses d3.stack() to compute stacked segments and d3.scaleOrdinal for color encoding. Mouseover events reveal tooltips showing exact percentages, while d3.scaleBand and d3.scaleLinear position bars and axes. Data comes from an included CSV file, rendered as SVG with d3.v7.

6_task 1

This bar chart displays the population of twenty countries in 2010. The visualization is implemented with a React front-end and renders SVG graphics. It uses D3 version 5 APIs including `scaleBand`, `scaleLinear`, and `max` from the `d3` module to map data. Country names are shown on the y-axis, while the x-axis displays population counts formatted with `format('.2s')` and a custom tick label converter. The data is loaded asynchronously from a CSV file using D3's `csv` function.

6_Task 1

activity 6_Task 1

This example demonstrates how VizHub supports ES6 modules and D3.js integration through a minimal loading sequence. The page uses `import { select } from 'd3'` to manipulate the DOM, setting the text of a `#message` div to "Hello VizHub!" via a local module export. It loads D3 v5 from UNPKG via a CDN script tag in `index.html`, alongside a custom `styles.css` that centers and scales the message text. The code also includes a regular expression and unused variables, but the primary visual output is the large, centered greeting rendered by D3.

6 Buddha

Six translucent Buddhas overlap in a single SVG canvas, each rendered as a complex SVG path with randomized RGB colors and opacity. The static composition forms a meditative, layered figure against a photographic flower background, using React and ReactDOM to generate the SVG elements from a matrix of points. The code maps over arrays to produce random coordinates and color values, embedding the Buddha path data directly in the markup.

Fork of Buddha

The visualization displays a dense, kaleidoscopic arrangement of randomly generated semi-transparent polygons layered over a detailed Buddha path. Built with React and rendered as SVG, it uses nested array maps to create hundreds of overlapping diamond shapes, each with randomized positions, colors, and rotations. The Buddha figure, composed of a complex SVG path, is embedded beneath the chaotic polygon field, creating a vibrant, psychedelic contrast against the black background. The code relies on React’s `ReactDOM` and CSS styling for layout, with no external data sources.

6 Buddha

A dense cluster of colorful, overlapping diamond-shaped polygons is rendered across a black background, creating a chaotic, kaleidoscopic composition. The visualization is built using React and rendered as SVG, with each polygon's position, size, rotation, and fill color generated from repeated random calculations based on an array of integers. The code employs nested `A.map` iterations to produce hundreds of shapes, while the React `polygon` element handles the SVG drawing. A single, geometrically complex Buddha path is also included, transformed and scaled within the composition.

Buddha

A colorful, abstract Buddha-like figure emerges from overlapping, randomly rotated and positioned polygons, rendered on a black background. The visualization uses React to generate SVG elements, with nested `Array.map` iterations creating a dense field of semi-transparent shapes. The figure itself is drawn using a detailed SVG `path`, scaled and translated from an anonymous data source. The code leverages the React and ReactDOM libraries to render the composition in the browser.