V

vullihanumantharao@gmail.com

@Sunnyvulli·24 public vizzes

Loading thumbnail…

Assignment2-Area chart

This area chart visualizes the cost of sales from 2000 to 2013, with the x-axis representing time and the y-axis showing the cost value. The chart uses a smooth, curved line to connect data points, and the area beneath the line is filled with a cyan color to emphasize the magnitude of the values over time. The visualization is rendered as an SVG using D3 v5, with axes, labels, and gridlines styled via CSS. Data is loaded from a CSV file, and the chart is constructed using D3's `scaleLinear`, `scaleTime`, `area`, and `line` APIs.

Loading thumbnail…

Assignment2-Pie chart

This pie chart displays the distribution of student counts across different majors at UNT, with each slice labeled with its numeric value and accompanied by a color-coded legend. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute arc geometry and assign categorical colors, while rendering SVG paths and text elements. Data is fetched as CSV from a GitHub gist, and the chart positions its pie at (250,250) with a legend offset to the right, formatting values in thousands (e.g., "5K").

Loading thumbnail…

Assignment-2 Question-1

This example presents a pie chart built with D3.js (v7) that visualizes categorical data by grouping rows from a CSV file by the "make" column. The chart uses `d3.pie` and `d3.arc` to generate the slices, with a color scale from `d3.scaleOrdinal` and `d3.schemeCategory10` to differentiate categories. A legend, constructed with SVG `rect` and `text` elements, maps each color to its category label. The SVG is rendered at 600x600 pixels, and the data is fetched from a remote URL via `d3.csv`.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple, static web page that displays the text "Hello HTML!" centered on a blank canvas. Using a plain HTML `<div>` element, the page applies CSS styling with a `font-size` of 13em and `text-align: center` to achieve a large, visually prominent message. It does not use any data visualization libraries or dynamic rendering; instead, it relies solely on fundamental HTML structure and CSS properties to present its content. The page serves as a minimal template or starting point, showing basic document markup without any interactive or data-driven elements.

Loading thumbnail…

Assignment-2 Task-1

This interactive scatter plot visualizes the Iris dataset, cycling through four different attribute pairs on the x-axis every few seconds while the y-axis remains fixed. Points are colored by species (setosa, versicolor, virginica) with a manually drawn legend. The visualization is built using D3 v6, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function. Animated transitions are driven by `setInterval`, updating the x-axis mapping and re-rendering SVG circles, axes, and text labels dynamically.

Loading thumbnail…

Fork of Activity-6_Question-4

A bubble chart displays furniture items from a CSV file, mapping weight and length to the x- and y-axes, while width controls bubble radius. The chart uses D3.js v7 with SVG for rendering. It includes a legend with hover interaction to highlight individual items, and a tooltip appears on bubble hover. The visualization uses `d3.scaleLinear` for axes and sizing, and `d3.schemeCategory10` for color mapping.

Loading thumbnail…

Fork of Fork of budha

Layer upon layer of the same black geometric path is placed on a green floral background. This React application uses ReactDOM to render an SVG element, constructing a complex, abstract shape through repeated `<path>` elements with hardcoded SVG path data. The paths are transformed and scaled to create a dense, overlapping visual effect, rendering the composition with varying stroke widths and opacity.

Loading thumbnail…

Activity-6_Task-4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car makes, with each circle’s position representing torque and horsepower while its size encodes highway MPG and color distinguishes the manufacturer. The visualization uses d3.csv to load the data, d3.scaleLinear for positioning and bubble sizing, and d3.scaleOrdinal with interpolateTurbo coloring for categorical mapping. Interactive tooltips appear on mouseover, and the chart includes a legend for both MPG values and car makes, with SVG rendering and CSS-based hover effects.

Loading thumbnail…

Activity6_Question-3

A scatter plot displays the Fruits dataset, plotting fruit length on the x-axis against fruit width on the y-axis. Each circle represents a fruit, colored by fruit type (apple, banana, orange, grape). The visualization uses D3 v6 to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles with axes from `axisBottom` and `axisLeft`. Axis labels are added as SVG text elements.

Loading thumbnail…

Activity6_Task-3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded by distinct d3 symbol shapes and a custom legend. The visualization uses d3.csvParse to load the data from a GitHub repository and d3.scaleLinear for the axes. Points are rendered as d3 symbols via symbolGenerator with a fixed size, while the shape legend and axes are built using modular D3 functions that leverage joins and d3.axisBottom/axisLeft.

Loading thumbnail…

Fork of Activity 6 Scatter Plot 3.1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by iris species (setosa, versicolor, or virginica). Using D3 v6, the code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the data source is a remote GitHub-hosted CSV file. The plot also records sepal measurements as additional attributes but does not display them.

Loading thumbnail…

Activity6_Question-2

This example visualizes the distribution of IMDb movie ratings across six music genres using a stacked bar chart. Each bar shows the proportional percentage of ratings falling into five categories, from below 5.0 to above 8.5, with colors distinguishing each rating band. The chart loads data from a local CSV file using d3.csv, employs d3.scaleBand for the genre axis and d3.scaleLinear for the percentage axis, and uses d3.stack to aggregate the rating categories. Interactive tooltips display the exact percentage for each segment on hover, while the SVG rendering includes custom axes and a legend.

Loading thumbnail…

Activity6_Task-2

This stacked bar chart shows the distribution of IMDb rating levels across six movie genres, revealing that documentaries and dramas tend to receive higher ratings while action films skew toward lower scores. Each horizontal bar is segmented into five rating categories using `d3.stack()` and `d3.scaleOrdinal` with a categorical color scale. Mouse hover interactions trigger tooltips displaying exact percentages via `d3.select` and event handlers. The visualization is rendered as SVG using D3 v7, with data loaded from a CSV file and axes formatted using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Question-1B_Activity-6

This bar chart displays the population of 20 countries in 2010, ranked by country name along the vertical axis and scaled by population on the horizontal axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, with SVG `rect` marks and tooltip titles. Data is loaded via `d3.csv` from a GitHub repository, and axes are rendered as custom React components with D3’s `format` for tick labels.

Loading thumbnail…

Question-1A_Activity-6

This horizontal bar chart displays the population of ten countries in the year 2000, sorted by country name along the y-axis and population value along the x-axis. The visualization uses React components to render the SVG, with d3.scaleBand and d3.scaleLinear for positioning, d3.csv for data loading from a remote CSV file, and d3.format for tick labels. Each bar includes a tooltip showing the formatted population value.

Loading thumbnail…

Fork of activity 6_Question 1A

This example shows a horizontal bar chart ranking population figures for ten countries in the year 2000, using a CSV dataset fetched from GitHub. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) to map country names and population values to screen coordinates, while React components (`AxisBottom`, `AxisLeft`, `Marks`) render the SVG axes and bars. Population values are formatted with `format('.2s')` to display compact tick labels like “1.2B,” and native SVG `<title>` elements provide hover tooltips with the same formatted values.

Loading thumbnail…

Fork of Fork of activity 6_Question 1B

This example displays a horizontal bar chart of population data for 20 countries in 2010, using SVG rendering within a React framework. The chart reads a CSV file from a GitHub URL, which is fetched and parsed using D3's `csv` function, then processed with a custom `useData` hook. It builds scales with D3's `scaleBand` and `scaleLinear` functions to position bars and axes, and formats x-axis tick labels using D3's `format` function. User interaction is limited to tooltips showing each bar's value via an SVG `<title>` element.

Loading thumbnail…

Fork of Activity-6_Question-1A

This example demonstrates how to integrate D3 v5 with local ES6 modules in VizHub, displaying a simple text message centered on the page. It loads D3 via a CDN and uses the `select` function from the `d3` namespace to set the text content of a `div` element. The code also imports a string from a local module, `myMessage.js`, and applies text styling through an external CSS file. The visualization showcases basic DOM manipulation, module imports, and CSS integration without any data processing or complex rendering.

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the top 30 countries by 2020 population, with bars extending rightward from a shared baseline. The React application loads CSV data from a GitHub repository using D3’s `csv` function, then renders SVG rectangles positioned by `scaleBand` and `scaleLinear`. Custom React components like `AxisBottom`, `AxisLeft`, and `Marks` handle ticks and bar drawing. Population values are formatted with D3’s `format` function and tooltips appear via SVG `<title>` elements. The chart includes blue axis lines and light green bars, with an "POPULATION-2020" axis label.

Loading thumbnail…

Activity-6

This example demonstrates the basic setup of a VizHub project, showing how to render a static text message to the page using D3.js and ES6 modules. The visualization uses `select` from D3 to target a div element and sets its text content to a string imported from a local module. The page loads D3 v5 from the UNPKG CDN, while styles are applied via an external CSS file. The code also includes an unused constant and regular expression, though they do not affect the displayed output.

Loading thumbnail…

6 budha fork

A grid of small, multicolored rectangles is scattered randomly across the canvas, creating a chaotic dot-matrix pattern. Superimposed on this is a single, large Buddha face outline, drawn with a complex SVG path. The code uses React to render both the generated array of rectangles and the traced path, leveraging SVG's `<rect>` and `<path>` elements. The background image is set via CSS, and the visual is built with ReactDOM.

Loading thumbnail…

Fork of budha

A dense field of small, randomly colored rectangles overlays a large Buddha silhouette drawn with intricate SVG path data. The rectangles, generated through nested array maps, have positions and fill colors determined by the `Math.random()` function, creating a chaotic, pixelated texture. The image is set against a floral background applied via CSS, with a large title message and a red subtitle also present. The visualization uses React and renders entirely through SVG elements.

Loading thumbnail…

5 Fork of budha Activity

This example generates a dense, overlapping field of randomly colored, rotated polygons on a black SVG canvas. Using nested React `map` calls over an array from 0 to 20, it creates thousands of four-point shapes with stochastic positions and RGB fills. The piece also includes a static, hand-coded SVG path representing a Buddha figure, scaled and translated over the generative noise. Built with React and ReactDOM, the visualization renders entirely through SVG elements, contrasting algorithmic chaos with a fixed, organic form.

Loading thumbnail…

5 budhas Hanumantha

This visualization layers a dense field of randomly generated, semi-transparent polygons over a large, hand-coded SVG path depicting a figure (likely Hanumantha). The background pattern is created by three nested array map loops, generating hundreds of overlapping shapes with randomized positions, colors, and rotations. The central figure is rendered using a static SVG `path` element with a complex `d` attribute, while the entire scene is built within a React application using SVG transformations.