varunreddy.gudigopuram@gmail.com

@varunreddy2002·12 public vizzes

Activity 7_Q2

This example visualizes company revenue over time as a filled area chart, with the area rendered in steel blue and axes labeled for Year and Revenue (in millions). It loads CSV data from a GitHub gist and parses the values into numeric format. The chart uses D3 v6’s `scaleLinear`, `extent`, `max`, `area`, and `axisBottom`/`axisLeft` APIs to generate the SVG, with a custom title and axis labels appended as text elements.

Oct 31, 2024

Loading thumbnail…

activity7_Q1

This pie chart displays the distribution of animal conservation statuses, using counts from a CSV dataset to show proportional slices for each category. The visualization is rendered as an SVG using D3 v6, with the `d3.pie` and `d3.arc` functions generating the pie geometry, while a `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to statuses. Labels on each slice include the status name and count, and a separate legend with colored rectangles and text appears to the right, positioned via manual SVG transforms.

Oct 31, 2024

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot cycles through the four iris flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with points colored by species via a custom marker function and a setInterval loop triggering transitions between measurement pairs. It displays the classic Iris dataset fetched from a GitHub-hosted CSV, rendering SVG circles with a static legend and axis labels.

Oct 31, 2024

Loading thumbnail…

Activity 7_Q1

This visualization displays the text “Hello VizHub” inside a web page, using D3.js v5 to select the message container and set its text content. The example also demonstrates importing a custom message from a separate ES6 module and declares a regular expression and a numeric constant. The code relies on D3’s `select` API to target the HTML element and apply the text value.

Oct 31, 2024

Loading thumbnail…

Activity 7

This visualization is an animated scatter plot of the classic Iris dataset, cycling through different pairings of sepal and petal measurements on the axes. It uses D3.js (v6.7.0) via UNPKG, with a custom `scatterPlot` module built from D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The plot updates every few seconds, transitioning between four variable combinations, and includes a color-coded legend for the three iris species.

Oct 31, 2024

Loading thumbnail…

6 buddhas

Six overlapping Buddha silhouettes in black fill a dark SVG canvas, each positioned and scaled via React transforms against a faint floral background image. The main path is an elaborate hand-coded outline of a seated Buddha figure, reused across the composition. React renders the SVG elements dynamically, with the background applied as a styled div layer using backgroundImage and opacity. The code imports React and ReactDOM to construct the visualization, relying purely on SVG path data rather than data-driven generation.

Oct 18, 2024

Loading thumbnail…

Activity6__Task4

This bubble chart visualizes the correlation between processor speed, RAM, and battery life for various devices, with each circle's size encoding battery life and color representing the device category. Built with D3 v7, it renders as an SVG and includes interactive tooltips that display the exact specifications on hover. The chart uses `d3.scaleLinear` for x/y axes and bubble radius, while `d3.scaleOrdinal` maps device names to color categories. A legend shows both the battery-life scale and color-coding, drawn from the gadgetdata.csv file.

Oct 17, 2024

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between processor speed, RAM, and battery life across 30 gadgets. Each circle encodes processor speed on the x-axis, RAM on the y-axis, and battery life through both bubble size and color, with blue-to-green mapping for shorter to longer battery life. The D3.js v7 code uses `d3.scaleLinear` for positional and visual encodings, a custom tooltip for device details, and a legend for size and color references. Data is loaded from `gadgetdata.csv` and rendered as scalable vector graphics (SVG), with hover interactions revealing specific specifications.

Oct 17, 2024

Loading thumbnail…

Activity 6_Task3

This scatter plot maps gaming platforms by their average Action and Adventure ratings, with each circle representing a platform and a hover tooltip revealing its name. The visualization loads CSV data from a GitHub repository and uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and circles as SVG elements. Point positions are derived from the extent of both rating columns, while margins are sized to accommodate full-screen rendering.

Oct 17, 2024

Loading thumbnail…

Activity6_Task2

This visualization shows a stacked bar chart of movie metrics by genre, comparing the relative counts of movies, average ratings, box office revenue, and awards won across seven genres like Thriller, Horror, and Science Fiction. The chart uses d3.stack() to create the layered bars and d3.scaleOrdinal() for color encoding, with d3.scaleBand() positioning genres along the y-axis and d3.scaleLinear() mapping cumulative values on the x-axis. Interactive tooltips display the specific genre and metric value on hover, while a legend identifies each color segment. The data is drawn from a static CSV file containing genre statistics.

Oct 17, 2024

Loading thumbnail…

Fork of Activity 6_Task 1.2

This example shows a horizontal bar chart comparing the population of 20 countries in 2010, with a green bar for each country and a blue axis. The React app loads data from a CSV file via D3’s `csv` function, then uses `scaleBand` and `scaleLinear` to map the country names and population values to SVG rectangles. Axis labels are formatted with D3’s `format` function to abbreviate numbers like “1.2B”. The visualization renders entirely as SVG elements, with axis ticks and marks defined in separate ES6 modules.

Oct 17, 2024

Loading thumbnail…

Activity 6_Task 1.1

A horizontal bar chart displays population figures for ten countries using a dataset loaded from a GitHub-hosted CSV file. The visualization uses React components to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` handling the coordinate mappings. Axis components generate tick marks and labels, while a tooltip using the SVG `title` element shows the formatted population value for each bar. The chart is ordered alphabetically by country name, with axes styled through CSS classes.

Oct 17, 2024