S

saivaishnogaruda@gmail.com

@Saivaishno18·46 public vizzes

Loading thumbnail…

Actitvity7:Questions:1

This example shows the distribution of fuel types among cars using a static pie chart. Hardcoded sample data assigns percentages to petrol, diesel, electric, and hybrid vehicles, with each slice labeled and colored using a categorical scale. The visualization is rendered with D3.js v6, using `d3.pie()` to compute arc angles and `d3.arc()` to draw SVG paths. A custom legend built from HTML divs lists each fuel type with its corresponding color and value.

Loading thumbnail…

Activity7:Question:2

This visualization shows mobile usage hours per month using a red-filled area chart with points across six months from January to June. The chart is rendered on an HTML canvas using Chart.js, with the line chart type configured to fill the area beneath the curve using a semi-transparent background. The example also includes a second version that fetches CSV data from a GitHub gist and parses it to generate a similar chart with teal coloring. Both versions label the x-axis as months and the y-axis as hours.

Loading thumbnail…

Actitvity7:Questions:1

A pie chart visualizes the distribution of car fuel types from a CSV dataset, displaying each category with percentage labels and a matching legend. Built with D3 v6, the chart counts fuel-type occurrences, computes percentages, and renders slices using `d3.pie` and `d3.arc`, with a categorical color scheme from `d3.scaleOrdinal`. Percentages are placed on each slice via `arc.centroid`, while the legend is constructed with HTML elements styled by the same color scale. The SVG output is centered in the page, with data loaded asynchronously via `d3.csv`.

Loading thumbnail…

Actitvity7:Questions:1

This pie chart displays the distribution of car fuel types from a CSV dataset, using a D3.js v6 script. The visualization renders as an SVG with color-coded slices and white label text. The code loads data from a GitHub URL, counts fuel type occurrences with `d3.rollups`, and constructs the chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a `schemeCategory10` color palette.

Loading thumbnail…

Fork of Activity7:Questions:1

This example shows the distribution of car fuel types in a dataset, with each slice of a pie chart representing a fuel category and its size reflecting the number of cars using that fuel. It uses D3.js v7 to fetch a CSV file from a GitHub repository, parse the data, and group it by the "Fuel" attribute using `d3.rollup`. The pie chart is rendered as SVG with `d3.pie` and `d3.arc`, labels are positioned using `arc.centroid`, and a color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10`.

Loading thumbnail…

Activity7:Questions:1

This visualization uses a D3.js pie chart to show the distribution of car fuel types, with slices representing the proportion of cars using each fuel type. The data is loaded from a CSV file via `d3.csvParse` and grouped with `d3.rollup` to count cars by fuel category. The chart is rendered as SVG using `d3.pie()`, `d3.arc()`, and a color scale from `d3.schemeCategory10`, with labels placed at each arc’s centroid.

Loading thumbnail…

Activity7:Question:2

This area chart visualizes daily mobile usage hours over time, with the X-axis representing dates and the Y-axis showing usage duration. Peaks and dips in the chart reveal patterns in user behavior. The visualization uses Chart.js to render a line chart with filled area styling and PapaParse to parse CSV data fetched from a GitHub repository. The code sets smooth curve tension and a time-based X-axis scale.

Loading thumbnail…

Fork of Activity7:Question:2

This area chart shows total app usage hours aggregated across five age groups, from under 20 to 50+, using a synthetic dataset of 49 users with age and usage values. The visualization groups the data with `d3.group`, sums usage per group with `d3.sum`, and renders the result as a filled path using the `d3.area` generator. The SVG employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and both axes via `d3.axisBottom` and `d3.axisLeft`, with labels for age groups and usage hours.

Loading thumbnail…

Fork of Fork of Hello VizHub

This area chart visualizes car prices by manufacturing year using a dataset of 20 car models from brands like Tata, Hyundai, and Maruti. The SVG rendering uses D3 v6 with `d3.area()` to create a red filled path, `d3.scaleLinear()` for both axes, and `d3.axisBottom()` and `d3.axisLeft()` for tick marks. Years are plotted on the x-axis with prices in INR on the y-axis, while labeled axes indicate the variables.

Loading thumbnail…

Fork of Hello VizHub

This example shows a car price area chart, displaying a univariate trend over time with a shaded region beneath the line. The visualization uses D3.js v6, with `d3.area` and `d3.line` generators to construct the shape, while `d3.scaleTime` and `d3.scaleLinear` map data to the x- and y-axis. The chart reads data from an external source and renders it into an SVG container defined in the HTML. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, providing clear temporal and price references.

Loading thumbnail…

Activity7:Question:2

This area chart displays total app usage hours across six age groups, from users under 20 to those 50 and older. The visualization aggregates individual user data by binning ages and summing their reported usage hours. Built with D3 v7, the chart uses d3.group to categorize the dataset, d3.scaleBand and d3.scaleLinear for positioning, and d3.area to generate the filled path rendered as SVG. The visualization includes labeled axes for age groups and usage hours, with a title and light gray background.

Loading thumbnail…

Activity7:Questions:1

This pie chart shows the distribution of fuel types among a small dataset of used cars, grouping sixteen vehicles by their fuel category: Petrol, Diesel, and CNG. Built with the Chart.js library, the code computes the count of each fuel type using a reduce function over an in-memory JavaScript array of car objects, then renders the result to a canvas element with a distinct color per fuel type. The chart displays a legend and titled heading, with a responsive layout that centers the visualization on the page.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020 as a pie chart, with each slice labeled with its death count (in thousands) and a legend listing country names alongside their corresponding values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and assign colors from a hardcoded array. Data is loaded via `d3.csv` from a GitHub Gist, and the SVG canvas is animated with a custom render function.

Loading thumbnail…

Fork of Task 9 Pie Chart

This pie chart example displays the distribution of car classes from a CSV dataset. It loads D3 via UNPKG and imports modules from local ES6 files, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate slices, labels with counts, and a legend. The SVG render includes labeled segments with white strokes and opacity styling, plus an optional title.

Loading thumbnail…

Activity7:Questions:1

This example shows the distribution of car classes as a simple pie chart, with each slice labeled by its category name and percentage of the total. It loads a CSV file using `d3.csv`, aggregates class counts with a `reduce` operation, and renders the chart with D3’s `d3.pie` and `d3.arc` methods on an SVG. A categorical color scale (`d3.scaleOrdinal`) assigns colors from `schemeCategory10`, and labels are positioned using the arc centroid calculation while the slice area is scaled by the outer radius.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to import the `select` function from the D3 library via ES6 modules and load D3 v5 from a CDN. The code also includes a local module, `myMessage.js`, which exports the displayed message, and uses CSS to style the text with a large font size. The rendering approach relies on D3’s selection API to update the DOM.

Loading thumbnail…

Activity-7Q1

This visualization displays World Bank data for the most recent year in the dataset, using horizontal bars to compare GDP across countries. The chart renders as an SVG using D3 v7, with a linear scale for GDP values and a band scale for country names. It loads CSV data asynchronously via `d3.csv`, filters for the latest year using `d3.max`, and draws axes with `d3.axisBottom` and `d3.axisLeft`. Bars are colored teal and sized by GDP, with tick formatting applied via `d3.format`.

Loading thumbnail…

Activity-7Q1

This example demonstrates a minimal D3.js setup where a single HTML element displays the text "Hello VizHub!". The visualization shows how D3's `select` API can target a DOM node and set its content, while a local ES6 module provides the displayed string. Styling is applied via an external CSS file, with the message centered and enlarged. The code imports `select` from D3 v5 and defines a custom module, illustrating basic integration of D3 with modular JavaScript and external stylesheets without any data or complex rendering.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to import the `select` function from the D3 library via ES6 modules and load D3 v5 from a CDN. The code also includes a local module, `myMessage.js`, which exports the displayed message, and uses CSS to style the text with a large font size. The rendering approach relies on D3’s selection API to update the DOM.

Loading thumbnail…

Fork of Hello VizHub

This interactive bubble chart visualizes the relationship between incidence and prevalence rates for fifteen medical diseases. Each bubble represents a disease, with its horizontal position indicating incidence rate and vertical position indicating prevalence rate per 100,000 individuals. Bubble size corresponds to the average age at diagnosis, allowing viewers to compare epidemiological metrics across conditions. Built with Chart.js, the visualization uses canvas rendering to display colored, semi-transparent bubbles with axis labels and tooltips. The chart is constructed from hardcoded disease data, drawing from the provided dataset to create an informative comparison of disease burden across common health conditions.

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes car performance by plotting speed (km/h) against fuel efficiency (mpg) for five car models over four years. Each point represents a single year’s data, with distinct colors (red, blue, green, orange, purple) assigned per car brand, sourced from an embedded CSV table. Built with D3 v6, the SVG chart uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while circles are appended via `.selectAll().data().enter()`. The code shows a static rendering with `svg` output, and no animation or interaction is implemented.

Loading thumbnail…

Fork of Fork of Hello VizHub

A stacked bar chart visualizes deforestation across five regions for 2000, 2010, and 2020 using data embedded in the page. Each region displays three adjacent bars with distinct colors, and hovering reveals exact hectare values. Built with D3.js v6, the chart uses `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for y-axis scaling, and `d3.scaleOrdinal` for year-based coloring. A custom y-axis title labels the metric as "Damage to Nature," and a legend identifies the year colors.

Loading thumbnail…

Fork of Hello VizHub

This is a horizontal bar chart built with React and D3 v5, displaying the population of ten countries in the year 2000. The chart uses SVG rendering, with the y-axis listing country names and the x-axis showing population values formatted in billions. The visualization is generated from a CSV file loaded via `d3.csv`, and it uses React hooks like `useState` and `useEffect` to fetch and manage the data. The code defines custom components for the axes and marks, with tooltips showing the exact population values.

Loading thumbnail…

Fork of Hello VizHub

This chart displays the population of 20 countries in 2010 as a horizontal bar chart, using the D3v5 scaleBand and scaleLinear APIs to position bars along y- and x-axes. Rendered as SVG via React components, it plots each country’s population with formatted tick labels (e.g., abbreviating millions as “B”) and a tooltip showing the exact value. The data is loaded from a remote CSV file using d3.csv.

Loading thumbnail…

Fork of Hello VizHub

A horizontal bar chart displays the populations of thirty countries in 2020, sorted by country name along the y-axis and ordered by population along the x-axis. The visualization uses React with D3 version 5, specifically `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles. Data is loaded from a CSV file via the `csv` function, with tooltips formatted using D3's `format` function to show abbreviated population values. The chart includes styled axes with blue tick lines and gray tick labels.

Loading thumbnail…

Fork of Hello VizHub

This D3.js v7 bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position maps to horsepower, y-position to torque, and radius to highway MPG, while color distinguishes makes using `d3.scaleOrdinal` with `d3.interpolateTurbo`. The code reads data from a CSV via `d3.csv`, renders an SVG with axes and labels, and includes an interactive tooltip on `mouseover`, `mousemove`, and `mouseleave` events. A legend communicates bubble size and color mapping.

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes car performance over four years, with speed on the x-axis and fuel efficiency on the y-axis. Each point represents a specific car-year observation, and five distinct cars are differentiated using custom SVG path shapes: circles, squares, triangles, diamonds, and crosses. The visualization uses D3 v6 to create linear scales (`d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`), with the data defined as a hardcoded JavaScript array. The SVG rendering applies a fixed domain for speed and efficiency, and the code styles points with a stroke and fill via a CSS class.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays a scatter plot of car performance, comparing speed against fuel efficiency for five car models across four years, from 2020 to 2023. Each car is distinguished by a unique shape and color, such as circles for Car A and triangles for Car C, revealing trends in the trade-off between speed and efficiency over time. The visualization uses D3.js v6 to create an SVG with linear scales for both axes, rendering each data point as a `path` element with a `d` attribute generated from the shape definitions. Axis labels and tick formatting are added using `d3.axisBottom` and `d3.axisLeft`, with the data embedded directly in the script.

Loading thumbnail…

Fork of Hello VizHub

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol. The example uses the D3.js library, specifically its `scaleLinear` for axes, `scaleOrdinal` for the shape scale, and `symbol` to generate the marks. A custom shape legend, built via a separate module, identifies the species. The data is loaded asynchronously from a CSV file hosted on GitHub, and the visualization fills the browser window.

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, virginica). The code loads CSV data from a remote URL using d3.csv, applies linear scales with d3.scaleLinear, and renders SVG circles positioned via d3.selectAll and .join. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart dimensions adapt to the window size.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal VizHub project that renders the text “Hello VizHub!” in a centered, large-font message using D3 v5. It shows how to load D3 from a CDN via UNPKG, import the `select` function from the `d3` module, and import a local ES6 module (`myMessage.js`) to supply the displayed string. The HTML structure includes a `div#message` element, which is updated through `select('#message').text(message)`, with styling from an external CSS file.

Loading thumbnail…

Fork of Hello VizHub

A stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each genre's bar segmented into five rating categories. The visualization reveals that action films have the highest proportion of low ratings, while documentaries skew toward higher ratings. Built with D3 v7 and rendered as SVG, the chart uses d3.stack() to compute stacked segments, d3.scaleOrdinal() for color encoding, and hover interactions with tooltips to display precise percentages. Data comes from a local CSV file containing genre-specific rating proportions.

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population of the top 20 countries in 2010, ordered alphabetically. It uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` for tick labels. Data is loaded via `csv` from a GitHub URL. The chart includes styled tick marks and axis labels for clarity.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Rendered with React and SVG, this visualization displays a dense, colorful arrangement of overlapping diamond polygons on a green background. The code generates 21 concentric layers of rotated shapes with randomized positions and RGB fill values, creating a chaotic, abstract composition. A large Buddha silhouette path is also included, positioned and scaled within the same SVG canvas, layered among the geometric forms. The React application uses `polygon` elements and `transform` rotations to construct the visual, with the data derived from an array of integers.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, semi-transparent circles is scattered across a black canvas, each with randomly generated positions and RGB colors. Overlaid on top is a stylized, line-art depiction of the Buddha’s face, built from a long SVG path with a thick stroke. The React components render the SVG elements, and the circle positions and colors are computed using JavaScript’s `Math.random()` within nested map functions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful Buddha silhouette rendered in SVG overlaps a field of randomly positioned, semi-transparent circles. The circles are generated with nested `Array.map` calls in React, using `Math.random` for coordinates and RGB fill values. The Buddha path is drawn with a `path` element, scaled and translated via a transform group. The visualization combines a static vector icon with generative, animated-looking dot patterns on a black background.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A woven mandala of hundreds of overlapping Buddha silhouette paths renders as a dense, colorful abstract composition against a floral background image. The React component maps nested arrays to generate up to 21×21 sets of `null` SVG elements with random RGB fills, opacity, and positions, while a single large `path` string is drawn using SVG `g` transforms with scaling and translation. The visualization mixes generative randomness with a fixed geometric form, using React’s JSX to produce SVG output.

Loading thumbnail…

Fork of 6 Buddha

The visualization displays a colorful, overlapping arrangement of Buddha-like figures, rendered as a complex SVG path, on a decorative floral background. Each smaller element is a nearly invisible placeholder that contributes to a scattered grid of colored squares, while the primary Buddha is drawn with a dense, continuous vector path. The React code uses nested `A.map` functions to generate SVG elements with random fill colors and opacity, while the main figure is a large, static `path` transformed via the `g` element. The work is built with React and ReactDOM, producing SVG output directly in the browser.

Loading thumbnail…

Fork of Fork of 6 Buddha

This visualization displays a dense field of randomly positioned, semi-transparent circles overlaid on a large Buddha path. The circles use the SVG `<circle>` element with random coordinates and RGB fill values generated via `Math.random()`. The Buddha figure itself is a single SVG `<path>` with a complex `d` attribute, transformed and scaled. The code uses React 16.10 to render the SVG elements, with an external flower image as the page background. The overall effect layers chaotic colorful dots over the structured religious iconography.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of overlapping colored circles fills a black SVG canvas, layered over a single red Buddha silhouette path. The circles are generated through nested React array maps, each with randomized positions, radii, and RGB fill values computed via `Math.random()`. The Buddha path renders as a large SVG `<path>` element with a complex coordinate string, creating a contrast between geometric abstraction and figurative line work. The visualization uses React and ReactDOM to manage the SVG output.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, semi-transparent circles is scattered across a black canvas, each with randomly generated positions and RGB colors. Overlaid on top is a stylized, line-art depiction of the Buddha’s face, built from a long SVG path with a thick stroke. The React components render the SVG elements, and the circle positions and colors are computed using JavaScript’s `Math.random()` within nested map functions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, semi-transparent circles is scattered across a black canvas, each with randomly generated positions and RGB colors. Overlaid on top is a stylized, line-art depiction of the Buddha’s face, built from a long SVG path with a thick stroke. The React components render the SVG elements, and the circle positions and colors are computed using JavaScript’s `Math.random()` within nested map functions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, semi-transparent circles is scattered across a black canvas, each with randomly generated positions and RGB colors. Overlaid on top is a stylized, line-art depiction of the Buddha’s face, built from a long SVG path with a thick stroke. The React components render the SVG elements, and the circle positions and colors are computed using JavaScript’s `Math.random()` within nested map functions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, colorful circles is scattered across a field, layered over an intricate, multi-line path drawing of a Buddha figure. The React application uses nested `Array.map` operations to render hundreds of semi-transparent SVG circles with random positions and RGB fill colors. The path data, defined in SVG `d` attribute notation, draws the Buddha’s outline with many Bezier curves, using `stroke-width` and a stroke color to make the shape visible. The entire composition is scaled and translated within an SVG canvas, combining generative randomness with a fixed, detailed line artwork.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of small, randomly positioned circles in varied colors overlays a large, intricate SVG line drawing of Buddha's face and shoulders. The circles are generated by nested React `Array.map` calls, with their coordinates and fill colors derived from `Math.random()`. The Buddha path is rendered with `stroke-width={5}` inside a transformed `<g>` element, creating an overlapping, semi-transparent visual collage against the black background.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of small, randomly positioned circles in varied colors overlays a large, intricate SVG line drawing of Buddha's face and shoulders. The circles are generated by nested React `Array.map` calls, with their coordinates and fill colors derived from `Math.random()`. The Buddha path is rendered with `stroke-width={5}` inside a transformed `<g>` element, creating an overlapping, semi-transparent visual collage against the black background.