harshabandi3060@gmail.com

d3 v3

This visualization presents a grouped bar chart of daily air quality measurements from a single monitoring station in Phoenix, Arizona, showing mean concentrations for NO2, O3, SO2, CO, and the AQI. Built with d3.js v6, it loads data from a local CSV via `d3.csv`, parses dates with `d3.timeParse`, and uses `d3.scaleBand` for both the date and pollutant groupings. The interactive tooltip appears on mouseover, and the chart uses `d3.axisLeft` and a rotated `d3.axisBottom` with `d3.timeFormat` for clear temporal labeling.

Fork of Fork of Hello VizHub

This visualization shows daily air quality measurements from a Phoenix EPA monitoring site, comparing mean concentrations of four pollutants (NO₂, O₃, SO₂, CO) and an overall AQI value across dates in early January 2000. It renders as a grouped bar chart using D3 v6, with `d3.scaleBand` for the date and pollutant groupings, `d3.scaleLinear` for the y-axis, and `d3.schemeSet2` for categorical colors. Hovering over bars triggers a tooltip via D3’s mouse events. The SVG chart loads data from a CSV file, parsing dates with `d3.timeParse` and formatting axis ticks with `d3.timeFormat`.

d3 vz 2

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

D3 viz 1

This visualization shows daily air pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix, Arizona, using data from January 2000. Multiple time-series lines are drawn in an SVG, with each pollutant assigned a distinct color via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.csv` to load the dataset, `d3.timeParse` to convert dates, and `d3.line` to generate the paths. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and a legend is placed at each line’s final data point.

Fork of Fork of Hello VizHub

This example visualizes daily air-pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix using D3 v6. It renders an SVG multi-line chart, with each pollutant line colored by a categorical scale and labeled near its final data point. The code loads data from a local CSV, parses dates with `d3.timeParse`, and generates paths with `d3.line`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Fork of Hello VizHub

This scatterplot visualizes NO2 mean levels over time using air pollution data loaded from a GitHub-hosted CSV. The view uses an SVG with D3 v7 to render blue circles for each data point, with time-based x-axis and linear y-axis. Code demonstrates D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for chart construction, plus mouseover tooltips via D3 selections. The example also showcases importing D3 via UNPKG and local ES6 modules, as in the original Hello VizHub template.

Activity 7 Question 1

This example demonstrates how to display a static text message using D3.js and ES6 modules. The code imports the `select` function from D3 and sets the text content of a `div` element to “Hello VizHub!”. It also imports a local module to supply the message string and defines a regular expression and a numeric constant. The HTML loads D3 from a CDN, includes a CSS file for styling, and bundles the JavaScript within the page structure.

Activity 7 Question 2

This area chart displays the average BMI across 5-year age bins, based on a diabetes dataset from a GitHub repository. The visualization groups individuals by age and calculates the mean BMI for each group, showing the relationship between age and body mass index. Built with D3.js v6, the chart uses `d3.rollups` to bin data, `d3.mean` for aggregation, and `d3.area` to generate the filled path. SVG axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with linear scales mapping age and BMI values.

Activity 7 Question 1

Activity 7 Practice

This interactive iris scatterplot cycles through flower measurements on the x-axis using a `setInterval`. It loads CSV data from a GitHub gist and uses `d3.csv` for parsing, `scaleLinear` and `d3.axisBottom`/`axisLeft` from D3 6.7.0 to build axes. A custom ES6 module `scatterPlot` structures the reusable plot, while circles are colored by species (setosa, versicolor, virginica). The SVG animation rotates axes across petal and sepal dimensions, with dynamic axis labels, a legend, and a title rendered via `d3.select` and `.append`.

Activity6_Task1_Question1.2

This bar chart displays the population of 20 countries in 2020, sourced from a CSV file and sorted alphabetically on the y-axis. The visualization uses React with D3.js v5, rendering SVG rectangles scaled by a linear x-scale and a band y-scale. A tooltip on each rectangle shows the formatted population value (e.g., “1.2B”), while the bottom axis labels use a D3 format function. The chart includes custom axis components for ticks and labels, with a loading state while the data is fetched asynchronously via `d3.csv`.

Activity6_Task1_Question1.1

This chart displays the top 10 countries by population in 2020, using a horizontal bar chart rendered as SVG elements. Population values are loaded from a CSV file and formatted with SI prefixes, converting gigabytes to billions for readability. React manages the component state, while D3's `scaleBand` and `scaleLinear` position the bars, with the `Marks` component generating each rectangle. Axes are created through custom `AxisBottom` and `AxisLeft` components, and the chart includes a native SVG tooltip showing the population value on hover.

Activity6_Task4_questionNo.4

This bubble chart compares Pokémon battle stats by plotting each creature’s total stats on the x-axis against its attack power on the y-axis. Circle size encodes HP, while color represents primary type using `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization uses `d3.csv` to load data and renders an SVG with `d3.axisBottom` and `d3.axisLeft`. A legend identifies type colors, and `d3.scaleSqrt` determines bubble radii. Data comes from a local CSV file containing stats for 151 Pokémon.

Activity6_task4

This example demonstrates a minimal D3.js setup within VizHub, displaying a centered “Hello VizHub!” message. It shows how to load D3 from a CDN via UNPKG and use ES6 module imports for both the D3 library and a local module. The code uses `select` from D3 to set the text content of an HTML div element, while a separate `myMessage.js` file exports the message string. The page also includes basic CSS styling for the message text.

Activity6_task3_Question3

This visualization shows the relationship between total bill amount and tip amount for restaurant customers, using different symbols to distinguish between male and female diners. The scatter plot is rendered as an SVG using D3.js v7, with square markers representing male customers and circle markers representing female customers. The chart loads data from a CSV file using d3.csv, scales the axes with d3.scaleLinear, and generates the symbol shapes using d3.symbol with d3.symbolSquare and d3.symbolCircle. A color-coded legend displays the gender mapping.

Activity6_Question2

Activity6_Task1_Question1.2

This visualization displays the population of 20 countries in 2010 using a horizontal bar chart. The length of each green bar encodes the population value, with the country names listed along the vertical axis and a formatted numeric axis along the bottom. Built with React and D3 v5, the chart scales the data with `d3.scaleLinear` and `d3.scaleBand`, renders marks as SVG rectangles, and formats tick labels using a custom `format('.2s')` function that converts values to billions. The dataset is loaded asynchronously from a GitHub-hosted CSV file via D3’s `csv` function.

Fork of Activity6_Task1_Question1.1

Activity6_Task4_questionNo.9

This bubble chart visualizes Pokémon battle stats, plotting each creature’s Total stats on the x-axis and Attack on the y-axis, with bubble size encoding HP. The D3 v7 code uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to color points by Type_1. A legend maps fifteen Pokémon types, while axis labels and an SVG render from `data.csv` loaded via `d3.csv`.

Activity6_Task4

A bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position reflects horsepower and torque, while its radius encodes highway MPG, and its color distinguishes the manufacturer. The visualization includes a tooltip that displays the car make on hover, a legend for MPG values, and a color-coded list of makes. Built with D3.js v7, the chart uses SVG, linear scales, and ordinal color scales to render the animated and interactive data.

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s horizontal position encodes horsepower, its vertical position torque, and its size reflects highway MPG, while color distinguishes the manufacturer. The visualization uses D3.js v7 with SVG rendering and interactive tooltips that display the car make on hover. Animated transitions are applied to the tooltip’s opacity. The chart includes a legend for bubble size values (20 and 40 MPG) and a color-coded list of makes, all positioned with fixed coordinates. Data comes from a local CSV file.

Activity6_task3_Question1

Activity6_Task3.2

Activity6_Task3

Activity6_Question3

This stacked bar chart visualizes the average sepal and petal measurements for three Iris species (setosa, versicolor, virginica) using D3.js v7. It shows how each species’ total measurement is composed of four attributes, as aggregated from the provided iris.csv data. The visualization uses d3.stack for data transformation, d3.scaleBand and d3.scaleLinear for positioning, and renders via SVG. A color-coded legend identifies each variable, and the d3.axisBottom and d3.axisLeft functions create the labeled axes.

acccc

This stacked bar chart shows sales of three products (A, B, and C) across four regions (North, South, East, West). Each bar segments total regional sales by product using a color scale. The visualization uses `d3.stack()` to compute the stacked series, along with `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()`. It renders SVG rectangles with x- and y-axes generated via `d3.axisBottom()` and `d3.axisLeft()`. A legend identifies the product colors. Sample data is hardcoded in the script, and the chart is sized at 600×400 pixels with specified margins.

Fork of Activity6_Task2

Activity6_Task2

This example demonstrates a minimal VizHub project that loads D3 and displays a static greeting message in a web page. It shows how to import D3 API functions and local ES6 modules, then uses `select` from d3.v5 to set the text content of a `div` element. The page includes a CSS stylesheet for centering and scaling the message, while the message text comes from an exported local module. The code also shows unused variable and regex declarations, but the visible behavior is limited to rendering the text.

Fork of Activity6_Task1_Question2

This bar chart displays the population of the top 20 countries in 2020, with countries listed on the vertical axis and population values on the horizontal axis. The visualization uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping data to positions. Each bar’s width reflects the population value, and hovering reveals a tooltip via the SVG `<title>` element. Data is loaded asynchronously from a GitHub-hosted CSV using D3’s `csv` function, formatted with `format('.2s')` to abbreviate large numbers. The chart includes custom axis components for bottom and left ticks.

Activity6_Task1_Question2

A horizontal bar chart ranks the populations of 20 countries in 2020, using D3 v5 within a React component. The visualization encodes population values as bar lengths along a linear scale, with country names on a band scale for the y-axis. SVG rendering displays the bars, while D3's `scaleLinear` and `scaleBand` manage the axes. The bottom axis is formatted using D3's `format` with a `.2s` specifier to abbreviate values, and the data is loaded as CSV from a GitHub repository.

Activity6_Task1_Question1

This example shows a horizontal bar chart ranking the populations of ten countries for the year 2020, using data loaded from a CSV file hosted on GitHub. The visualization uses React and D3 v5, with `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements drawn via `Marks`. Axes are rendered with custom `AxisBottom` and `AxisLeft` components, while tick labels use D3’s `format` with `.2s` notation to abbreviate values to billions. The chart displays “POPULATION-2020” as its axis label.

Activity6_task1

This bar chart displays the 2020 population estimates for 30 countries, ranked from largest to smallest. It uses a horizontal layout where the bar length encodes population values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file via the `csv` function and rendered as SVG rectangles.

New Fork of budha

Fork of budha

This example displays a dense, chaotic arrangement of semi-transparent, randomly colored SVG polygons scattered across a black background, with a single detailed Buddha-like path traced in white at the center. It uses React and ReactDOM to render the SVG elements, generating triangles with random coordinates, colors, and rotations from nested array iterations. The central figure is drawn using an explicit SVG `<path>` element with a long, complex geometry, layered over the abstract polygon field.

Fork of budha

A decorative Buddha-like figure is rendered as the central focus of the visualization, drawn with SVG paths that trace intricate, curving lines to form the face and body. The code uses React to generate and manage the SVG elements, with multiple nested `<g>` transformations that scale and position the paths to create a layered composition. A background image of a flower is displayed behind the drawing using CSS `object-fit`, while the figure itself is styled with thick white strokes and black fills on a black page, giving the artwork a high-contrast, mandala-inspired appearance. The visualization is static, with no interactive or animated elements.

Fork of budha