R

Rayabarapu Nikhitha

@nikkiray309·16 public vizzes

Loading thumbnail…

Act7-tutorial

This interactive scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while displaying sepal length on the y-axis. The animation updates every few seconds using `setInterval`, changing the x-axis variable and re-rendering the SVG circles. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` module. Points are colored by species—setosa, versicolor, and virginica—with a custom legend, axis labels, and title rendered as SVG text elements.

Loading thumbnail…

act7-ques2

This example displays an area chart of total insurance charges by age, using data from a CSV file loaded via `d3.csv`. The visualization aggregates charges with `d3.rollups` and `d3.sum`, then renders the result as a smooth area path generated by `d3.area()`, with axes from `d3.axisBottom` and `d3.axisLeft`. The SVG chart includes labeled axes and a title, styled with steelblue strokes and skyblue fills.

Loading thumbnail…

act8-q2

This example visualizes the average insurance charges across different BMI values using an area chart rendered as SVG. The code loads a CSV dataset with D3 v7, converts the charges and BMI columns to numbers, and uses `d3.rollups` to group the data by BMI and calculate the mean charge per group. An area generator (`d3.area`) draws the filled region, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes for BMI and average charges. The chart communicates the general trend between body mass index and insurance costs.

Loading thumbnail…

act7-q1

This example displays a pie chart showing the distribution of insurance records across regions. It loads a CSV file from a GitHub gist and aggregates the data by region using `d3.rollup`. The pie slices are rendered with `d3.pie()` and `d3.arc()` into an SVG, with each slice labeled with its count and colored using `d3.scaleOrdinal` with the `schemeCategory10` palette. A separate legend SVG lists the region names and their corresponding colors.

Loading thumbnail…

act6-tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length against petal width for individual flowers, with points colored by species (setosa, versicolor, or virginica). The example loads CSV data from a GitHub repository and uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG chart. Circle marks are drawn with the `join` pattern, while axis labels are added as text elements, demonstrating a basic data-loading and scatter-plot workflow within a full-page SVG canvas.

Loading thumbnail…

act6-question9

A bubble chart visualizes advertising data, showing TV and Radio budgets on the x- and y-axes while the area of each circle encodes Sales figures. The visualization employs D3 v7 with `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radius, `d3.scaleSequential` with `d3.interpolateBlues` for color encoding, and `d3.axisBottom`/`d3.axisLeft`. Interactive tooltips appear on mouseover, and data loads from a CSV via `d3.csv`. Rendered as SVG with opacity and black stroke styling.

Loading thumbnail…

act6-question6

This scatter plot visualizes the relationship between TV advertising spend and sales for a company, encoding each data point as a colored circle. The chart distinguishes high performers (sales greater than 15) in blue from lower performers in red, with a legend clarifying the color mapping. Built with React and D3 v7, the visualization loads CSV data from a GitHub repository, uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and renders circles via `d3.selectAll` and `.enter()`. Axis labels and a custom legend are added directly to the SVG canvas.

Loading thumbnail…

ACT6-tutorial4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble's size encoding MPG and its color representing the manufacturer. Hovering over a bubble reveals the make name via a tooltip. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes and bubble sizing, and `d3.scaleOrdinal` for color assignment. The SVG rendering includes axis labels, a size legend for MPG, and a color legend for car brands.

Loading thumbnail…

act6-tutorial3.2

This interactive scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flower samples. The D3.js v7 code simultaneously encodes species identity through both color and shape, using a custom shape legend to map each species to its distinct marker. Data is loaded asynchronously from a remote CSV via a fetch request, and the visualization is rendered using a reactive pattern that rebuilds the chart whenever the state updates. The implementation relies on D3's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs, with a shared axes module handling the x and y axis ticks and labels.

Loading thumbnail…

Act6-question3

This stacked bar chart visualizes the breakdown of sales contributions from TV, Radio, and Newspaper advertising across five data points from the provided `data.csv`. It uses D3 v6’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `stack` helper to build a cumulative distribution. The SVG rendering applies an ordinal color scheme, axis callbacks, and a legend, all within a VizHub environment.

Loading thumbnail…

Act6-tutorial2

This stacked bar chart visualizes the distribution of movie ratings across six genres, using horizontal bars to show the percentage of ratings in five categories from "below 5.0" to "above 8.5." The chart loads CSV data, builds the stacked layout with d3.stack(), and scales positions using d3.scaleLinear and d3.scaleBand. Interactive tooltips display exact percentages on mouseover, while an ordinal color scale distinguishes rating categories. The visualization is rendered as SVG using D3 v7, with axis labels and a legend highlighting genre-specific rating patterns.

Loading thumbnail…

ACT6-Question2

This visualization is a horizontal bar chart ranking the 20 most populous countries in 2010, with bars proportional to each country's population. It is built using React and D3.js v5, leveraging `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to display population values in billions. The SVG rendering includes custom axes and hover tooltips via `<title>`, with data loaded from a remote CSV using `d3.csv`.

Loading thumbnail…

ACT6-Question1

This horizontal bar chart displays the top 10 countries by population in the year 2000, with countries listed on the y-axis and their populations (in billions) on the x-axis. It uses React with D3 (v5) for scaling and encoding, rendering as an SVG. The example loads the dataset via `d3.csv` from a GitHub URL, uses `scaleBand` and `scaleLinear` for axes, and creates interactive tooltips with the `<title>` SVG element. Styling is applied via CSS for hover effects and axis aesthetics.

Loading thumbnail…

ACT6-TUTORIAL1

This bar chart displays the population of 30 countries for the year 2020, using horizontal bars ranked by country name. The visualization, built with React and D3 v5, loads CSV data via `d3.csv` and scales the bar lengths with `scaleLinear`, while `scaleBand` positions the categorical y-axis. Custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels, with population values formatted in billions using `d3.format`. Tooltips appear on hover through SVG `<title>` elements, and the chart includes a green bar fill with blue axis lines.

Loading thumbnail…

6 Buddhas - Question3

Six abstract Buddha silhouettes rendered in SVG overlap within a 1000-pixel square, their semi-transparent fills cycling through randomized RGB values against a photographic flower background. The React application maps nested arrays to generate scattered null elements, while each Buddha path is transformed via SVG groups with translations and scales. The code imports React and ReactDOM, using React's declarative syntax to compose the visualization with inline SVG path data and CSS styling for the page frame.

Loading thumbnail…

5 BUDDHAS

Five Buddhas is an SVG visualization composed of five nested, semi-transparent Buddha figures rendered in vibrant, randomized colors over a black background. The piece uses React and ReactDOM to generate the scene, with nested loops creating a dense field of polygons that form a geometric, generative backdrop. The primary Buddha shape is drawn from a detailed SVG path, while the surrounding elements are constructed from randomly positioned and rotated polygon primitives, demonstrating React's ability to create dynamic, algorithmic art.