shravan.s0710@gmail.com

@shravan071000·21 public vizzes

AQI VS CO

This scatterplot compares AQI values with CO AQI values for nine countries, using a red trendline to suggest a positive correlation between the two air-quality metrics. The visualization renders as an SVG in D3 v7, with colored circles distinguishing countries, labeled axes, and a legend. It uses `d3.csv` to load data from a GitHub Gist, `d3.scaleLinear` for axes, and `d3.regressionLinear` to compute the fitted line.

Apr 24, 2024

Loading thumbnail…

AQI VS PM2.5

This example shows a bar chart comparing AQI Values across countries, with a primary focus on the overall AQI metric. The visualization uses D3 v7 to load a CSV data file, parse numeric values, and render SVG bars scaled with d3.scaleBand and d3.scaleLinear. It displays rotated x-axis labels for country names and includes axis labels for clarity. The bars are styled with a steelblue fill that darkens on hover via CSS. The code applies standard D3 selections and axis generators to construct the chart within a defined margin-based layout.

Apr 24, 2024

Loading thumbnail…

AQI VS OZONE

This bar chart compares AQI values against ozone AQI values across countries, with steelblue bars representing overall air quality index readings. The visualization uses D3 v7’s SVG rendering, loading data from a CSV file via `d3.csv`. It employs `scaleBand` for the categorical x-axis, `scaleLinear` for the numeric y-axis, and `d3.axisBottom` with rotated labels to accommodate country names. Hover interactions darken bars via CSS, while margins and labels are configured through SVG text elements.

Apr 24, 2024

Loading thumbnail…

AQI vs NO

A bar chart displays the Air Quality Index (AQI) values for various countries, alongside their NO2 AQI values from a CSV dataset loaded via `d3.csv`. Each country is plotted on the x-axis using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` to map AQI values to bar heights. The SVG rendering includes rotated x-axis labels for readability, with hover effects styled in the linked `style.css`. D3 v7 is loaded from UNPKG, and the chart is drawn within a fixed-width container using `d3.axisBottom`, `d3.axisLeft`, and `d3.select`.

Apr 24, 2024

Loading thumbnail…

ass2 q1

This pie chart visualizes the price of HBOMAX in different countries, with each slice labeled with its dollar value and a legend mapping colors to countries. The data is loaded from a CSV file hosted on GitHub. The visualization uses D3 v5 APIs including `d3.select`, `d3.json`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG arcs and text labels, while styling is applied through CSS selectors in the SVG.

Apr 13, 2024

Loading thumbnail…

ass2 q2

This area chart displays the cost of Dodgecoin from 2008 to 2021, highlighting price trends over time. The visualization combines a black line with an aqua-filled area beneath it, using a time-scaled x-axis and a linear y-axis. Built with D3 v5, the code leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with `curveBasis` smoothing. The SVG rendering reads CSV data from a GitHub gist, formats the y-axis ticks with `format('.3s')`, and styles grid lines and labels via a linked stylesheet.

Apr 12, 2024

Loading thumbnail…

act6 q4

This interactive bubble chart visualizes the correlation between vehicle weight, height, and length, using data from a CSV file. The x-axis maps weight, the y-axis maps height, and circle size represents length, while color distinguishes different vehicle models. Powered by D3 v7, the visualization includes hover tooltips that display exact values. The chart also features legends for both length scaling and model colors, with circles rendered using SVG elements and scales such as `d3.scaleLinear` and `d3.scaleOrdinal`.

Apr 4, 2024

Loading thumbnail…

act6 q4

This example demonstrates the basic workflow of a VizHub project. It loads D3.js via a CDN and uses the `select` API to target a page element. The code imports a local ES6 module to define the displayed text and sets the message "Hello VizHub!" within a styled container. The project shows how to combine external libraries with local modules, using D3 to manipulate the DOM.

Apr 4, 2024

Loading thumbnail…

act6 t4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. The code uses D3 v7 to load CSV data and render an SVG visualization. Bubble position encodes horsepower and torque on the axes, while bubble size and color represent highway MPG and car manufacturer, respectively. The chart includes interactive tooltips on mouseover and a custom legend indicating the MPG scale.

Apr 4, 2024

Loading thumbnail…

act6q3

This example shows a scatter plot of penguin species, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization loads data from a remote CSV, parses numeric fields, and renders circles using D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs onto an SVG canvas. The chart includes labeled axes and a title, with axis text styled in cursive.

Apr 4, 2024

Loading thumbnail…

act6 t3.2

This example visualizes the Iris dataset as a scatter plot, showing sepal length against petal length for different species. The species are distinguished using different symbols via a categorical color scale and a shape legend with tick marks. The visualization is built with D3 v7, using scaleLinear, scaleOrdinal, symbol, axisLeft, and axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and rendered into an SVG, with modular functions for axes, scatter plot, and legend composition.

Apr 4, 2024

Loading thumbnail…

act6t3

This example visualizes the Iris dataset as a scatter plot, mapping petal length against petal width on the x- and y-axes while also encoding sepal dimensions as additional point properties. It uses D3 v6 to load CSV data from a GitHub gist, apply linear scales, and render colored SVG circles distinguished by iris species. The code explicitly uses `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with an asynchronous main function to draw the chart on an SVG canvas sized to the window.

Apr 4, 2024

Loading thumbnail…

act6 q2

This example shows a stacked bar chart of sales by category across four quarters, with tooltips revealing exact values per segment. It uses D3 v7’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom` to render an SVG. The code loads data from a local CSV, applies an ordinal color scale, and builds an interactive hover tooltip with D3 selections.

Apr 4, 2024

Loading thumbnail…

act 6 t2

This stacked bar chart visualizes IMDb movie ratings across six genres, showing the percentage distribution within five rating brackets from below 5.0 to above 8.5. The chart uses `d3.stack()` to generate stacked series from the CSV data, `d3.scaleBand()` for the genre categories, and `d3.scaleLinear()` for the percentage axis. Each bar segment is colored using `d3.scaleOrdinal` with a custom palette. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating category, while the SVG rendering includes axes, gridlines, and a title.

Apr 4, 2024

Loading thumbnail…

act6q1.2

A horizontal bar chart displays the top 20 countries by 2010 population, with green bars ordered by country name along the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars and axes, while `csv` loads data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG elements, with a Poppins font and formatted tick labels converting billions from D3’s `.2s` format.

Apr 4, 2024

Loading thumbnail…

act6 q1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, sourced from a CSV file. Using React with D3 v5, it employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering bars as SVG rectangles. Population values are formatted using `format` to abbreviate large numbers, and hovering reveals exact values via SVG `<title>` elements.

Apr 4, 2024

Loading thumbnail…

Fork of Hello VizHub for activity 6

This example displays a horizontal bar chart of the top 30 countries by 2020 population, using data loaded from a CSV file hosted on GitHub. The visualization renders as an SVG, built with React and D3 v5. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate population values. Custom components draw the axes, while each bar includes a tooltip showing the formatted population value.

Apr 4, 2024

Loading thumbnail…

Fork of Activity-6_Task-1 dummy

This bar chart displays the 2020 population estimates for 30 countries, sourced from a GitHub-hosted CSV file. It uses React to render SVG elements, with D3 v5 functions like `scaleBand` and `scaleLinear` to position bars and axes. The bars are colored green, and each includes a native SVG `<title>` tooltip showing the formatted population value. Custom axis components handle the bottom and left tick marks, with population labels abbreviated using D3’s `format` API.

Apr 4, 2024

Loading thumbnail…

6 Buddha svs

Six Buddha figures, rendered in multicolored SVG, sit layered on a floral background. The app generates random colored dots and then draws a complex Buddha path with heavy visual noise and overlap, mimicking a stained-glass effect. Built with React, it maps over arrays to produce SVG elements with randomized fill colors, opacity, and positions, while the Buddha shape itself comes from an inline SVG path.

Apr 4, 2024

Loading thumbnail…

5 buddha svs

A field of small, rotating, multi-hued polygons overlies a larger, overlapping buddha figure rendered as a dense SVG path. The background is black, and the polygons are generated through nested React map calls, with random coordinates and fill colors. The outer SVG element defines a 960-by-1000 canvas, and the buddha path is scaled and translated within a group. The visualization uses React and ReactDOM to render the SVG elements, demonstrating a layered, generative composition.

Apr 4, 2024

Loading thumbnail…

2 buddha

The visualization renders a large, colorful buddha silhouette composed of overlapping semi-transparent circles scattered across a black background. Each circle is randomly positioned and colored using JavaScript’s `Math.random` within the React component, producing a vibrant, chaotic pointillist effect. The work uses React and ReactDOM to generate an SVG scene, layering hundreds of small circles atop a detailed SVG path that outlines the buddha figure. The path is scaled and translated, while the circles are drawn with varying RGB values and opacity, creating an abstract, luminous interpretation of the original shape.

Apr 4, 2024