Skip to main content
Log in
P

pogirimayoor@gmail.com

@Mayoor2581·17 public vizzes

Loading thumbnail…

AreaChart

This area chart visualizes employee entry counts throughout the day, with a smooth cardinal curve connecting data points along a band scale for time and a linear scale for entries. The SVG rendering uses D3 v7 with `d3.area()` and `d3.curveCardinal` to generate the filled path, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. Data is loaded asynchronously from a remote CSV file hosted on GitHub via `d3.csv`.

Apr 27, 2024
Loading thumbnail…

AreaChart

This example displays a bar chart comparing the quantities of ten different fruit categories, such as apples, bananas, and oranges. The chart uses a steel-blue fill for each bar, with a rotated x-axis label for readability and a linear y-axis to show quantity values. The visualization is built using the D3.js library, leveraging its `scaleBand` for categorical x-axis positioning, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` for generating the axis ticks. The chart is rendered as an SVG element within a simple HTML page.

Apr 27, 2024
Loading thumbnail…

D3Pie

This example visualizes monthly product sales data for Costco in New York as a pie chart. Each slice represents a product, with its size proportional to units sold, and is labeled with the corresponding value in thousands. A legend lists product names and their sales figures. The chart is rendered as SVG using D3 v5, creating the pie with `d3.pie` and `d3.arc`, coloring slices with `d3.scaleOrdinal`, and loading data from a raw GitHub CSV file.

Apr 27, 2024
Loading thumbnail…

Task9Q1

This pie chart displays the proportion of total sales for each item category in the Walmart sales dataset, loaded from a remote CSV file hosted on GitHub. The chart is rendered on an HTML `<canvas>` element using the Chart.js library, which is configured with a pie chart type, category labels from the third column, and sales totals from the seventh column of each data row. The visualization uses a fixed 450×450 pixel canvas with a set of semi-transparent background colors, and the chart is drawn with a non-responsive, non-aspect-ratio-preserving configuration.

Apr 27, 2024
Loading thumbnail…

Task4_tutorial8

A bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position encodes horsepower and torque, while its radius represents highway MPG, and its color distinguishes the manufacturer. The visualization uses D3 v7's `scaleLinear` and `scaleOrdinal` axes, and implements interactive tooltips that reveal the car make on hover. A legend demonstrates how bubble size maps to MPG values, and the chart is rendered as an SVG with animated transitions for tooltip visibility. Data is loaded from a local CSV file.

Apr 13, 2024
Loading thumbnail…

Task8_Tutorial4

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population for nine countries, using D3 v7 to load data from a CSV file. Circle size encodes population, position maps GDP and life expectancy, and color distinguishes countries via a categorical scale with interpolated turbo colors. Interactive tooltips appear on mouseover, and a legend explains population scaling. The visualization includes axes, labels, and is rendered as SVG with hover animations for enhanced clarity.

Apr 13, 2024
Loading thumbnail…

Task8_Tutorial3

This scatter plot of the Penguin dataset maps flipper length on the x-axis against body mass on the y-axis for individual penguins. Points are colored by species (skyblue for Adelie, red for Gentoo, and black for others), and the code also computes bill length and depth values but does not encode them visually. Using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom`, the SVG chart displays labeled axes and a title. The plot is generated from a remote CSV file fetched via `d3.csv`.

Apr 11, 2024
Loading thumbnail…

HumidityTutorial3

This visualization displays a scatter plot of the Iris Dataset, showing relationships between sepal and petal measurements with points colored by species according to a categorical color legend. It uses D3.js with `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `selection.join` for data binding. The code loads data from a CSV file and renders circles with labels, employing modular functions for axes and color legend creation.

Apr 11, 2024
Loading thumbnail…

Task8_tutorial3

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length. Each point is shaped according to the iris species—setosa, versicolor, or virginica—with a legend mapping shapes to species. Built with D3 v7, the code uses `scaleLinear` and `scaleOrdinal` to map data to positions and shapes, while `axisLeft` and `axisBottom` render the axes. Data is loaded via `fetch` and parsed with `csvParse`.

Apr 11, 2024
Loading thumbnail…

Task8_Tutorialo3

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). Using D3 v6, it loads CSV data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as SVG markers with attributes for radius and fill. The axes are generated with `axisLeft` and `axisBottom`, and custom text labels annotate both dimensions. The code also parses numeric fields and computes additional sepal-related variables, though these are not directly plotted.

Apr 11, 2024
Loading thumbnail…

Task8_Tutorial2

A stacked bar chart displays the daily time allocation for five people across categories like work, exercise, and leisure, with each bar segmented by activity and scaled from 0 to 24 hours. The chart uses D3 v7’s `d3.stack` to compute the stacked series, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for axes. SVG rectangles render the segments, with mouseover effects and a tooltip, while the data comes from an inline CSV file with genres as rows and activities as columns.

Apr 11, 2024
Loading thumbnail…

Task8_tutorial2

This visualization displays the daily hours spent by five people across five activity categories—work, exercise, socializing, chores, and leisure—as a stacked horizontal bar chart. The chart uses a linear x-axis for hours (0–24) and a categorical y-axis for each person, with interactive tooltips showing percentage values on hover. The example employs D3 v7’s `d3.stack` for data stacking, `d3.scaleBand` for the categorical axis, `d3.scaleOrdinal` for category colors, and SVG rendering with custom CSS for styling.

Apr 11, 2024
Loading thumbnail…

Task-8 Tutorial-2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, from documentary to action. Each horizontal bar is segmented into five rating categories, from “below 5.0” to “above 8.5”, with a mouseover tooltip revealing the exact percentage for each segment. The visualization is built with D3 v7, using `d3.stack` to create the stacked data, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.axisBottom` for the percentage scale. Data is loaded from a CSV file, and the SVG rendering includes a legend and axis labels.

Apr 11, 2024
Loading thumbnail…

Activity-8 Task 1

This chart displays the populations of twenty countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements through D3 scales, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The data is loaded as CSV from a GitHub repository, and the population values are transformed by multiplying the raw value by 1000. Tooltips show the formatted population value on hover, while the x-axis labels use a D3 `format` to abbreviate large numbers, such as replacing 'G' with 'B'.

Apr 11, 2024
Loading thumbnail…

Hello VizHub! - DV

This example displays a horizontal bar chart of the top ten countries by population in the year 2000. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `rect` elements via React. Hovering over a bar shows a tooltip with the population value formatted using D3’s `format`. The data is loaded asynchronously from a CSV file using `d3.csv`.

Apr 11, 2024
Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a layered mandala on a black background. The piece combines procedural geometry with a detailed SVG path, rendered through React components. A nested array loop generates hundreds of rotated diamond polygons with randomized positions and RGB fill values, while five copies of the Buddha path are scaled and translated across the canvas. The code imports React and ReactDOM, using JSX to declare SVG elements directly, with styling applied via inline CSS.

Mar 24, 2024
Loading thumbnail…

Budhaaaaaaaaaaaaa

This visualization generates a field of overlapping translucent circles, each with a random position and color derived from JavaScript’s `Math.random()`, arranged across a 960x1000 SVG canvas. The composition is overlaid with a large red path—a looping, organic stroke rendered from hand-coded coordinates—set against a black background. The piece juxtaposes generative randomness with a fixed, intricate vector form, creating a tension between chaos and structure. Built with React, the circles and path are rendered as SVG elements, with the path scaled and translated to anchor the composition.

Mar 23, 2024