adityatrip9899@gmail.com

Activity_7.1.1_Question_1

This example shows web browser market share as a pie chart, with each slice labeled by browser name and a color-coded interactive legend listing share values. It loads CSV data from a GitHub Gist using `d3.csv`, converts the share column to numbers, and builds the chart with `d3.pie` and `d3.arc`. The SVG is generated with D3 v7, using `d3.scaleOrdinal` with `schemeCategory10` for colors and `arc.centroid` for label positioning.

Fork of Activity_7.1.1_Question_2

This chart visualizes monthly temperature data as an area chart, with a semi-transparent lightsteelblue fill beneath a steelblue line. The SVG output is generated using D3 version 7, positioning months on the x-axis and temperature in degrees Celsius on the y-axis. The code fetches data from a GitHub Gist via `d3.csv` and constructs the visualization using `d3.scaleBand`, `d3.scaleLinear`, and `d3.area`. Both axes include labels and tick marks, with the chart contained within a page that centers the 700x400 pixel graphic.

Activity_7.1.1JS

The visualization cycles through the four numeric columns of the Iris dataset—petal width, sepal width, petal length, and sepal length—as the x-axis, while keeping sepal length fixed on the y-axis. It renders an animated scatter plot using SVG circles, with colors mapping to species and a legend identifying each group. The code uses D3's `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function, and updates the axes and points via `setInterval`.

Question

This bar chart shows the top 10 most populous countries on Earth as of January 1st, 2024. The code uses D3.js with `scaleBand` and `scaleLinear` to map country names to the x-axis and population values in thousands to the y-axis. It imports data from the `@curran/un-population-estimates-2024` package, filters for country-type records, and sorts them in descending order to select the top ten. The `viz` function renders axes, labels, and rectangles to create the visualization.

Activity_7.1.JS

Fork of Activity6_Question_4

This fork of Activity6_Question_4 presents two visualizations: an SVG bubble chart of car makes comparing average torque, horsepower, and highway MPG, and an SVG scatterplot of countries plotting GDP per capita against life expectancy, with bubble size encoding population. The first chart uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.interpolateTurbo for color, and tooltip events. The second uses d3.scaleSqrt for radii and mouseover color changes. Both load data from CSV files (bubblechart.csv, Nation_General.csv) and render with d3.v7 into SVG elements.

Activity6_Tutorial_4

Activity_6_Question_3

This scatter plot visualizes the relationship between health status and hospital visits for three distinct communities. Built with D3.js v7, it encodes the "Health Status" and "Hospital Visits" dimensions along the y- and x-axes, respectively, with each community represented by a distinct color from `d3.schemeSet2`, as detailed in the legend. The chart uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Five sample data points are rendered as SVG circles, with axis labels added for clarity, and the visualization is drawn using an SVG canvas.

Activity6_task3

A scatter plot displays the Iris dataset, plotting petal length against petal width for three Iris species (setosa, versicolor, and virginica), with each species shown as a distinct colored circle (skyblue, lightgreen, and orange). The visualization uses D3 v6's `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data from a remote CSV, create a linear scale for both axes, and render the SVG chart. Points are drawn with 0.8 opacity, and the axes are labeled in green, with a title in red.

Activity6_Tutorial_3.2

This visualization is a scatter plot of Iris flower measurements, showing sepal length on the x-axis and petal length on the y-axis, with species encoded by point shape. It uses D3 v7 to render SVG marks with the `symbol` API for distinct shapes and a custom shape legend. The axes are generated via reusable functions from `d3-axis`, and data is loaded asynchronously from a remote CSV using `d3.csvParse` after fetching raw text from GitHub.

Activity6_Task2_Question_2

A stacked bar chart displays monthly sales totals for Electronics, Clothing, and Groceries across six months. Each bar segment represents a category’s contribution, with tooltips revealing exact values on hover and a color-coded legend identifying series. Using D3 v7, the visualization loads CSV data via `d3.csv`, constructs stacked series with `d3.stack()`, and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear through mouse events, while axes and legend are generated with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`.

Activity6_Task2

Fork of 2000_Population_20_Countries_Data_in_2010

This bar chart displays the 2010 population of 20 countries, sorted by country name along the vertical axis. The visualization uses React with D3 v5 to render SVG bars, with horizontal bar lengths representing population values. The code applies `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for abbreviating tick labels (e.g., converting G to B). Data is loaded asynchronously via `csv` from a GitHub-hosted CSV file. Tooltips appear on hover using SVG `<title>` elements, and axes include labeled ticks with custom styling.

2000_Population_10_Countries_Data

Activity-6 Task_1

This visualization presents a horizontal bar chart depicting the population of ten countries in the year 2000. The chart uses a green fill for the bars, with blue axis lines and gray tick labels. The data is loaded from a remote CSV file using d3.csv and parsed with a custom row function that multiplies the population value by 1000. The chart is rendered using React, with D3 v5 scales (`scaleLinear` and `scaleBand`) mapping the data to SVG rectangles, and the axes are drawn with `d3.axisBottom` and `d3.axisLeft` calls on a `<g>` element.

Activity_6_Task_1

This example demonstrates the minimal setup required to build a D3.js visualization within VizHub. It shows how to load D3 from a CDN and use ES6 module imports to combine local code with the library. The code imports the `select` function from D3 and a custom `message` string from a local module, then displays that message in a styled HTML div. It highlights the project’s foundational patterns for module organization and dependency loading, serving as a template rather than a data-driven graphic.

6 Buddhas

Six Buddhas overlap in a layered composition, each rendered as a distinct SVG path filled in black and outlined in white. The figures are arranged in a grid-like pattern, with varying scales and translations that create a sense of depth and repetition. Built with React and ReactDOM, the code defines an array of coordinates and uses SVG `path` elements inside `<g>` groups to position each Buddha. The paths are drawn from hardcoded `d` attribute data, with no external data source or interaction.

6 Buddhas_fork

6 Buddha

A colorful mosaic of hundreds of randomly placed, overlapping diamond-shaped polygons fills the screen, rendered as a dense, chaotic pattern. The visualization uses React to map over a nested array structure, generating SVG polygons with random coordinates, fill colors, and rotations. Each shape is drawn using the SVG polygon element, with its points, fill, and transform attributes computed dynamically from random values. The code relies on React's `map` function and ReactDOM to render the SVG output.

5 Buddhas

Buddha

This visualization displays a large, colorful Buddha-like figure constructed from thousands of overlapping, randomly rotated and colored square polygons rendered against a green background. The artwork is generated procedurally in React, using nested array mappings to create chaotic, semi-transparent shapes with random opacity and RGB fill values. The central Buddha silhouette is drawn as an SVG path, positioned with a transform and scale, while the surrounding polygon field adds a vibrant, abstract texture. The example uses React 16.10 and SVG rendering within a standard HTML container.

5 Buddha