Harshita Vairagade

Fork of Question 1

Question 1

This pie chart visualizes the top 10 car-producing countries in 2019, ranked by total production value. Countries are displayed as colored slices with a legend showing each nation’s name and its corresponding value in thousands. The chart is built using D3 v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for layout and coloring, with data loaded via `d3.csv` from a GitHub Gist. The legend includes circle markers and formatted text labels.

Harshita Question 1

This D3.js pie chart visualizes the top 10 car-producing countries for 2019, using a categorical color scale to distinguish each nation. The code loads CSV data from a Gist, aggregates the values, and renders the chart with SVG paths using `d3.pie` and `d3.arc`. A legend, built with `d3.scaleOrdinal` and custom text elements, displays country names and their production totals formatted in thousands.

Harshita Pie_Chart_Question1

Harshita Question1

Harshita Area_Chart_Question2

Harshita Pie_Chart_Question1

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, sourced from a GitHub-hosted CSV file. The chart uses D3 v5's `pie` and `arc` APIs to generate SVG path segments, with `scaleOrdinal` and `schemeCategory10` assigning colors. A legend, positioned to the right, lists each country with its corresponding color swatch and a dollar-formatted value, created using D3's `select`, `csv`, and `append` methods.

Fork of Pie_Chart_Question1

This fork renders a pie chart comparing the basic subscription cost of Netflix across ten countries, sorted in descending order. The visualization uses D3.js v5 APIs including `pie()`, `arc()`, and `scaleOrdinal` with `schemeCategory10` for color mapping. A legend displays each country's name and cost in dollars, formatted with a custom number formatter. Data is loaded asynchronously via `csv()` from a GitHub-hosted CSV file, and the chart is drawn as SVG within a React project, with mouseover events logging values to the console.

Harshita Pie_Chart_Question1

Activity 9

harshita Pie_Chart_Question1

Activity 6_Question 1

Activity 6 Question 1.1

This example renders a horizontal bar chart comparing the population of ten countries for the year 2000. The visualization uses React to construct SVG elements, with D3's `scaleBand` and `scaleLinear` functions mapping categorical country names and continuous population values to the chart's axes. The bars display a tooltip with the formatted population value. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, and `format`, and loads data asynchronously from a GitHub-hosted CSV file.

Activity 6 Question 4

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length in the Iris dataset, with each bubble’s size encoding petal length and its color distinguishing species. The visualization uses D3 v7, scaling linear axes with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for the scatterplot, and applies `d3.scaleOrdinal` with `d3.interpolateTurbo` for species colors. Interactive tooltips appear on mouseover via event handlers, while the SVG rendering includes a legend mapping species to their assigned colors.

Activity 6 Task 4

Activity 6 Task 4

Activity 6 Question 3

This scatter plot displays the relationship between horsepower and highway MPG across a car dataset, with each point colored by car make. Using D3 v6, the visualization fetches CSV data via `d3.csv`, maps values through `scaleLinear` and `scaleOrdinal` with `schemeTableau10`, and renders an SVG with circles, axes, labels, and a legend. Mouseover or interaction is not implemented; the chart relies solely on static visual encoding to communicate trends in vehicle performance and fuel efficiency.

Fork of Activity 6_Question1 1.2

This bar chart displays the population of the top 20 countries in 2010, ranked and sorted by country. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to an SVG canvas, rendering bars via custom `Marks`, `AxisBottom`, and `AxisLeft` components. The data is fetched from a CSV using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. Styling includes custom tick lines, fill colors, and a Poppins font.

Activity 6_Question1 1.2

This visualization displays a horizontal bar chart of the 2020 populations for the top 20 countries. The bars are ordered by country name along the y-axis, with population values extending along the x-axis using a scaleLinear range. The code relies on React hooks, D3 v5 scales (scaleBand and scaleLinear), and SVG rendering in JSX. Data is loaded from a remote CSV file via d3.csv, with tick formatting using d3.format to abbreviate large numbers.

Acitivity 6 Question 3

This example demonstrates how to combine D3 selections with ES6 modules to render dynamic text on a web page. Using the d3.select method, it targets a div element with the id "message" and updates its content with a string imported from a local module. The page also loads D3 version 5 via a CDN link and applies custom styling through a separate CSS file. The visualization showcases a minimal setup where data flows from a module export to a DOM element, highlighting basic D3 integration within a modular JavaScript architecture.

Activity 3 Task 3.2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis while encoding species identity through distinct symbol shapes. The chart includes labeled axes and a shape legend that identifies each species. The implementation uses D3 v7 modules, including `scaleLinear` for positioning, `scaleOrdinal` with `symbolsFill` for shape encoding, and custom axis and legend components built from reusable D3 selections. Data is loaded asynchronously via `d3.csvParse` from a remote CSV source, with numerical values coerced for plotting.

Activity 6 Task 3

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Each point is colored by species, using skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization uses D3's `scaleLinear` for axes and `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file via `d3.csv`, and circles are rendered as SVG marks using D3's `select` and `join` operations.

Activity 6 Task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica). The plot uses D3 v6, loading CSV data via `d3.csv` and creating a linear scale with `d3.scaleLinear` for both axes. The SVG visualization includes circles with fixed radius, axes generated by `d3.axisLeft` and `d3.axisBottom`, and misuses `rx` and `ry` attributes for circles. The plot is rendered full-window with margins, and axis labels are added as SVG text elements.

Activity 6_Task 3

Activity 6_task 3

This example displays the Iris dataset as a scatter plot in an SVG rendered with D3.js. It plots petal length on the x-axis and petal width on the y-axis, while encoding species types—setosa, versicolor, and virginica—through distinct fill colors (skyblue, lightgreen, and orange). The code uses `d3.csv` to load the remote dataset, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. Circle positions are computed via `scaleLinear` ranges derived from the data extent, and the circles are appended dynamically using `.join('circle')`. No interactive behavior is shown.

Activity 6_Task 3

This example displays a simple text message, “Hello VizHub!”, centered on the page with large typography. It demonstrates a basic VizHub template that loads D3 via UNPKG and uses the `select` function from D3 to target the `#message` div and set its text content. The code also showcases local ES6 module imports through `myMessage.js`. The styling is handled with CSS, setting the text alignment and font size.

Activity 6_Question2

Activity 6_Question2

This visualization depicts the distribution of the Iris dataset across three species, showing the percentage of each species. It employs a stacked bar chart to display the proportions, with each bar representing a species and colored segments for each species type. When hovering over a segment, a tooltip reveals the exact percentage. The code uses d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to construct the chart, with a custom tooltip for interaction. The visualization is rendered as SVG.

Activity 6_Task 2

This stacked bar chart shows the distribution of IMDb movie ratings across five genres, with each genre’s bar divided into five rating categories from "below 5.0" to "above 8.5" as proportions summing to 100%. Hovering over a segment reveals an exact percentage via a custom tooltip. Built with D3 v7, it uses `d3.stack()` for data transformation, `d3.scaleOrdinal()` for colors, and `d3.scaleBand()` for the genre axis, rendering as SVG from a CSV file.

Activity 6_Question 2

A horizontal bar chart displays the 2020 population estimates for 20 countries, ranked from largest population at the top to smallest at the bottom. The visualization uses React with D3 v5 utilities like `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Data is loaded from a remote CSV file via `d3.csv`, and each bar includes a tooltip showing its formatted population value. The chart is rendered as an SVG with labeled axes, including a formatted x-axis displaying values in billions.

Fork of Activity 6_Question 2

Activity 6_Question 2

A horizontal bar chart displays the 2020 population estimates for 20 countries, ranked from largest population at the top to smallest at the bottom. The visualization uses React with D3 v5 utilities like `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Data is loaded from a remote CSV file via `d3.csv`, and each bar includes a tooltip showing its formatted population value. The chart is rendered as an SVG with labeled axes, including a formatted x-axis displaying values in billions.

Activity 6_Task 2

Activity 6_Task 2

This example displays the population of 20 countries as a horizontal bar chart, with green bars and blue tick marks on a white background. The horizontal axis is labeled "POPULATION-2020" and uses a formatted scale that abbreviates large numbers. It is built with React and D3 v5, using `scaleBand`, `scaleLinear`, `max`, `format`, and `csv` to load and process the data from a GitHub-hosted CSV file. The visualization is rendered as an SVG, with axes and marks defined as React components.

Activity 6_Question1 1.2

A horizontal bar chart displays the population of 20 countries in 2020, with each bar’s length proportional to its population value and country names listed along the vertical axis. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` functions handling positioning. Population values are formatted in billions using `d3.format`, while the underlying data is loaded from a CSV file via `d3.csv`. The chart includes styled axes with blue tick lines and green bars, and hover tooltips show the precise formatted population values.

Activity 6_Task 1

Activity 6

This example demonstrates how to set up a minimal VizHub project using D3 v5 and ES6 modules. It dynamically updates the text of an HTML `<div>` element with the message "Hello VizHub!" using D3’s `select` function. The project showcases importing both external D3 APIs and local JavaScript modules, along with linking a separate CSS file for styling. The code initializes a variable and a regular expression, though these are not used in the rendering.

Activity 7_Task 1

Activity 6_Question 1-1.2

This visualization displays the populations of 20 countries in 2020 as a horizontal bar chart. It uses React to render SVG elements through helper components for axes and marks. D3’s scaleBand and scaleLinear map country names and population values, while csv from d3 fetches the dataset from a GitHub repository. Bars use a tooltip via the title element, and the x-axis labels are formatted with d3.format to abbreviate values.

Fork of Activity 6_Question 1-1.2

A horizontal bar chart displays the top ten countries by 2020 population, with bars extending rightward from a blue axis line and a green fill. The visualization uses React to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) mapping country names and population values. Data loads asynchronously from a GitHub-hosted CSV file via `d3.csv`, and tick labels format large numbers using `d3.format` with a custom 'B' suffix replacement.

Activity6_Question1

This example demonstrates a simple VizHub project that displays the text “Hello VizHub!” in the center of the page. It shows how to load D3 v5 from a CDN via script tag, import the `select` function from the `d3` module, and use a local ES6 module for the message string. The code sets the content of a `#message` div using D3’s `select().text()` method, with styling applied through CSS. It also includes unused variables, such as `f` and a regular expression, to illustrate basic syntax.

Activity 6_Task1

Activity 6_Task1

This example shows a horizontal bar chart of the 30 most populous countries from a 2020 dataset, using population values displayed on the x-axis and country names on the y-axis. The React-based visualization uses D3 v5’s `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `<rect>` elements via the `Marks` component. Data is loaded asynchronously from a CSV using `d3.csv`, with axes generated by `AxisBottom` and `AxisLeft` components. The chart includes formatted tick labels (e.g., converting billions) and a title, with green bars styled via CSS.

Fork of Activity 6_Task1

This horizontal bar chart displays the 2020 population for thirty countries, using green bars and blue axis lines. Built with React and D3 v5, the visualization loads data from an external CSV via the `csv()` function and renders as an SVG. The code defines custom components for axes and marks, using `scaleBand` and `scaleLinear` for positioning, with tooltips showing formatted population values.

Activity 7_Task1

Activity 7_Task1

Activity7_Task 1

This example demonstrates a minimal VizHub project that initializes a D3.js visualization within a React framework. It renders a fixed text message, “Hello VizHub!”, by importing the `select` API from D3 and a local ES6 module for the string. The page uses a Poppins font and defines custom styles for axis ticks, marks, and labels, though no actual chart data is processed. The code imports D3 version 5.11.0 via UNPKG and React 16.9.0, and the visualization is static with no interactive or animated behavior.

Activity7_Task 2

Activity7_Task 1

This example demonstrates a custom visualization built with D3 v5 and React, featuring a scatterplot with a bubble chart overlay. The code loads D3 via UNPKG and uses ES6 imports to organize components like custom axes (AxisBottom.js, Axisleft.js), a bubble element (Buddle.js), and proportional marks (Marks.js). The chart styles axis ticks and labels with a blue stroke and gray text, while data is imported through a local UseData.js module. The visualization highlights how to combine D3’s low-level primitives with React’s component structure for interactive web graphics.

Activity7_Task 1

This example demonstrates a minimal VizHub project that initializes a D3.js visualization within a React framework. It renders a fixed text message, “Hello VizHub!”, by importing the `select` API from D3 and a local ES6 module for the string. The page uses a Poppins font and defines custom styles for axis ticks, marks, and labels, though no actual chart data is processed. The code imports D3 version 5.11.0 via UNPKG and React 16.9.0, and the visualization is static with no interactive or animated behavior.

Fork of Activity7_Task 1

This example demonstrates the fundamental workflow of a VizHub project, showing how to import and utilize functions from external libraries within a React-based visualization environment. The code initializes a D3.js selection using the `select` API to target a DOM element, and also imports a custom message from a local ES6 module. The page renders a large, centered text message, with custom CSS styling applying a Poppins font and color scheme. The visualization serves primarily as a technical demonstration of D3 v5 integration through UNPKG and the use of modular JavaScript imports.

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

This visualization presents a dense, organic composition of overlapping Buddha-like forms rendered in a vibrant, multicolored palette. The artwork is generated procedurally in React, with an SVG canvas hosting hundreds of semi-transparent diamond shapes. Each shape is positioned using pseudo-random coordinates derived from a looping array, then filled with bright RGB colors and rotated 45 degrees, creating a layered, kaleidoscopic effect. The Buddha figure is overlaid multiple times in different colors, with each iteration scaled and translated, producing a rich, interwoven visual that blends generative geometry with figurative form. The green background and high-opacity shapes contribute to a saturated, almost psychedelic aesthetic.This gallery example shows a React-based data visualization that generates an intricate, colorful pattern of overlapping geometric forms. Built with SVG and rendered through React, the visualization layers hundreds of semi-transparent polygons in a systematic grid, each with randomized positioning, vibrant RGB coloring, and 45-degree rotations. The generative nature of the code produces a dense, kaleidoscopic texture across the canvas. At the center of this abstract composition sits a large, detailed Buddha silhouette, overlaid on top of the algorithmic geometry. The work is a remix in a long chain of "fork of... Buddha in colors" examples, exploring the tension between chaotic generative art and a recognizable central icon. The piece is titled "Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha." The visualization is implemented with React and renders as SVG, licensed under MIT. Rendering: 'react','svg' Source: v3 --- What is missing? Options: A. nothing missing. B. "Files" and "Data" and "Running" sections C. "Files" and "Running" sections D. "Data" and "Running" sections E. "Data" section F. "Running" section Choose the correct option.The correct option is **C. "Files" and "Running" sections**. The description includes metadata and a brief overview, but it omits sections for "Files" (which would list the project files like README.md, index.html, and index.js) and "Running" (which would explain how to run the project). Therefore, the answer is C.

5.1 Buddha

This visualization uses a green background and a large red “Buddha in colors” title to frame a densely nested composition of overlapping SVG polygons. Rendered with React and SVG, the piece generates 21³ polygon elements whose coordinates, colors, and rotations are randomly computed, producing a vibrant, chaotic field of shapes. At the center, a stylized Buddha silhouette—drawn as an intricate SVG path—sits as the focal point, contrasting the abstract, generative backdrop with a recognizable figurative form.

5 Buddha

A central, semi-transparent Buddha glyph is drawn five times at different scales and offsets atop a field of 900 randomly colored and positioned circles on a black background. The React app renders an SVG, mapping over a fixed numeric array to generate the scatter of dots while layering five overlapping Buddha path copies in a repeating pattern. The code uses React 16, D3-style path data, and stochastic color fills to produce the composition.