Skip to main content
Log in
S

SaiKiranReddyKancharla@my.unt.edu

@SaiKiranReddyK28·18 public vizzes

Loading thumbnail…

Assignment2-Question2

This example shows a smoothed area chart of car sales from 2013 to 2023, with a line overlay and green fill beneath the curve. It uses d3.csv to load the dataset, then d3.scaleTime and d3.scaleLinear to map years and totalsales to SVG coordinates. The chart renders axis labels, grid lines via d3.axisLeft and d3.axisBottom, and generates the path with d3.line and d3.area, both using curveBasis for smoothing. Data parsing converts the years column to JavaScript Date objects and sales to numbers.

Apr 13, 2024
Loading thumbnail…

Assignment2-Question1

This example presents a pie chart visualizing sales distribution by item category, with each slice labeled by category and total sales amount. The chart is rendered as an SVG within an HTML page. It loads data from a remote CSV file and aggregates it using `d3.rollups` and `d3.sum`. The visualization is built with D3 v6, using `d3.pie` for the arc geometry, `d3.arc` for paths and label positioning, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. A legend and title/subtitle are also included.

Apr 13, 2024
Loading thumbnail…

Sai_Kiran_Reddy_K_Assignment_2

An animated scatter plot of the Iris dataset cycles through four floral measurements on the x-axis while plotting sepal length on the y-axis. Circles are colored by species (setosa, versicolor, virginica) with a legend. The D3.js code loads data via `d3.csv`, builds axes with `d3.axisLeft` and `d3.axisBottom`, and scales positions using `d3.scaleLinear`. It uses `setInterval` to rotate the x-axis variable every few seconds, updating the SVG rendering. The visualization is rendered as an SVG with custom styling, including a title and axis labels.

Apr 12, 2024
Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart of population figures for 30 countries in 2020, with axes and tick labels rendered in SVG via React components. It loads data from a remote CSV using D3’s `csv` function, scales the bars with `scaleBand` and `scaleLinear`, and formats tick values with `format('.2s')`. The bars use D3’s `max` for domain calculation and include tooltips via SVG `title` elements. The chart is styled with green marks and blue axis lines.

Apr 6, 2024
Loading thumbnail…

Fork of Fork of Sai Buddha 5

A generative Buddha silhouette is drawn from a hand-coded SVG path, layered with thousands of semi-transparent randomly colored circles produced by nested React `map` iterations. The visualization uses React 16.10 and renders to SVG, with the background set to a floral image via CSS. Each circle’s position, size, and RGB fill are randomized on every render, creating an overlapping, kaleidoscopic effect over the static Buddha shape. The code directly maps over arrays to generate the circles without external data or simulation libraries.

Apr 4, 2024
Loading thumbnail…

Sai Buddha

A dense cloud of brightly colored, rotated polygons overlaps with a detailed line-art Buddha face rendered as an SVG path. The polygons are generated in a three-level nested loop, with random coordinates, fill colors, and rotation transforms applied to each shape. The visualization is built with React, rendering to SVG within a black-background container, and uses a fixed dataset of coordinates to draw the Buddha figure.

Apr 4, 2024
Loading thumbnail…

Sai Buddha of 5

The visualization depicts a dense, overlapping field of 4,913 rotated diamond-shaped polygons, rendered in vivid random colors against a black background, alongside a large white Buddha silhouette drawn as a single SVG path. The polygons are generated through triple-nested array mappings in React, with each point’s coordinates, fill, and rotation determined by repeated calls to `Math.random()`. The Buddha path is embedded via an SVG `<path>` element and scaled and translated into place using a `<g>` transform. The example uses React 16.10 and renders entirely through SVG, combining generative randomness with a structured iconographic form.

Apr 4, 2024
Loading thumbnail…

Activity6_Question4

This bubble chart displays the correlation between vehicle weight, height, and length, using the x-axis for weight, y-axis for height, and bubble radius for length, with color differentiating car models. Built with D3 v7, it reads data from a local CSV and renders as an SVG. The visualization includes interactive tooltips triggered by mouseover events, and dual legends for bubble size and color, using scales like `d3.scaleLinear` and `d3.scaleOrdinal`.

Apr 4, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s size encoding fuel efficiency and color distinguishing brands. The visualization uses D3 v7 with SVG rendering, reading data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and interactive tooltips triggered by mouseover events. Hovering highlights individual makes while a legend explains bubble scaling.

Apr 4, 2024
Loading thumbnail…

Activity6_Question3

A scatter plot maps flipper length against body mass for three penguin species, with each species assigned a distinct color. The visualization loads a CSV file from a GitHub gist and uses D3 v5 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. Circle shapes are rendered in an SVG canvas, and the code also includes custom axis label formatting and a title.

Apr 4, 2024
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot visualizing the Iris dataset, where sepal length is mapped to the x-axis and petal length to the y-axis. The chart uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol` with `symbolsFill` to render distinct shapes for each iris species, with a custom shape legend. Data is loaded as CSV and parsed with `csvParse` from a remote gist. The implementation is modular, with separate functions for drawing axes, the scatter plot, and the legend.

Apr 4, 2024
Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, and virginica). The visualization uses D3 v6, loading data via `d3.csv` from a GitHub Gist and rendering with SVG. The chart employs `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for tick marks, with circle marks sized uniformly and colored via a custom switch function.

Apr 4, 2024
Loading thumbnail…

Activity6-Question2

This visualization shows quarterly sales data for product categories using a stacked horizontal bar chart. Each bar segment represents a quarter’s sales contribution, with an interactive tooltip displaying the specific category and sales amount on mouseover. The example demonstrates D3 v7’s `d3.stack` for data shaping, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for rendering. Data comes from an inline CSV file loaded via `d3.csv`, and the chart is rendered as SVG with a custom legend.

Apr 4, 2024
Loading thumbnail…

Activity6-Task2

A stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar segment representing a rating range from "below 5.0" to "above 8.5". The visualization reads data from a CSV file using d3.csv and renders SVG rectangles via d3.stack, d3.scaleBand for genres, and d3.scaleLinear for percentages. Interactive tooltips, implemented with d3.select and mouse event handlers, display exact percentages on hover.

Apr 4, 2024
Loading thumbnail…

Activity-6-Task1.2

A horizontal bar chart displays the 20 most populous countries in 2010, with country names on the y-axis and population values on the x-axis. The React app loads CSV data via `d3.csv` using a custom `useData` hook, then renders SVG rectangles with D3 `scaleBand` and `scaleLinear` scales. D3 axes and tick formatting with `d3.format` label the chart, and native SVG `<title>` elements provide tooltips on hover.

Apr 4, 2024
Loading thumbnail…

Activity-6-Task1.1

This example shows a horizontal bar chart ranking the population of ten countries in the year 2000, with the chart reading from top to bottom and using SVG rendering within a React application. Population values are displayed along the x-axis using a `scaleLinear` with d3 formatting to abbreviate large numbers, while country names are plotted on the y-axis via a `scaleBand`. The chart is built by composing local React components, `AxisBottom`, `AxisLeft`, and `Marks`, and it loads data from a CSV file using `d3.csv` in a custom `useData` hook. Axis ticks are styled blue, and the bars appear in light green.

Apr 4, 2024
Loading thumbnail…

Activity-6-Task1.1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, with a title on the x-axis. The bars are rendered as SVG rectangles using React components and D3’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is loaded from a remote CSV file via `d3.csv`, formatted with `format('.2s')`, and the chart includes native SVG tooltips. Axis labels and tick styling are customized through React components like `AxisBottom` and `AxisLeft`.

Apr 4, 2024
Loading thumbnail…

Activity6_Task1

This bar chart displays the top 30 countries by 2020 population, using horizontal bars ordered by country name. The visualization loads data from a CSV file via `d3.csv`, scales it with `scaleBand` and `scaleLinear`, and renders SVG rectangles through React components. D3’s `format` function converts population values to abbreviated labels like “1.2B”. Axes are built with custom `AxisBottom` and `AxisLeft` components that use D3’s tick methods, while a native SVG `<title>` element provides hover tooltips.

Apr 4, 2024