Preethi Medepalli-91

@PreethiMedepalli·22 public vizzes

Project ANalysis

This bar chart visualizes the average pollutant value for each country from a CSV dataset of world air quality. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is aggregated using `d3.rollup` with `d3.mean` to compute country-level averages. Bars change color from steelblue to orange on mouseover, providing interactive feedback to the viewer.

Dec 4, 2024

Loading thumbnail…

Project most affected country

This bar chart shows the top 10 countries with the most pollution occurrences, ranked from highest to lowest count, with each bar labeled with its exact value. Built with D3 v6 and PapaParse, it loads a GitHub-hosted CSV of world air quality data, filters rows for valid country and value fields, and counts occurrences via `d3.rollup`. The x-axis uses `d3.scaleBand` with rotated labels for readability, while `d3.scaleLinear` handles the count axis. The SVG renders steel-blue bars that turn orange on hover, with clear axis labels for intuitive interpretation.

Dec 4, 2024

Loading thumbnail…

Project POLLUTANTS

This bar chart visualizes the count of each pollutant type in an air quality dataset, highlighting the distribution of pollutants across the records. The chart uses D3.js v6 to load a GitHub-hosted CSV file via `d3.csv`, process the data with array reductions, and render an SVG bar chart with `scaleBand` and `scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with bars colored steelblue that turn orange on hover. The data source is a CSV file fetched directly from a GitHub repository.

Dec 4, 2024

Loading thumbnail…

Pollutant count Project

This bar chart displays the top ten pollutants with the highest frequency in a global air quality dataset, ranked by their average count. The visualization uses a D3.js v6 SVG bar chart, where each bar represents a pollutant type and its corresponding frequency, with hover effects for interactivity. The data is fetched from a GitHub-hosted CSV file and parsed client-side using PapaParse. Axes are clearly labeled, and the chart is styled for readability, making it straightforward to compare pollutant prevalence at a glance.

Dec 4, 2024

Loading thumbnail…

Project

This visualization displays a bar chart of the top 10 pollutants ranked by their average measured value, with green bars that lighten on hover for easy comparison. It loads a CSV file from GitHub using the PapaParse library to parse the data, then processes it in JavaScript to calculate averages per pollutant. The chart is rendered as an SVG using D3 v6, employing `d3.scaleBand` and `d3.scaleLinear` for the axes, with clearly labeled tick marks and axis titles for readability.

Dec 4, 2024

Loading thumbnail…

Activity6_question3

This scatter plot visualizes the cities dataset, showing each city as a circle positioned by its area (x-axis) and population (y-axis), with colors indicating the region. It uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from a GitHub CSV URL and render an SVG chart. The code sets fixed dimensions, applies margins, and uses a switch statement to assign distinct colors to North America, South America, Europe, Asia, and Africa, while smaller tick labels improve readability.

Oct 22, 2024

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes the relationship between movie budget, box office revenue, and audience rating for 13 films. Each bubble’s x-axis position encodes budget, y-axis position encodes box office earnings, and bubble radius encodes rating, with movie name labels and a color-coded legend. The visualization uses D3.js v7 with SVG rendering and animation, reading data from a local CSV file. Tooltips provide detailed information on hover, and the code utilizes `d3.axisBottom`, `d3.axisLeft`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and colors.

Oct 22, 2024

Loading thumbnail…

Activity6_Task4

This visualization shows the correlation between average horsepower, torque, and highway MPG for 31 car makes, with bubble size encoding MPG and color distinguishing each make. The chart uses d3.csv to load data, d3.scaleLinear for the x, y, and bubble-size scales, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend displays size values and color-coded makes.

Oct 22, 2024

Loading thumbnail…

Activity6_task3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length for each flower specimen. The visualization uses symbols to differentiate species, with a shape legend identifying each category. Built with D3 v7, the example demonstrates ES6 module imports, including `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and `axisLeft` and `axisBottom` for chart scaffolding. The data is fetched from a remote CSV source and parsed client-side before rendering.

Oct 22, 2024

Loading thumbnail…

Activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal length and width as the primary axes while encoding sepal dimensions through each circle’s horizontal and vertical radii. Three species—setosa, versicolor, and virginica—are distinguished by colored circles (skyblue, lightgreen, and orange). The visualization loads CSV data via `d3.csv` from a GitHub raw URL, parses numeric fields, and renders SVG circles using `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`. It demonstrates D3 v6 module imports, dynamic window sizing, and direct SVG manipulation with `selection.join`.

Oct 22, 2024

Loading thumbnail…

Activity6_Question2

This example shows the revenue distribution of electric vehicle manufacturers from 2018 to 2021 using a stacked bar chart. The chart uses D3 v7 to load data from a CSV file and render SVG elements, with `d3.stack()` to create stacked series and `d3.scaleOrdinal()` for color mapping. Revenue values are displayed along a linear scale, while manufacturers are positioned on a band scale. The visualization includes axes, bold labels, and a legend to distinguish the four years.

Oct 22, 2024

Loading thumbnail…

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. It loads data from a CSV file and uses d3.stack to create the stacked segments, with d3.scaleOrdinal assigning colors to rating categories. The chart includes axes, a title, and interactive tooltips that display the exact percentage for each rating band on mouseover, using d3.axisBottom and d3.scaleBand for layout.

Oct 22, 2024

Loading thumbnail…

Activity6_Question1.2

This example shows a horizontal bar chart of population figures for the top 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The chart uses React with D3 v5 scales and axes, loading data from a remote CSV file via `d3.csv`. Bars are rendered as SVG `rect` elements with a tooltip that formats values using `d3.format`, and the visualization includes custom axis components built with `scaleBand` and `scaleLinear`.

Oct 22, 2024

Loading thumbnail…

Activity6_Question1.1

This example displays a horizontal bar chart comparing population figures for the top ten countries from a remote CSV file. The visualization uses D3’s scaleBand for the categorical y-axis and scaleLinear for the continuous x-axis, with bars rendered as SVG rectangles. Country names appear on the left axis, while population values are formatted using D3’s format function to abbreviate large numbers. The chart is built within a React component, pulling data asynchronously via d3.csv, and includes interactive tooltips showing the precise formatted population value for each bar.

Oct 22, 2024

Loading thumbnail…

Fork of Activity6_Task1

A horizontal bar chart displays the 2020 population for the top 30 countries, using green bars with blue axis ticks. The chart is built with React and D3 v5, where d3.scaleBand maps country names to the y-axis and d3.scaleLinear maps population values to the x-axis, with a custom tick formatter converting large numbers to billions. Data is loaded from a remote CSV via d3.csv, and tooltips show each bar's exact population value when hovered.

Oct 22, 2024

Loading thumbnail…

Activity6_Task1

This example demonstrates a minimal Hello VizHub setup, showing how a D3.js selection can update the text content of an HTML element. It imports the `select` function from D3 v5 and a local ES6 module, `myMessage.js`, to supply the string "Hello VizHub!" which is then rendered into the `#message` div via `select('#message').text(message)`. The page loads D3 from a CDN and uses plain CSS for centered, large-font styling, illustrating basic module imports and DOM manipulation in a VizHub project.

Oct 22, 2024

Loading thumbnail…

Fork of Hello VizHub_Preethi

This example demonstrates a minimal VizHub project that loads D3 via UNPKG and uses the `select` API from D3 v5 to set the text of an HTML div. It also shows local ES6 module imports with a `message` constant, and includes a CSS file for styling. The visible output is a static "Hello VizHub!" message centered on the page.

Oct 22, 2024

Loading thumbnail…

six reflection buddha

A decorative React gallery displays six Buddha images in a 2x3 grid over a background photograph of flowers. Each image is rendered as an SVG path with a white border and shadow, and scales up smoothly on hover via a CSS transition. The layout uses a CSS grid with fixed image dimensions, while the SVG paths define the Buddha silhouettes with intricate bezier curves. React and ReactDOM handle the dynamic generation of decorative circles, which are placed at random positions with varying opacity and color values.

Oct 19, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense, colorful field of hundreds of small, randomly placed and rotated polygons (diamonds) fills the screen, rendered over a black background. The polygons use bright, saturated fill colors and are generated from a simple nested array map in React. The visualization also overlays a large, distinct SVG path depicting a seated Buddha figure, drawn in a contrasting single color, creating a layered, chaotic composition. The code uses React and ReactDOM to render SVG elements directly in the browser.

Oct 13, 2024

Loading thumbnail…

5 BUDDHAS

Five overlapping Buddha silhouettes fill the black canvas in a colorful, geometric composition. Rather than a literal portrait, this visualization uses abstract, rotating polygon shapes to build the iconic figure. The code generates a dense grid of these polygons using React and renders them as SVG `polygon` elements. Each shape is given a random position, color, and rotation through the `Math.random()` function, with the SVG `transform` attribute applying the rotation. The structure relies on nested array maps to create the layered, repetitive effect.

Oct 13, 2024

Loading thumbnail…

5 Buddhas

A dense field of small, randomly rotated polygons forms a shimmering, chaotic backdrop behind a single large, ornate Buddha silhouette rendered in vivid color. The composition layers five repeated Buddha shapes, each translated and scaled, creating a sense of depth and multiplicity. Built with React and rendered as SVG, the visualization uses nested array maps to generate hundreds of polygons with random positions, colors, and rotation transforms. The main Buddha figure is a detailed SVG path drawn from a predefined coordinate set, while the background polygons are procedurally generated using JavaScript's `Math.random()`.

Oct 13, 2024

Loading thumbnail…

5 buddhas

Five overlapping Buddha silhouettes are arranged across a green background, each rendered as a detailed SVG path filled with vibrant, randomized colors. The visualization generates chaotic, semi-transparent diamond polygons on top of the Buddha figures, creating a dense, layered collage effect. Built with React and rendered through SVG, the code uses nested `Array.map` functions to produce random coordinates, fill values, and rotations for each polygon. The Buddhas are positioned using SVG `transform` translations and scaling, with the entire composition drawn dynamically at runtime.

Oct 13, 2024