A

amulyareddykondru01@gmail.com

@Amulya-Reddy·18 public vizzes

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates VizHub V3's hot reloading runtime, where a single number in the code controls the displayed font size of the text "Hello World!". Holding the Alt key and dragging that value updates the rendered output in real time. The visualization uses vanilla JavaScript with template literals to inject the dynamic style into the container's innerHTML, requiring no separate HTML entry file—only an exported `main` function.

Loading thumbnail…

Electricity Consumption

This visualization displays electricity consumption over time as a line chart. The code loads CSV data from a GitHub repository, parses the year and consumption columns, and renders a time-series line using d3.scaleTime, d3.scaleLinear, and d3.line. The chart includes axes generated with d3.axisBottom and d3.axisLeft, styled with a steelblue stroke on an SVG element embedded directly in the body.

Loading thumbnail…

Electricity Consumption

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's x-position represents horsepower, y-position represents torque, and the circle size encodes highway MPG. The color of each bubble distinguishes the car manufacturer. The visualization includes a legend for bubble sizes and a tooltip that displays the car make on hover. It is built with D3.js (v7) and renders as an SVG with interactive animations.

Loading thumbnail…

Electricity Consumption

This visualization shows electricity consumption and production patterns over time using a multi-line chart. It plots two time-series lines—consumption in blue and production in green—against a date-based x-axis and a linear y-axis. The code loads CSV data from a GitHub repository, parses dates and numeric values, and uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft to render the SVG. Text labels identify each line at the right edge of the chart.

Loading thumbnail…

Activity-7 q2

This interactive visualization charts BMI against age, using a soft pink-to-salmon gradient area chart to show trends. A hover overlay reveals precise Age, BMI, and a high/normal category label for each data point. Built with D3.js (v7.8.5) via CDN, it employs `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` for rendering, while a tooltip and vertical guide line respond to mouse movement. Data originates from a remote CSV file fetched with `d3.csv`.

Loading thumbnail…

Activity - 7

This visualization displays the distribution of car classification categories using a pie chart with bold colors and percentage labels. The chart, rendered as an SVG via D3.js (version 7.8.5), uses the `d3.arc` and `d3.pie` APIs to generate slices and a legend. Data is loaded from a CSV file hosted on GitHub, and the `d3.scaleOrdinal` function defines the categorical color scheme. A title and legend with category counts complement the chart.

Loading thumbnail…

Activity6_question-4

This example visualizes the correlation between movie rating ranges across six genres using an animated bubble chart. It plots the percentage of ratings in the 5.0–6.5 range on the x-axis against the 7.5–8.5 range on the y-axis, with bubble size encoding the 6.5–7.5 rating proportion and color distinguishing genres. Built with D3 v7 via UNPKG, the visualization uses `d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles with hover tooltips. Data is embedded as static arrays from a CSV file.

Loading thumbnail…

Activity6_tutorial-4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, with bubble position on the x- and y-axes representing horsepower and torque, and bubble size scaled by highway MPG. The chart includes interactive tooltips that display the car make upon hover. Implemented with D3 v7 (`d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`), the SVG rendering uses color-coded bubbles and a custom legend for MPG values, with data loaded from a CSV file.

Loading thumbnail…

Activity6_question3

This example visualizes car performance metrics from a CSV file, plotting horsepower against highway MPG for various car makes. It features a scatter plot with color-coded categories (Economy, Luxury, Sports, Other) and a horizontal bar chart showing average horsepower by make, using D3.js for the former and Chart.js for the latter. The SVG scatter plot uses `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`, while the canvas bar chart uses `getContext('2d')` and Papa Parse to load the data.

Loading thumbnail…

Activity6_tutorial3.2

This scatter plot shows the relationship between sepal length and petal length for Iris flowers, with each species represented by a distinct shape in a custom legend. The visualization uses D3 v7's `scaleLinear` and `scaleOrdinal` to map measurements and categorical species, while the `symbol()` generator draws the shape marks. Data is loaded from a remote CSV file via `fetch` and `csvParse`, then parsed into numeric fields. Axes and labels are created using custom `axisLeft` and `axisBottom` functions from D3's `d3` module, and the shape legend is built dynamically with positioned `path` and `text` elements.

Loading thumbnail…

Activity6_tutorial-2

This stacked bar chart shows 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". The visualization encodes percentages as horizontal bar lengths, using d3.stack() to compute stacked segments and d3.scaleOrdinal with a categorical color palette to distinguish rating bins. Interactive tooltips display exact percentage values on mouseover via D3 event handlers, while d3.axisBottom and d3.axisLeft position the percentage and genre scales. The SVG rendering uses data from an inline CSV file.

Loading thumbnail…

Activity6_task-1

This visualization displays the populations of 20 countries from a CSV dataset, using a horizontal bar chart rendered as SVG elements within a React application. The chart employs D3 v5 scales to map country names to the y-axis and population values to the x-axis. Population data is loaded asynchronously via `csv()` and formatted with `format('.2s')` for abbreviated tick labels. The axis components and colored rectangles are built from D3 scale outputs using JSX, with tooltips provided by SVG `<title>` elements.

Loading thumbnail…

Activity6_tutorial-1

This visualization displays the top 30 countries by 2020 population using a horizontal bar chart rendered with SVG in a React application. The bars are populated from a CSV dataset, with population values formatted in billions using D3’s `format`. The chart uses `scaleBand` for the categorical country axis, `scaleLinear` for the quantitative population scale, and custom React components for the axes and marks. The code imports `csv`, `scaleBand`, and `scaleLinear` from d3.v5, while tooltips appear via SVG `<title>` elements on each rectangle.

Loading thumbnail…

Activity6_question-1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and custom React components for the axes and marks. Data is loaded from a remote CSV file via `d3.csv`. Bars are colored green, and hovering over a bar displays its population value using a native SVG `<title>` tooltip, with tick labels formatted in billions using `d3.format`.

Loading thumbnail…

Activity6_task-3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with data points colored by species (setosa, versicolor, and virginica). The visualization also incorporates sepal length and width values into each point’s bounding box via the rx and ry attributes. Built with D3 v6, the code loads CSV data using d3.csv, scales axes with d3.scaleLinear, and renders circles and axis labels as SVG elements. The interactive full-window layout uses d3.axisBottom and d3.axisLeft for coordinate reference, with species-based coloring applied through a custom marker function.

Loading thumbnail…

Activity6_task-2

This example visualizes the performance of various car makes through a horizontal stacked bar chart, sorting makes by their cumulative horsepower, torque, and highway MPG values. It shows how each make’s engine output and fuel efficiency contribute to an overall performance score, with segments colored distinctively. Built with Chart.js and PapaParse, the code loads a CSV file, groups and averages the data per make, then renders the bars on a canvas. Hovering over a segment reveals the exact metric value via tooltips.

Loading thumbnail…

6 BUDDHAS

Six Buddhas appear as a nested, overlapping composition of identical Buddha silhouettes, each rendered as an SVG path and colored with random RGB values. The code uses React and ReactDOM to generate twenty map-like iterations of coordinates, while a separate array drives the repeated placement of each Buddha figure. The background is a floral image, and the SVG paths are drawn with varying scales and translations to create a dense, colorful, layered visual effect.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes are rendered as SVG polygons with randomized positions, colors, and rotations layered over a red "5 Buddhas" message. Built with React, the visualization generates three nested loops to produce hundreds of semi-transparent polygons, while a large static path outlines the Buddha figure. The black background and vibrant RGB fills create a chaotic, overlapping composition.