Skip to main content
Log in
J

Jayanth Reddy Sripathi

@jaycsgo1810·19 public vizzes

Loading thumbnail…

dispie

This pie chart shows the count of deaths by disaster type from 2000–2024, aggregating data into the top ten categories plus an “Others” slice. It uses React for component rendering and D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and color slices. The code fetches a CSV via `d3.csv`, applies `d3.rollups` and `d3.sum` for aggregation, and adds interactive tooltips and percentage labels.

Dec 5, 2024
Loading thumbnail…

dispie

This example renders a simple text message, “Hello VizHub!”, centered and enlarged via CSS. It demonstrates fundamental VizHub capabilities by loading D3.js from UNPKG and using the `select` function to target a DOM element. The code also showcases local ES6 module imports, defining the message in a separate `myMessage.js` file, while a regular expression and constant are declared but remain unused.

Dec 4, 2024
Loading thumbnail…

activity7_question2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across different genres, aiming to reveal the impact of genre on rating levels. Each genre displays stacked segments representing five rating categories, with hover pop-ups showing precise percentages per genre. The visualization uses d3.stack() to create stacked data, d3.area() with a basis curve for smooth rendering, and d3.scaleBand and d3.scaleLinear for axes. Data is loaded via d3.csv from a GitHub repository, with an ordinal color scale and legend distinguishing rating categories.

Nov 8, 2024
Loading thumbnail…

activity7_question1

This example shows a pie chart comparing the population of the top ten countries, with each slice labeled by its percentage of the total and accompanied by a color-coded legend. The chart is built using React and SVG, with D3 v5 handling the pie geometry and layout. The code uses `d3.arc` to generate the pie slices, `d3.schemeCategory10` for colors, and `d3.format` for percentage labels. Data is loaded from a remote CSV file via `d3.csv` and processed in the `useData` hook.

Nov 8, 2024
Loading thumbnail…

Activity 7 question 1

This example shows a population pie chart for ten countries in 2019, using colored slices with percentage labels and a legend. Data is loaded from a CSV file via the `d3.csv` function. The visualization is built with React and rendered as SVG using D3 version 5 components, including `d3.pie` and `d3.arc` for generating the slices, and `d3.format` for percentage labels, while the chart is drawn inside a `<div>` element.

Nov 7, 2024
Loading thumbnail…

Activity 7

This interactive scatter plot animates through different x-axis variables of the Iris dataset, cycling between petal width, sepal width, petal length, and sepal length. The visualization uses D3 v6 to load CSV data, render SVG circles colored by species, and update axes dynamically via `setInterval`. It implements a reusable chart pattern with `scatterPlot.js` exporting a configurable function that uses `scaleLinear`, `extent`, and axis components. The animation demonstrates how the same data points reposition as different dimensions are mapped to the x-axis, with circles maintaining fixed colors and a static y-axis.

Nov 5, 2024
Loading thumbnail…

Activity6_Question4

This visualization uses a bubble chart to compare the proportions of movie ratings across different genres. A grid of circles, colored by genre using `d3.schemeSet2`, shows the share of titles in five rating categories (from "below 5.0" to "above 8.5"), with bubble size scaled by `d3.scaleLinear` to encode proportion values. Built with D3 v7, the SVG chart includes labeled axes, an ordinal color scale, and interactive tooltips that display the exact percentage when hovering over each circle. The data is structured as static arrays in JavaScript, rendered with animated transitions on hover.

Oct 25, 2024
Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its size and color represent highway MPG and car make, respectively. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` for color encoding, and `d3.interpolateTurbo` for the palette. Hovering reveals a tooltip with the make name, and a legend explains bubble size values.

Oct 25, 2024
Loading thumbnail…

Activity6_Question3

This example visualizes IMDb movie ratings by genre using a dumbbell plot, showing the percentage distribution across five rating brackets from below 5.0 to above 8.5. The chart displays colored circles for each rating category along a shared horizontal axis, with genres listed vertically. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the percentage axis, `d3.scaleBand` for genre positioning, and `d3.scaleOrdinal` for categorical colors. Interactive tooltips appear on mouseover, displaying exact percentages, while the data is loaded from an external CSV file.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3.2

This example presents a scatter plot of the Iris dataset, visualizing sepal length against petal length with points colored and shaped by species. The visualization is built using D3 v7, leveraging modules like `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.symbol` to map data values to positions and shapes. It also demonstrates custom reusable functions, including `axes` for drawing axes with labels and `shapeLegend` for a categorical legend. Data is fetched asynchronously from a remote CSV file and parsed with `d3.csvParse`. The chart dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3

This example displays a scatter plot of the Iris dataset, mapping petal length and width as the primary axes while encoding sepal length and width into the size and shape of the circular markers. Each of the three iris species is distinguished by a unique fill color: sky blue, light green, and orange. The visualization uses D3 version 6, loaded via a CDN, and leverages the `d3.csv` loader to fetch the data from a GitHub repository. It builds the plot using `d3.select` to create an SVG, with scales from `d3.scaleLinear`, axes from `d3.axisLeft` and `d3.axisBottom`, and computes data extents via `d3.extent`. The code sets the circle radii, along with `rx` and `ry` attributes, to reflect the additional sepal dimensions, while axis labels are added as text elements.

Oct 22, 2024
Loading thumbnail…

Activity6_Question2

This example shows a horizontal stacked bar chart comparing car specifications—highway MPG, horsepower, and torque—across 31 manufacturers. The data is loaded from a local CSV file and rendered as SVG using D3 v7. The chart uses `d3.stack()` to aggregate the three numeric measures, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for manufacturer categories. Interactive tooltips display exact segment values on hover, and a color-coded legend distinguishes each specification.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

This stacked horizontal bar chart illustrates how IMDb rating percentages are distributed across six film genres, with each genre’s bar segmented into five rating ranges from below 5.0 to above 8.5. Using D3’s data parsing, the visualization maps genre categories to the y-axis bands and scales the stacked segments along a linear percentage x-axis. The code employs D3’s `stack`, `scaleOrdinal` for color coding, `scaleBand` and `scaleLinear` for axes, and implements interactive tooltips with mouseover events that display exact percentages. The SVG output uses a custom color palette and axis labels styled with imported Google Fonts.

Oct 22, 2024
Loading thumbnail…

Activity6_Question1.2

This example shows a horizontal bar chart of the top 20 countries by 2010 population, using SVG rectangles positioned by D3 scaleBand and scaleLinear. React components render the axis and marks, with the bottom axis formatting values using D3’s format function to convert abbreviations like “G” to “B”. Data loads asynchronously via d3.csv from a GitHub raw URL, and tooltips display formatted values through the SVG title element. The chart uses Poppins font styling and a green mark fill from the included CSS.

Oct 22, 2024
Loading thumbnail…

Activity6_Question1.1

This example presents a horizontal bar chart comparing the population of ten countries in the year 2000. It uses D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with the data loaded from a remote CSV file via D3's `csv` function. Two local ES6 modules, `AxisBottom` and `AxisLeft`, render the axes, while the `Marks` module draws green `rect` elements with interactive tooltips. The visualization is built with React, rendering to SVG, and includes a custom tick formatter that converts values to billions.

Oct 22, 2024
Loading thumbnail…

Activity6_Task1

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv, and axis ticks are formatted with d3.format to abbreviate values like billions. Tooltips appear on hover via SVG title elements.

Oct 22, 2024
Loading thumbnail…

buddhas 6

A dense, overlapping field of Buddha silhouette paths fills a black SVG canvas, each path rendered in a distinct color atop a background flower image repeated across the viewport. The code maps over nested arrays to generate multiple copies of the same path data with varying transformations, using React to render `<image>` and `<path>` elements directly into the SVG. The visualization relies on hardcoded coordinate data for the Buddha shape, layered at scale and offset to create a kaleidoscopic, patterned effect.

Oct 19, 2024
Loading thumbnail…

Buddhas question

A dense field of randomly colored, rotated diamond shapes cascades across the screen, generated by three nested `Array.map` loops over the numbers 0 through 20. Each polygon's points, fill color, and rotation are computed with `Math.random()`, producing a chaotic, overlapping visual texture. A large Buddha silhouette, defined by a long SVG path, sits centered and scaled over this backdrop. The React app renders the SVG directly, with the title "Buddha in colors" hinting at the spiritual and vibrant aesthetic.

Oct 14, 2024
Loading thumbnail…

5 Buddhas

A dark, immersive SVG scene layers five repeated Buddhas across a 960-by-1000 canvas, each rendered as a dense path of stroke lines and overlaid with clusters of small, randomly positioned circles. The composition emerges from nested React maps that generate hundreds of semi-transparent dots with varied RGB colors, creating a chaotic, textured backdrop behind the structured Buddha silhouettes. The visualization relies on React’s component-based rendering to build the SVG elements programmatically, with hardcoded path data defining the central figure and JavaScript’s `Math.random()` driving the scattered point placement and color variation.

Oct 14, 2024