P

PavanKumarRacharla@my.unt.edu

@PavanKumarRacharla·18 public vizzes

Loading thumbnail…

Assignment2-Question2

This visualization displays the changing price of mobile devices from 2005 to 2017 using an area chart. The chart employs a gold line with a pink fill to represent cost trends over time, with a time-scaled x-axis and linear y-axis. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line`/`area` generators with `curveBasis` smoothness. Data is loaded from a CSV file via `d3.csv` and parsed with `timeParse` for date formatting before rendering to SVG.

Loading thumbnail…

Assignment1-question1

This visualization presents the distribution of genres as a pie chart, using data loaded from a CSV file. The chart displays each genre as a colored slice with corresponding values, and includes a legend and value labels. Built with D3.js v7, it uses `d3.select`, `d3.scaleOrdinal`, `d3.pie`, and `d3.arc` to construct the SVG. The code defines a reusable pie chart function and imports the data via `d3.csv`.

Loading thumbnail…

Activity6_Question4

A bubble chart explores the relationship between population, area, and temperature across Indian cities, with circle size encoding temperature and color distinguishing cities. The visualization uses D3 v7 to load CSV data, render SVG circles, and provide interactive tooltips on hover. It includes linear scales for axes and bubble size, a color scale using interpolateTurbo, and custom legend elements for both temperature values and city names.

Loading thumbnail…

Activity6_Question2

This visualization displays the distribution of ice cream ratings across six categories, from "Below 4" to "Above 8," using a horizontal stacked bar chart. Each bar represents a flavor (Vanilla, Butterscotch, Chocolate, Strawberry, Butterpecan, Cookies n Cream), with segments colored by rating category and lengths proportional to the percentage of ratings received. The chart is built with D3 v7, using `d3.stack()` to create stacked data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the categorical y-axis. Mouseover interactions reveal exact percentages via a tooltip, while a legend on the right identifies each rating segment.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size) for 31 car makes. Each circle is colored by make using a categorical color scale derived from `d3.interpolateTurbo`. Built with D3 v7, the SVG chart includes hover tooltips showing the make, plus a size legend for MPG values. Data is loaded from a local CSV file using `d3.csv`, with axes, labels, and legends rendered via D3's SVG API.

Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the Arctic Puffin dataset, showing the relationship between bill length and bill depth, with each data point colored by species (lightgreen, gold, or red). The visualization uses D3 v6 to load CSV data from a GitHub gist and render SVG circles, with axes labeled for both measurements. The code employs D3's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to parse data, set scales, and generate the plot within a full-screen viewport.

Loading thumbnail…

Activity6_Task3

This example displays a scatter plot of the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using light blue, light green, and orange. The visualization uses D3 v6, loading data via `d3.csv` from a GitHub Gist, and renders SVG circles with `d3.scaleLinear` for axes and `d3.axisLeft` and `d3.axisBottom` for labeled axes. The code also applies non-standard `rx` and `ry` attributes to circles, though they do not affect the round markers.

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, encoding sepal length on the x-axis and petal length on the y-axis. It maps the categorical species attribute to different point shapes using a custom legend. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and a shared `axes` and `shapeLegend` module. It renders vector shapes (paths) via a `symbol` generator, with axes and labels positioned programmatically. Data is fetched as CSV and parsed with `csvParse`.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, above 8.5) across six movie genres, with each genre’s bar segmented to reveal the proportion of ratings in each category. Hovering over a segment displays the exact percentage for that rating band within the genre, with all segments summing to 100%. The visualization uses D3 v7’s `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` methods to map data from `data.csv` to SVG rectangles, and tooltips are implemented via DOM event handlers. The color scheme distinguishes rating categories, and the chart is rendered entirely in SVG with axes labeled for percentage.

Loading thumbnail…

Activity6_question1.1

A horizontal bar chart displays the population of ten countries for the year 2000, ranked by country, with each bar's length proportional to population. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map countries and population values to SVG coordinates. Data is loaded from a CSV via `d3.csv` and filtered to the first ten rows. Native SVG `<title>` elements provide tooltips, while axes are rendered through custom React components that generate ticks and labels.

Loading thumbnail…

Activity6_Question1.2

This bar chart displays the population of 20 countries in 2010, using horizontal bars ordered by country name. React components render SVG elements, while D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format('.2s')`) handle the visualization logic. The data is loaded from a CSV file via `csv` and sliced to the top 20 entries. Axes are custom-built with React, and each bar includes a native SVG `<title>` element for tooltips.

Loading thumbnail…

Actvity6_question1.1

This interactive bar chart displays the top 10 countries by population for the year 2000, using data from a CSV file fetched via D3's `csv` function. Built with React and D3 v5, the visualization renders SVG rectangles whose lengths correspond to population values, with axes generated by custom modules. The chart labels each bar with its population in billions, formatted using D3's `format` function, and includes tooltips showing the precise value via SVG `<title>` elements.

Loading thumbnail…

ACTIVITY 6_Task 1

This horizontal bar chart displays the top 30 countries by population in 2020, ranked along the y-axis with bar lengths representing the population values. The visualization is built with D3 v5 and React, using SVG rendering. The `scaleBand` and `scaleLinear` functions map the categorical country names and numeric population values, while custom `AxisBottom`, `AxisLeft`, and `Marks` components handle ticks and rectangular bars. Data is loaded asynchronously from a remote CSV file via D3’s `csv` function, with population values formatted using the `format` utility.

Loading thumbnail…

ACTIVITY 6_Task 1

This example demonstrates how to import and use D3.js v5 alongside local ES6 modules within a VizHub project. It loads D3 from a CDN via UNPKG and uses the `select` API to target a DOM element, setting its text content to a custom message defined in a separate module. The page displays a large, centered greeting by applying CSS styling to the message div. The visualization serves as a minimal template for integrating external libraries and modular JavaScript code.

Loading thumbnail…

Fork of 6 Buddha

The visualization renders a large Buddhist figure through an SVG path, overlaid with hundreds of randomly positioned and colored dots generated via nested React map functions using `Math.random()`. Built with React and ReactDOM, the SVG canvas incorporates a flower background image from an external URL, with the Buddha path drawn using complex SVG path data and transformed with scale and translation. The composition combines deterministic sacred geometry with stochastic generative elements, creating an overlapping, colorful aesthetic.

Loading thumbnail…

Fork of Fork of Fork of 6 Buddha

A colorful SVG visualization layers 31 randomly positioned translucent rectangles over a large, hand-drawn Buddha path rendered in React. The background uses a flower image via CSS. The code generates the rectangles through nested `A.map` calls with random `x`, `y`, and `rgb()` fill values, while the Buddha is drawn as an `<svg>` `<path>` transformed with `translate` and `scale`. React 16.10 and ReactDOM render the entire composition.

Loading thumbnail…

Fork of 6 buddha

This visualization renders an ornate, Buddha-shaped path in bright, randomized colors against a black background. The code uses React and ReactDOM to generate an SVG canvas, layering the central path with hundreds of semi-transparent, randomly positioned and colored circular elements, created through nested array maps. A fixed geometric path defines the Buddha’s silhouette, while the stochastic placement of the circles creates a dynamic, overlapping pattern. The rendering relies on explicit SVG elements and React’s JSX syntax, with no external data source shown.

Loading thumbnail…

5 Buddhas

Concentric clusters of small SVG polygons radiate across a black background, with five overlapping Buddha path outlines embedded within the chaotic field. The visualization uses React to render these geometric shapes, randomly positioned and colored via the `Math.random` method, while the Buddha figures are drawn using complex SVG path data. The code imports React and ReactDOM, and the entire composition is generated within a single SVG element using nested array mappings.