P

Preethamreddyannavaram@my.unt.edu

@Preethamreddy78·22 public vizzes

Loading thumbnail…

Activity7_Qustn 2

This visualization displays average daily screen time across different age groups using an area chart. The chart encodes age groups along the x-axis with `d3.scalePoint` and average screen time hours on the y-axis with `d3.scaleLinear`. Data is loaded from a remote CSV file via `d3.csv`, and the area shape is generated with `d3.area` and rendered as an SVG path. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with custom labels for both dimensions. The chart uses a green fill with a darker stroke and includes a title and border around the SVG canvas.

Loading thumbnail…

Activity7.1_Qustn 1

This pie chart visualizes average hours spent per week on various social media platforms, sourced from a CSV file loaded with `d3.csv`. It uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG slices and a color scale. Labels and connector polylines are positioned via `arc.centroid` and `outerArc.centroid`. Clicking a slice updates an HTML div with platform-specific details, while a legend lists all platforms.

Loading thumbnail…

Activity_7.1

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Each species is color-coded with a legend. The visualization uses D3 v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to render SVG circles that update on a setInterval timer. Data is loaded from a GitHub-hosted CSV file, with the axes and plot redrawing for each dimension cycle.

Loading thumbnail…

Activity6_Question 4

This bubble chart compares smartphone models by their CPU benchmark score (x-axis), GPU benchmark score (y-axis), and battery life (bubble radius). Each circle represents a device, colored by brand, with a black outline. The chart uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for axes. Hovering reveals a tooltip showing brand, CPU, GPU, and battery details. Data comes from `smartphones.csv`.

Loading thumbnail…

Activity6_Task 3.1

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis for three iris species. Each circle represents a single flower, with distinct colors assigned to setosa, versicolor, and virginica species. The visualization uses d3.scaleLinear for axis scaling and d3.extent for domain calculation, with the SVG canvas sized to the browser window. Data is loaded from a remote CSV file using d3.csv, and the axes are rendered using d3.axisBottom and d3.axisLeft. The Iris dataset comes from a gist hosted by the author.

Loading thumbnail…

Activity 6_Task 3.2

This example presents a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded by distinct point shapes. The visualization is rendered as an SVG that fills the browser window, using D3 v7’s scaleLinear for axes, scaleOrdinal for shape mapping, and symbol generators for markers. Data is loaded asynchronously from a remote CSV file, parsed with csvParse, and refreshed via a state-based render loop.

Loading thumbnail…

Activity6_task 3.2

This example visualizes the Iris dataset as a scatter plot of sepal length against petal length, with each species distinguished by a distinct symbol shape and a legend labeling the species. The visualization loads the CSV data via fetch and d3.csvParse, then renders the plot using D3.js v7, constructing linear scales, ordinal shape encoding, and axes. The chart relies on reusable D3 modules for scatter plot rendering, axes, and a custom shape legend, with symbols generated via the d3.symbol and symbolsFill API.

Loading thumbnail…

Activity6_Question 3

This scatter plot visualizes the relationship between the number of calls handled per month and the average response time for fictional ambulance units. The data points are colored by unit type—Basic, Advanced, or Critical—using a D3 ordinal scale, with a hover tooltip displaying the unit name, call count, and response time. Built with D3 v7, the visualization renders as an SVG and includes labeled axes for calls (x-axis) and response time (y-axis), along with a legend created via `d3.scaleOrdinal` and `d3.axisBottom`/`d3.axisLeft`.

Loading thumbnail…

Activity_Task 4

This interactive bubble chart visualizes correlations between average horsepower, torque, and highway MPG across 31 car makes from a CSV dataset. Each bubble’s x-position maps to horsepower, y-position to torque, and radius to highway MPG, with color encoding make identity. Built with d3.v7, the SVG chart features a linear radius scale, ordinal Turbo color scale, and hover tooltips displaying the car make. The visualization includes two legends: one for bubble size representing MPG values and another color-coded legend listing all makes. Interactive mouseover events trigger tooltip transitions showing contextual data.

Loading thumbnail…

Activity6_Questn2

This stacked bar chart displays the distribution of public ratings across ten political topics, with each topic’s bar normalized to 100%. The visualization uses D3.js v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` APIs, rendering as SVG. Data is loaded from a CSV file, and each segment’s percentage is revealed via a tooltip on hover. The legend and color-coded segments clarify the five rating categories, from “very low” to “very high.” The chart employs ordinal color scales and axis labels to present the categorical proportions clearly.

Loading thumbnail…

Activity6_Task2

This bar chart shows the percentage distribution of IMDb rating categories across six film genres, with each genre’s stacked bar summing to 100% to reveal how ratings differ by type. The visualization uses d3.v7’s `d3.stack()` and `d3.scaleOrdinal()` for the stacked segments, plus `d3.scaleLinear()`, `d3.scaleBand()`, and D3 axes for positioning. SVG rendering is employed, with mouseover events showing precise percentages via a tooltip. The data comes from the visible CSV file, and colors map to five rating ranges from below 5.0 to above 8.5.

Loading thumbnail…

Fork of Activity6_task 2- Q1

This example shows smartphone usage percentages across five age groups as a horizontal stacked bar chart, with four activity categories (Social Media, Gaming, Productivity, Communication) distinguished by color. The visualization uses d3.stack() to compute layered series from CSV data, then binds rectangles to each layer using data joins. A d3.scaleBand positions age groups on the y-axis, while a d3.scaleLinear maps percentages to x-axis positions. The chart includes axes with percentage tick formatting and a custom SVG legend built from the same ordinal color scale, rendered entirely as SVG elements.

Loading thumbnail…

Activity6_Question 1-2

This horizontal bar chart displays the top 20 countries by their 2010 population, sourced from a CSV file fetched via d3.csv. The React visualization uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the population scale, rendering SVG rectangles with hover tooltips. Axes are built with custom React components, and the x-axis formats tick labels using d3.format to abbreviate large numbers into billions.

Loading thumbnail…

Activity_Question 1->2

This example shows a bar chart of population data for the top 20 countries, comparing values from the year 2010. The chart uses a light green color for the bars and features red tick marks on the axes, with a custom Poppins font applied throughout. Built with React and D3 v5, the visualization pulls data from a CSV file hosted on GitHub, parsing and multiplying population values by 1000 for display. The axes are constructed using reusable components that generate tick lines and labels, while the `useData` hook handles asynchronous data loading via D3's `csv` function.

Loading thumbnail…

Activity6_ Question 1

This example displays a horizontal bar chart of the ten most populous countries in the year 2000, using a dataset loaded from a GitHub-hosted CSV file. The visualization encodes population values as bar lengths and country names on the y-axis, with an SVG rendering in React. The code uses D3’s `scaleLinear` and `scaleBand` to map data to coordinates, and the `format` function to abbreviate tick labels (e.g., \"1.2B\"). Hovering over a bar reveals its exact population via an SVG `<title>` tooltip.

Loading thumbnail…

Activity6_ Task 1

This example shows a horizontal bar chart ranking population figures for the top 30 countries in 2020, using React with SVG rendering. The visualization builds scales with d3.scaleBand and d3.scaleLinear, formats tick labels with d3.format, and reads CSV data from a GitHub repository via d3.csv. Blue bars represent each country, with axis components rendering ticks and labels, while hover tooltips display formatted population values.

Loading thumbnail…

Fork of Activity6_ Task 1

This fork of Activity6 Task 1 presents a horizontal bar chart visualizing the 2010 populations of the top 10 countries, ranked using a `d3.scaleBand` on the y-axis and a linear scale (`d3.scaleLinear`) on the x-axis. Built with React and D3 v5, the chart renders as an SVG, with bar widths representing population values. Data is loaded from a remote CSV file via `d3.csv`. The axes are composed manually: the bottom axis uses `d3.format` to abbreviate large numbers, while the y-axis displays country labels from the scale's domain.

Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the populations of 30 countries in 2020, ranked from largest to smallest on the y-axis. It uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping the categorical and quantitative variables, and axes generated by the custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV via `d3.csv`, with population values formatted in billions using `d3.format`.

Loading thumbnail…

Activity6_Task2

This example displays a simple welcome message, “Hello VizHub!”, using D3.js v6. The visualization renders the text in a large, centered font via a CSS style. The code imports the `select` function from D3 and an ES6 module that exports the message string. It then uses `select('#message').text(message)` to update the DOM element’s content, demonstrating basic D3 selection and data binding without any dynamic data or rendering.

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart visualizes the populations of the top ten most populous countries using D3 v5, with data loaded from a local CSV file. It renders as an SVG, using the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to construct the plot. The chart displays a title, an x-axis labeled "Population" with tick formatting that abbreviates large numbers (e.g., converting G to B), and steelblue bars representing each country's population, where values are multiplied by 1000 from the source data.

Loading thumbnail…

Question 3- reflections of 6 buddha

Six semi-transparent Buddha silhouettes overlap in a kaleidoscopic SVG composition, each one a repetition of the same intricate path geometry with mirrored reflections. The visualization renders in React using ReactDOM, mapping over an array to generate the layered SVG paths against a floral background image, with each Buddha transformed by scale and translation commands. The code sets a 960×1000 viewport and uses JavaScript’s `Math.random()` for color variation, though the paths themselves are static path data strings. The effect creates a tile-like, ornamental pattern from a single vector source.

Loading thumbnail…

Fork of 5 Buddhas

A dense field of small, randomly rotated and colored polygons renders as a chaotic, star-like scatter across a black background. The visualization uses a nested triple `Array.map` over a numeric array to generate hundreds of SVG `<polygon>` elements, each positioned and colored with repeated calls to `Math.random()`. Built with React, the SVG output is produced directly in JSX, with transforms applied via the `rotate` attribute. The code also defines a large Buddha-shaped path, though it is not rendered in the displayed output.