Skip to main content
Log in
1

19n81a0581sunny@gmail.com

@Sannidhi1112·18 public vizzes

Loading thumbnail…

Activity7-Q1

This interactive pie chart visualizes the distribution of total movie ratings by genre, sourced from a CSV file of movie ratings. A D3 v7 pie layout and arc generator create the slices, with an ordinal color scale distinguishing each genre. Hovering over an arc triggers a tooltip displaying the genre name and its aggregated rating. A legend on the right maps colors to genres, and the SVG chart uses static rendering with animation only for tooltip transitions.

Nov 7, 2024
Loading thumbnail…

Activity7_Q2

This area chart visualizes total movie ratings aggregated by genre, using a dataset loaded from a GitHub-hosted CSV file via `d3.csv`. The chart displays each genre on the x-axis with a rotated-axis label and total ratings on the y-axis, rendered as a filled purple area path generated with `d3.area()`. Circles mark each data point and reveal a tooltip on mouseover. The visualization employs `d3.rollup` to sum ratings and `d3.scaleBand` and `d3.scaleLinear` for axes, with SVG rendering and animated tooltip transitions.

Nov 7, 2024
Loading thumbnail…

Activity7-Q1

This interactive pie chart visualizes total movie ratings by genre, with a legend and tooltip for detailed values. The code uses D3.js v7, loading CSV data and aggregating it with `d3.rollup` and `d3.sum`, then generating arcs via `d3.pie` and `d3.arc`. A tooltip appears on mouseover, and the SVG is styled with CSS, featuring a color scale using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart is centered with extra space allocated for the legend, and the title explicitly states "Total Ratings by Genre."

Nov 7, 2024
Loading thumbnail…

Activity-7

This pie chart displays the distribution of Indian food types by count, sourced from a CSV file, using an SVG rendering. The visualization aggregates data with `d3.nest` and `d3.rollup`, then employs `d3.pie` and `d3.arc` to construct the slices. Interactive tooltips appear on mouseover, and a color-coded legend identifies each category. The chart is built with D3 v7 and uses a sequential color scheme for visual distinction.

Nov 6, 2024
Loading thumbnail…

Activity-6-Q3

This scatter plot shows the relationship between mean temperature and humidity in Delhi, with each point colored by humidity category (low, medium, or high). The data comes from the DailyDelhiClimateTest.csv file, and the visualization uses d3.v7 with SVG rendering. The code uses d3.csv to load the data, d3.scaleLinear for the axes, and d3.scaleOrdinal with a custom color range to categorize humidity levels. A legend identifies the three humidity categories.

Oct 23, 2024
Loading thumbnail…

Activity-6-Q4

This bubble chart visualizes layoffs across companies, plotting the number of employees laid off on the x-axis against the percentage of the workforce affected on the y-axis. Bubble size encodes the absolute layoff count, while color distinguishes companies, with a legend identifying each. The chart uses d3.csv to load data, d3.scaleLinear for axes, and d3.scaleSqrt for bubble sizing. Interactive tooltips display company details on hover. SVG circles render the data, with d3.axisBottom and d3.axisLeft providing labeled axes.

Oct 23, 2024
Loading thumbnail…

Activity6_Q2

This stacked bar chart displays automobile sales across a 12-month period, segmented by vehicle type (e.g., Supperminicar, Mediumfamilycar, Smallfamiliycar, Sports). The x-axis lists years, and the y-axis shows total sales, with each bar partitioned by color-coded vehicle categories via a legend. Built with d3.v6 and SVG rendering, the code uses `d3.stack()` to aggregate sales, `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and `d3.schemeSet2` for colors. It also includes hover tooltips showing exact sales values. The data originates from `historical_automobile_sales.csv`, which provides variables like price and recession indicators, though the chart focuses solely on sales counts. The visualization uses `d3.axisBottom` and `d3.axisLeft` for axes with rotated labels, and applies `d3.select` for DOM manipulation.

Oct 22, 2024
Loading thumbnail…

activity 6_Task 1

This visualization displays the population of 30 countries for the year 2020 as a horizontal bar chart. The chart uses SVG rendering within a React framework, leveraging D3 v5 utilities such as `scaleBand`, `scaleLinear`, and `format` for axis scaling and tick labels. Data is loaded from a CSV file via the `csv` function, with values multiplied by 1000. Tooltips, styled with a Poppins font, show population values in billions when hovering over each bar.

Oct 22, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and make, respectively. Hovering reveals the make name via a tooltip. Built with D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.interpolateTurbo`, and `d3.axisBottom`/`d3.axisLeft` to render SVG circles, axes, and legends from the CSV data.

Oct 22, 2024
Loading thumbnail…

Activity6_Task4

This example demonstrates how VizHub integrates D3.js with modern ES6 module syntax. It loads D3 v5 from UNPKG and uses the `select` function to update the text content of a `<div>` element, displaying the message "Hello VizHub!". The visualization also imports a local ES6 module to supply the message string, while a CSS rule centers and scales the text. The example primarily showcases basic DOM manipulation with D3 and modular JavaScript organization rather than data-driven rendering.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the relationship between sepal length and petal length for three iris species, using distinct D3 symbols to encode species identity. A custom shape legend identifies each species, while labeled axes provide context. Built with D3 v7, the visualization loads the Iris dataset via CSV, parses it, and renders the plot using modular functions for scatter plot generation, axis creation, and legend construction.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3

This visualization presents the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with circles colored by species (setosa, versicolor, virginica) and sized according to sepal dimensions. Using D3 v6, it loads CSV data via `d3.csv`, applies `scaleLinear` for axes, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The data source is a remote GitHub CSV file, and the plot uses a full-window SVG canvas with custom margins and styling.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3

This example demonstrates the fundamental workflow of a VizHub project: importing D3 and local ES6 modules to manipulate the Document Object Model. The code uses D3’s `select` function to target a specific `<div>` element by its ID and set its text content to a string exported from a separate `myMessage.js` module. The visualization renders a static, centered text message with large font sizing defined in an external CSS file, showing how to structure code across multiple files for a simple but complete web-based data application.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar normalized to represent 100% of ratings within a genre across five rating brackets. The visualization uses d3.stack() to compute stacked segments and d3.scaleOrdinal for color encoding. Hovering over any segment triggers a tooltip displaying the precise percentage for that rating level using d3.format('.2f'). The SVG-based chart renders categorical genres on a band scale and percentages on a linear axis, with data sourced from a CSV file.

Oct 22, 2024
Loading thumbnail…

activity 6-Q1.2

This horizontal bar chart displays the populations of 20 countries for 2010, sorted by country name along the y-axis with population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position the rectangles, while custom `AxisBottom` and `AxisLeft` components render the ticks. The data is loaded from a CSV file via `csv()` and formatted with `format('.2s')` to abbreviate large numbers (e.g., "1.2B"). SVG output is generated through React components, with hover tooltips provided by SVG `<title>` elements.

Oct 22, 2024
Loading thumbnail…

activity 6-Q1.1

This visualization is a horizontal bar chart showing the population of ten countries in the year 2000, ordered along a categorical y-axis and a linear x-axis. Built with React and D3 version 5, it uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numerical axis, and SVG rectangles for the bars. The code employs `d3.csv` to load data from a GitHub-hosted CSV file, with tick labels formatted using `d3.format` (e.g., converting "2.5G" to "2.5B"). Axes are rendered by custom components `AxisBottom` and `AxisLeft`, and each bar includes a tooltip showing the population value.

Oct 22, 2024
Loading thumbnail…

Buddha

The visualization depicts a meditative Buddha figure, composed of a dense cluster of abstract, randomly positioned rectangular primitives. The artwork is rendered as an SVG within a React application, using the React and ReactDOM libraries to generate hundreds of overlapping elements with randomized fill colors and opacity values. A detailed vector path outlines the Buddha's form, which is then transformed and scaled, creating a layered, generative composition against a floral background image.

Oct 18, 2024
Loading thumbnail…

Budhas

A colorful, generative composition of overlapping Buddha-like forms emerges from a grid of rotating, semi-transparent polygons rendered in SVG. The code builds this abstract, procedurally generated artwork via nested triple `A.map()` loops that produce hundreds of diamond shapes, each filled with randomized RGB colors and positioned using `Math.random()`. A separate, intricate SVG path containing a detailed Buddha figure is then layered over the chaotic background, creating a striking contrast between the structured, ornate line work and the vibrant, chaotic field of shapes. The visualization is built with React, which manages the SVG elements.

Oct 14, 2024