anisha.peddireddy@gmail.com

@reddyanisha9·19 public vizzes

Activity 7 Q2

This area chart visualizes monthly website visitor counts using a time-series line that fills the space beneath it in steel blue. The SVG visualization is built with D3 v7, loading CSV data from a GitHub raw dataset. It employs `d3.scaleTime` for the date axis and `d3.scaleLinear` for the visitor count, while `d3.area` generates the filled path. Axis labels and a descriptive title are included for clarity.

Apr 7, 2025

Loading thumbnail…

Activity 7 Q1

This pie chart visualizes spending categories by percentage, with each slice colored via a categorical color scale and labeled through an interactive legend. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to compute and render the arcs, while `d3.csv` loads the dataset from a GitHub repository. SVG rendering displays the chart, with legend items and axis labels positioned manually. The color scale employs `d3.scaleOrdinal` with `d3.schemeSet2`, and slice strokes are styled white for separation, though axis labels are placeholders rather than computed scales.

Apr 7, 2025

Loading thumbnail…

Activity 7 tutorial

This animated scatter plot explores the classic Iris dataset, cycling through four different feature pairings on the x-axis while y-axis remains sepal length. Built with D3.js 6.7.0, it demonstrates a reusable scatter plot module using scaleLinear, axisLeft, and axisBottom APIs. The visualization shows species-colored points (setosa, versicolor, virginica) with a static legend, and dynamically updates axes and labels via setInterval. The rendering uses SVG with custom styling, including italic axis labels and a bold title overlay.

Apr 7, 2025

Loading thumbnail…

Activity 6 Question 4

A bubble chart of student scores maps math and reading performance for ten students, with circles sized by weekly study hours. The visualization encodes each student’s test results as x- and y-coordinates, while a square-root scale sets bubble radius to reflect study time, enabling quick comparison of academic achievement and effort. Built with D3 v7, the chart uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.axisBottom` and `d3.axisLeft` to render scales. Interactive hover tooltips, implemented with D3 event listeners and a styled HTML division, display each student’s name, scores, and study hours. Data comes from the included CSV file, and the SVG rendering includes explicit margin and transform logic.

Mar 31, 2025

Loading thumbnail…

Activity 6 Task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower (x-axis) and torque (y-axis), while its radius encodes highway MPG, and color identifies the manufacturer. The visualization uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal for color, and SVG circles with mouseover tooltips. It includes a legend for MPG circle sizes and a color-coded make legend. Data loads from a CSV via d3.csv.

Mar 31, 2025

Loading thumbnail…

Activity 6 Question 3

A scatter plot displays the relationship between Math and English scores for students, with each circle colored by gender (steelblue for male, deeppink for female). The visualization uses D3 v7's `scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.scaleOrdinal` for color mapping. It renders as an SVG with a legend, axis labels, and a title, loading data from a remote CSV file via `d3.csv`.

Mar 31, 2025

Loading thumbnail…

Activity 6 Task 3.2

This interactive scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers, with the species of each flower encoded by the shape of the point marker. The visualization uses D3 v7 to create a custom scatter plot, leveraging `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and the `symbol` API to generate distinct shapes for each species. A custom legend, built with `join` operations, displays the shape-to-species mapping. The data is loaded asynchronously from a CSV file using `csvParse` and fetched from a GitHub repository, with the plot updating once the data is ready.

Mar 31, 2025

Loading thumbnail…

Activity 6 Task 3.1

This scatter plot visualizes the Iris dataset by mapping petal length and width, with points colored by species (setosa, versicolor, and virginica) via a custom marker function. The SVG rendering uses d3.v6's scaleLinear, axisLeft, and axisBottom to position axes, while circles are appended and joined to data. The dataset loads from a raw GitHub CSV, and axis labels appear rotated for petal length and horizontally for sepal length, though size attributes like rx and ry do not visibly affect the circles.

Mar 31, 2025

Loading thumbnail…

Activity 6 Question 2

This example shows stacked bar charts of sales in dollars across three product categories—Electronics, Furniture, and Clothing—for the years 2018 through 2020. It uses D3 v7 with the `d3.stack` API to layer the series, `d3.scaleBand` for the yearly bars, and `d3.scaleLinear` for the y-axis. Hovering reveals a tooltip with the category and exact value, while a legend identifies each color from `d3.schemeCategory10`, as loaded from a local CSV file.

Mar 31, 2025

Loading thumbnail…

Activity 6 Task 2

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” Percentages are shown on a linear x-axis, while genres appear on a band scale y-axis. The visualization uses d3.v7 with SVG rendering, building the stacks via `d3.stack()` and mapping colors with `d3.scaleOrdinal()`. Interactive tooltips display exact percentages on mouseover, using D3 event handlers. Data comes from the provided CSV file.

Mar 31, 2025

Loading thumbnail…

Activity 6 Question 1.2

This visualization displays a horizontal bar chart comparing population figures for 20 countries in 2010, ordered along a categorical y-axis with a linear x-axis for population values. Built with React and D3.v5, it uses `scaleBand` and `scaleLinear` to map the data, with SVG rendered through custom `AxisBottom`, `AxisLeft`, and `Marks` components. The population data is loaded via `d3.csv` from a GitHub-hosted CSV file, and tooltips show formatted values using `d3.format` with the "B" suffix for billions.

Mar 31, 2025

Loading thumbnail…

Activity 6 Question 1.1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, using a React-based SVG rendering with D3.js v5. The chart displays population values along the x-axis with formatted tick labels (using `d3.format`) and country names on the y-axis using `scaleBand`. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values multiplied by 1000 for display. The visualization includes axis components, light green bars, and tooltips showing formatted values via SVG `<title>` elements.

Mar 31, 2025

Loading thumbnail…

Activity6 Task 1

This horizontal bar chart displays the 30 most populous countries in 2020, with each bar’s length encoding population size. The visualization arranges countries vertically in descending order using a band scale and positions bars with a linear scale. Built with React and D3 v5, it renders SVG elements through reusable components for axes and marks. Population data is loaded from a GitHub-hosted CSV file, with values transformed from thousands to raw numbers. The chart includes formatted tick labels converting gigabytes to billions and styled axis lines and bars.

Mar 31, 2025

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Mar 31, 2025

Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays 2020 population estimates for 30 countries, ranked by country name on the y-axis and population on the x-axis. The visualization uses SVG rendering within a React component, with D3 v5 scale functions (`scaleBand`, `scaleLinear`) for positioning, and custom `AxisBottom` and `AxisLeft` components for ticks. Data loads asynchronously from a CSV file via `d3.csv` and formats axis labels using `d3.format`. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Mar 31, 2025

Loading thumbnail…

fork for fork

This example displays a centered "Hello VizHub!" message in large, bold text, using D3.js version 6. The code imports the `select` function from D3 and applies it to set the text content of a `div` element with the ID `message`. The actual text comes from a separate ES6 module, `myMessage.js`, which exports a string constant. Styling is handled through an external CSS file that centers the text and sets the font size to 12em. The visualization serves as a minimal starter template demonstrating basic D3 DOM manipulation with modular JavaScript structure.

Mar 31, 2025

Loading thumbnail…

5 buddas

Five golden Buddhas emerge from a dark, chaotic field of hundreds of semi-transparent, rotating diamond polygons rendered with React and SVG. Each Buddha is a complex, pre-defined path filled with soft colors, layered diagonally across a black background. The code generates the geometric noise using nested array maps and `Math.random()` calls, while the figures use static `path` data rendered as individual SVG groups.

Mar 12, 2025

Loading thumbnail…

6 buddhas in flower background

Six buddha silhouettes overlap across a flower-background SVG canvas. Each buddha path is rendered with a distinct fill color and white stroke, positioned via different translate and scale transforms. The React app generates the paths from hard-coded SVG path data, while the body’s CSS sets a floral background image. The visualization uses ReactDOM to render the SVG elements, with no external charting library.

Mar 12, 2025

Loading thumbnail…

5 Buddhas

The visualization displays a grid of hundreds of overlapping diamond-shaped polygons, each filled with random colors and rotated 45 degrees, creating a dense, abstract 5 Buddhas motif on a black background. Built with React and rendered as SVG, the code generates nested loops over an array to produce each polygon, using `Math.random()` for both positional offsets and RGB color values. A separate Buddha path is overlaid via an SVG `<path>` element, transformed with a scale and translate operation, while the overall composition is laid out on a fixed 960 by 1000 canvas.

Mar 12, 2025