ramsrinivaskatragadda@my.unt.edu

Chart 4

A heat map visualizes COVID-19 confirmed cases and agricultural yield across months. Using d3.csv, it loads data from a GitHub gist and renders SVG rectangles with d3.scaleBand for axes and d3.scaleSequential with the interpolateInferno color scheme. The chart includes month and category axes via d3.axisBottom and d3.axisLeft, plus a custom legend showing high, intermediate, and low values.

Chart 3

A dual-axis line chart compares daily COVID-19 case counts against agricultural yield over time for the Indian state of Uttarakhand. The chart uses red and blue lines with corresponding left and right axes, and a legend to distinguish the metrics. It is built with D3 v6, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`/`d3.axisRight` to render SVG axes and paths. Data is loaded as CSV from a gist, with date parsing and numeric conversion performed inline.

Chart2

A scatter plot visualizes the relationship between crop yield and COVID-19 confirmed cases, with each point representing a data record. The code loads CSV data via `d3.csv`, scales values with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with labels and a simple legend included. The visualization uses a blue dot style with 60% fill opacity, showcasing the correlation between agricultural productivity and pandemic impact across the dataset.

Chart 1

This visualization displays the progression of confirmed COVID-19 cases over time as a single orange line chart. The x-axis maps dates using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` to represent case counts. Data is loaded via `d3.csv` from a GitHub gist and parsed with `d3.timeParse`. The line is rendered with `d3.line`, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The SVG structure is built with D3 v6, with explicit margins, axis labels, and a white background.

Assignment 2 Question 2

This example visualizes employee salaries as an area chart, with each employee’s salary plotted against their ID and the area filled in translucent steelblue. It also adds interactive tooltips on circular data points that display the employee’s name on hover. The visualization loads data from a remote CSV via `d3.csv`, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG shapes with `d3.area` and circle elements. The tooltip appears through D3 transitions, while axis labels are rotated using SVG transforms.

Fork of Q2 Area chart

This example displays a responsive scatter plot of employee salaries using an SVG-based area chart. It loads salary data from a CSV file and maps employee IDs along the x-axis using d3.scaleBand, with salary values on a linear y-scale via d3.scaleLinear. The chart utilizes d3.area to render a filled steelblue region beneath the salary points, and interactive circles with pointer-events enable tooltips that display employee names on mouseover. Axis labels are rotated for readability, and the visualization updates dynamically with d3 transitions.

Fork of Q2 Area chart

This visualization displays employee salaries grouped by gender, using overlapping area paths to compare the two categories across a categorical name axis. The chart loads CSV data via `d3.csv`, nests entries by gender with `d3.nest`, and renders the areas using the `d3.area()` generator. It maps salary values through `d3.scaleLinear` for the y-axis, applies a band scale for the x-axis, and colors each gendered area with a two-value `d3.scaleOrdinal`. The SVG output includes axes via `d3.axisBottom` and `d3.axisLeft`.

Fork of Q2 Area chart

This area chart visualizes music data over time, showing the trend of a single time series as a filled region beneath a line. The chart uses an SVG canvas with a steelblue, semi-transparent fill to highlight the area under the curve. The code leverages D3 v7’s `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom `d3.area` generator to construct the path. Data is loaded from a remote CSV file via `d3.csv` and parsed with `d3.timeParse`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Assignment 2 Question 1

An interactive pie chart displays total sales by item category, using data fetched from a remote text file. The visualization is built with Chart.js on an HTML Canvas element, presenting twenty-two categories with distinct colors and a bottom legend. The code calculates and displays percentage values for each slice via the datalabels plugin, summing sales figures parsed from CSV-formatted rows. The chart summarizes category-level sales performance in a single, static view.

Fork of Fork of Fork to pie chart

This example displays total sales by category as a pie chart, with categories drawn from a CSV file and sales values pulled from a specific column. The chart is rendered on an HTML canvas using the Chart.js library, initiated with `new Chart(ctx, { type: 'pie', ... })`. Data is fetched asynchronously via `fetch()` from a GitHub Gist, then parsed by splitting rows and columns. Random hex colors are generated for each slice using `Math.floor(Math.random() * 16777215).toString(16)`, and percentage labels are computed within the `datalabels` plugin formatter.

Fork of Fork of 6 Buddha

This example shows a pie chart of total sales by item category, with each slice labeled by its percentage share. The code loads comma-separated data from a remote gist, parses the category and sales columns, and generates random colors for each slice. It uses Chart.js to render the chart on a Canvas element, displaying the percentage labels via the datalabels plugin. The chart is set to a fixed 400x400 size with a static title.

Activity6_Task4 Question 1

This interactive bubble chart visualizes the correlation between the sales, production cost, and release year of video games, with each circle representing a title. The horizontal axis maps the year of release, the vertical axis tracks total sales, and the circle’s radius encodes the game’s cost. A color scale distinguishes unique game titles, and hovering reveals a tooltip with precise sales and cost figures. The visualization is rendered using D3 v7 with SVG elements, leveraging `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for coloring, and event handlers for interactive tooltips. Data is loaded from a CSV file via `d3.csv`.

Apr 6, 2024

Activity5_Task3 Question1

An overlapping Buddha illustration is rendered using React with SVG elements. The visualization combines a stylized Buddha path with a background image of flowers, while random colored squares are generated and overlaid on top. The code uses React's map functions to create multiple transparent shapes with random RGB fill values. The SVG path data defines the Buddha silhouette, which is transformed and scaled using SVG group transformations. The rendering relies on React and ReactDOM libraries to dynamically generate the SVG structure in the browser.

Apr 5, 2024

Activity 5_ Task3 Question

The visualization presents a dense, layered composition of brightly colored, semi-transparent polygons that overlap chaotically. It shows a structured loop that generates diamond-like shapes at random positions across the canvas, creating an abstract, kaleidoscopic pattern. The code uses React and ReactDOM to render an SVG. The `App` component maps over a fixed array of numbers to create all polygon elements, with position, fill color, and rotation determined by the built-in `Math.random()` function. A hidden Buddha path is also defined but not displayed due to an unclosed path string. The arrangement is rendered on a black background, producing a vibrant, overlapping visual noise.

Apr 5, 2024

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle's x-position maps to horsepower, y-position to torque, and both its radius and color encode highway MPG, with a legend for size and color. The D3.js v7 code reads from a CSV file and renders an SVG with axis labels and a black tooltip. The visualization includes interactive hover effects, changing circle opacity and stroke width to display the car make.

Activity6_Task3 Question 1

This scatter plot visualizes the Cancer dataset, plotting each sample’s mean radius against its mean texture. Points are colored by diagnosis—sky blue for benign (B) and orange for malignant (M)—with a legend in the upper right. Built with D3 v6, the visualization loads CSV data from a GitHub repository, uses `scaleLinear` for axes, and renders circles via SVG. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, while the plot dimensions adapt to the browser window.

Activity6_Task3 Scatterplot with shape

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length and using different symbol shapes to distinguish the three iris species. The visualization is rendered with d3.v7, employing `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom `shapeLegend` to map each symbol to its species. The data is loaded asynchronously from a GitHub-hosted CSV file via the Fetch API and parsed with `csvParse`.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. The visualization loads CSV data from a GitHub repository and renders circles as SVG elements using D3 v6, employing `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot with custom margins and axis labels.

Activity6_Task2 Question 1

This stacked bar chart visualizes the distribution of music genre ratings across five percentage-based rating buckets, from Below 5.0 to Above 8.5. Each horizontal bar represents a genre, with colored segments showing the proportion of ratings in each bucket. D3 v7 builds the visualization by computing stacked data with `d3.stack()`, scaling positions with `d3.scaleLinear` and `d3.scaleBand`, and rendering SVG rectangles. Interactive tooltips, updated via mouse events, display exact percentages using `d3.format`. The chart reads from a CSV file with genre and rating proportion columns.

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5." Each genre’s row represents the percentage proportion of movies falling into each rating band, normalized to sum to one. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series, `d3.scaleLinear()` for the percentage axis, `d3.scaleBand()` for genre categories, and `d3.scaleOrdinal()` with a five-color palette. Interactive tooltips display the exact percentage per category on hover, while SVG rendering handles all graphical output.

Activity 6_Task1 Question2

This horizontal bar chart displays the population of 20 countries in 2010. The bars are rendered as SVG rectangles using React, with a green fill and blue tick lines. The chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` to abbreviate large numbers. Data is loaded from a CSV file via `d3.csv`, and hover tooltips show the formatted population values.

Activity 6_Task1 Question 1

This example displays a horizontal bar chart of population data for ten countries in the year 2000, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. The React application loads CSV data from a GitHub repository via d3.csv, formats population values with the d3.format function, and renders SVG rectangles as marks with tooltips. Custom axis components generate tick lines and labels, while the chart includes a bottom axis label for "POPULATION-2000".

Activity 6_Task1 year 2000

This bar chart displays the population of the ten most populous countries in the year 2000, sorted along a categorical y-axis with horizontal bars extending proportionally to population values. The visualization uses React and D3 v5, employing `scaleBand` for the country axis and `scaleLinear` for the population scale, with data loaded via `d3.csv` from a GitHub-hosted CSV file. SVG rectangles render the bars, with formatted tick labels showing values in billions and a tooltip on each bar. The chart includes styled axes with blue tick lines and a labeled x-axis reading "POPULATION-2000".

Activity 6_Task1

This bar chart ranks the 30 most populous countries by their 2020 population estimates, with horizontal bars sorted along a categorical y-axis and a linear x-axis. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleBand` and `scaleLinear` scales, axis components, and CSV data loading. Population values are formatted in billions using D3’s `format` function, and each bar includes a tooltip displaying the formatted value. Data comes from a remote CSV file.

6 buddhas

Six buddha silhouettes, each formed by a path stroke, overlap against a floral background. The piece layers dense clusters of semi-transparent, randomly colored circles—generated through nested React maps and `Math.random()`—on top of the SVG paths to create a vibrant, textured collage. The react and ReactDOM libraries render the SVG, while CSS sets the page with a background image, a black border, and a drop shadow for a framed presentation.

Apr 3, 2024