S

sreejabommineni1506@gmail.com

@SreejaB-code·19 public vizzes

Loading thumbnail…

Activity 6 quiz 9

This bubble chart displays the correlation between volume (ml), calories, and alcohol percentage for various drinks, with each circle’s size and color encoding alcohol content and drink type. Tooltips reveal the drink name on hover. Built with d3.v7, it uses `d3.csv` to load data and `d3.scaleLinear` for axes and bubble sizing, with `d3.scaleOrdinal` and `d3.interpolateTurbo` for coloring. An interactive legend and SVG axes are included, and animations respond to mouse events.

Loading thumbnail…

Activity 6 quiz 6

This scatter plot visualizes phone specifications, showing the relationship between screen size and battery capacity, with each point’s radius scaled by camera megapixels and its color indicating the brand model. Built with D3 v6, it loads CSV data from a GitHub gist, uses `scaleLinear` and `extent` for axes, and renders circles, axes, and labels as SVG. The chart omits a legend but provides axis titles for battery and screen size.

Loading thumbnail…

Activity 6 quiz 2.1

This stacked bar chart visualizes the distribution of food ratings across twenty cuisines, with each bar segment representing the proportion of responses in five categories from "Extremely Low" to "Highest." The visualization uses d3.stack() to transform the CSV data into stacked series, d3.scaleOrdinal for color encoding, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating category using d3.format. The SVG rendering includes custom axes, gridlines, and a legend-style title.

Loading thumbnail…

Activity6_quiz 1.1

This visualization shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000, sorted in descending order to highlight the most populous nations. The chart uses React components with D3 v7 scales—specifically `scaleLinear` for the x-axis and `scaleBand` for the y-axis—to map population values to bar widths and country names to bands. Data is loaded from a CSV file via `d3.csv` with a fallback to inline sample data, and bars are rendered as SVG rectangles with teal fill.

Loading thumbnail…

Activity6_quiz 1.2

A horizontal bar chart ranks the world's top 20 most populous countries by their 2010 population, using a teal fill for each bar. Built with React and D3 v7, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, formatting tick labels as millions. It loads a CSV dataset from a GitHub gist, with fallback sample data if fetching fails, and renders the visualization as an SVG with custom axis components.

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the populations of up to thirty countries, sorted from largest to smallest, with a teal fill for each bar. Built with React and D3 v7, it renders as an SVG, using `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. The data is loaded from a CSV file via `d3.csv`, with a fallback to sample data if the fetch fails. Axis ticks are formatted to display millions (e.g., "1M").

Loading thumbnail…

Activity 7 Area Chart

This area chart visualizes the distribution of employee counts across different job positions, with positions sorted alphabetically along the x-axis and counts on the y-axis. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.rollup` to aggregate the CSV data by position and `d3.area()` with `curveMonotoneX` to draw the filled path. Axis labels are rotated for readability, and the data source is a GitHub gist containing department records.

Loading thumbnail…

Activity7_Piechart

This visualization shows the distribution of employees across departments using a pie chart, with each slice representing a department and sized by its employee count. The chart renders in SVG using d3.pie and d3.arc, while d3.rollup aggregates the CSV data from a GitHub gist to count records per department. A separate legend on the right maps each department to its color from d3.schemeSet3, and tooltips display the department name and count on hover.

Loading thumbnail…

Activity 7 Pie chart

This pie chart visualizes total sales by region, with each slice labeled and a color-coded legend. It loads CSV data from a GitHub repository, aggregates sales per region, and renders an SVG using D3 v6 APIs such as `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau 10 color scheme. The chart fills the browser window and includes hover effects for interactivity.

Loading thumbnail…

Fork of Activity_7

This dynamic scatter plot animates through the Iris flower dataset, cycling the x-axis through four different measurements (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. The visualization uses D3.js (v6) with a reusable `scatterPlot` module that employs `scaleLinear` for axis scaling and `axisBottom`/`axisLeft` for rendering axes. Data is loaded via `d3.csv` from a GitHub gist and rendered as SVG circles colored by species (setosa, versicolor, virginica). The animation uses `setInterval` to update the x-axis mapping every few seconds, with labels and legends redrawn each iteration.

Loading thumbnail…

Reusable Scatter plot Activity 7

This interactive scatter plot animates the classic Iris dataset, cycling through four different measurement pairs on the axes while coloring points by species. Built with D3.js v6, the visualization uses scaleLinear for axes, a reusable scatterPlot function, and setInterval to swap the x-axis variable every few seconds. Species-specific colors and a static legend with labels communicate the categorical grouping. The SVG rendering includes custom styling for titles, axis labels, and legend text, with smooth transitions between attribute combinations.

Loading thumbnail…

IRIS Activity 7

This interactive pie chart visualizes total sales aggregated by region from a remote HR dataset. Built with D3.js, it uses the `pie`, `arc`, and `scaleOrdinal` APIs to render proportional slices with a color scheme from `schemeTableau10`, plus a legend. The visualization is fully responsive, sizing to the browser window via `window.innerWidth` and `window.innerHeight`. Data is fetched as CSV and grouped on the fly using a Map reduce before being passed to the chart. The SVG output includes hover effects on slices for user feedback.

Loading thumbnail…

Activity_7 scatter plot

This scatterplot uses the classic Iris dataset to display the relationship between sepal width and sepal length. It is built with D3.js v7 using an SVG rendering approach, where each flower sample is represented as a small steel-blue circle. The chart implements a reusable `Scatterplot` function that accepts accessor functions and axis labels, allowing for flexible data mapping. Data is loaded via `d3.csv` from a remote gist, and axes are generated using `d3.axisBottom` and `d3.axisLeft` with linear scales.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes vehicle performance by plotting horsepower on the x-axis and torque on the y-axis for 31 car makes, with bubble size encoding highway MPG and color distinguishing each brand from a CSV dataset. The visualization uses D3 v7 to create an SVG with linear scales, ordinal color mapping, and interactive tooltips that appear on mouseover with vehicle details. Hover effects trigger opacity and stroke changes, while separate size and color legends help interpret the third and fourth data dimensions encoded in the circles.

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset by mapping sepal length on the x-axis against petal length on the y-axis for three iris species. Each species is distinguished using a different SVG path symbol—circle, triangle, and square—while all points share a uniform blue fill. The visualization is built with D3 v7, using d3.csv to load the data, d3.scaleLinear for axes, and d3.symbol for shape encoding. A legend explains the shape-to-species mapping, with the data sourced from a GitHub-hosted CSV file.

Loading thumbnail…

Activity6_Task3

This scatter plot shows the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis, with each of the 150 flowers colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal. The visualization uses d3.csv to load remote CSV data, then applies d3.scaleLinear for both axes and renders circles via SVG, with d3.axisBottom and d3.axisLeft generating the labeled axes. A manual legend is appended to the right side, and an alert appears if the data fails to load.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of movie ratings across six genres, breaking down each genre into five rating ranges from below 5.0 to above 8.5. The visualization uses D3 v7 with SVG rendering, loading data from a local CSV file and converting percentage values to numbers. The chart employs `d3.stack()` to create stacked segments, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for percentages, with a color scale distinguishing rating ranges. Interactive features include tooltips on mouseover and a custom modal on click that displays the complete rating breakdown for each genre.

Loading thumbnail…

Bhuddha fork

Five overlapping Buddha silhouettes, each rendered in a different bright color, float over a chaotic field of two hundred randomly generated, semi-transparent polygons. The Buddhas are drawn with SVG `path` data and scaled to different sizes while remaining centered. Built with React, the application uses `polygon` elements with randomized positions and HSL fills to create a colorful backdrop, with the Buddha paths layered on top.

Loading thumbnail…

Buddhas fork

This visualization overlays a large decorative Buddha silhouette atop a black background filled with scattered geometric flower shapes, creating a colorful, layered composition. The code uses React and ReactDOM to render the SVG scene, with the flowers generated through nested array maps and randomized polygon points, colors, and rotations. A linear gradient defines the background, while the Buddha path is rendered directly from SVG path data.