Monish Galla

PROJECT

Fork of Fork of Fork of Interactive Stacked Bar Chart

A forked interactive stacked bar chart displays job titles against their aggregated populations from 1980 and 2023, sourced from a merged dataset. The visualization uses D3.js version 6, rendering SVG rectangles. Color-coded bars for each year are grouped by job type, with tooltips showing the exact population values on hover. The chart employs D3's scaleBand for the x-axis and scaleLinear for the y-axis, with population data summed via d3.sum.

Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Circles with D3

Fork of Viz 1

Fork of SVG

This visualization uses a grouped bar chart to compare job title populations between 1980 and 2023. The code loads data from a merged JSON dataset via `d3.json()` and uses `d3.scaleBand()` for the categorical x-axis, `d3.scaleLinear()` for the y-axis, and SVG `<rect>` elements to render the bars. Hovering over a bar triggers an interactive tooltip that shows the job title and population value. The chart is built with the D3 library (v6) and rendered as static SVG with CSS styling for the legend and tooltip.

Fork of Circles with D3

This visualization presents salary data as a heatmap, using color intensity on a linear scale from light gray to blue to represent salary amounts in US dollars across job titles and company sizes. The SVG chart employs D3 v7 with `scaleBand` for the categorical axes and `scaleLinear` for the color mapping. Hovering over individual rectangles triggers a tooltip displaying the exact salary value, while a legend with axis ticks and color rectangles provides a visual reference for the salary scale.

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 runtime environment using a minimal "Hello World" visualization. A single `main` function exported from `index.js` receives a container DIV and renders styled text directly into its `innerHTML`. The code includes an interactive font-size widget that updates on Alt-drag, showcasing the platform's hot-reloading capabilities. No external libraries or data sources are used; the example relies solely on plain HTML and CSS within the container element.

Area Chart

This area chart displays highway fuel efficiency (MPG) by vehicle make, with a skyblue filled path showing the value distribution. The chart uses D3.js v7 with an SVG rendering approach, scaling categorical makes on the x-axis via `d3.scaleBand` and numeric MPG on a linear y-axis. The `d3.area` generator constructs the path, while rotated axis labels and `d3.axisBottom` and `d3.axisLeft` provide clear reading of the data, which is loaded asynchronously from a CSV file using `d3.csv`.

Pie Chart

This pie chart visualizes the distribution of a single category from a CSV dataset, showing the proportion of values across multiple person types. Built with D3.js v7, it uses `d3.csv` to fetch the data, `d3.pie` and `d3.arc` to compute and draw the slices, and `d3.scaleOrdinal` for the color scheme. A legend, generated alongside the chart, maps each slice to its corresponding type using the same categorical colors. The visualization is rendered as an SVG with a fixed 400x400 pixel canvas.

Pie Chart

This example displays a simple message, "Hello VizHub!", in large, centered text. It demonstrates fundamental VizHub capabilities, including loading D3 from a CDN and using ES6 modules to import code from local files. The code uses `d3.select` to set the text content of an HTML div element, and imports a constant string from a separate module. The visualization is rendered directly in the DOM using standard HTML and CSS styling.

Pie Chart

This pie chart shows the distribution of person types from a CSV file, using a color-coded slice for each category with labels and a corresponding legend. The chart is built with D3.js v7, using `d3.pie` to compute the arc segments, `d3.arc` for the path geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the color palette. Data is loaded via `d3.csv` from a GitHub-hosted source, and mouseover events log the person type to the console.

Fork of ICE-7 (Part-2) - Pie Chart

Activity6_PersonType

Activity 6_Question 4

Activity_Bubblechart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding fuel efficiency and color representing brand. Built with D3 v7, the SVG visualization uses d3.scaleLinear for axes and radius, d3.scaleOrdinal with d3.interpolateTurbo for categorical colors, and includes interactive tooltips on mouseover. A legend displays MPG values and make categories, with data loaded from a CSV file.

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code loads the CSV data from GitHub, uses `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for tick labels, rendering circles via SVG with `d3.select` and `.join`. Axis labels are added as SVG text elements, and the plot fills the full browser window.

Activity 6 _Task 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across five genres, showing the proportion of films falling into five rating brackets from below 5.0 to above 8.5. Each horizontal bar represents a genre, divided into colored segments corresponding to rating categories, with interactive hover tooltips revealing precise percentages. The visualization uses D3.js (v7) with SVG rendering, utilizing `d3.stack()`, `d3.scaleBand()`, and `d3.scaleLinear()` to construct the chart. Data is loaded from a CSV file containing genre and rating percentage columns.

Activity 6_Question 2

This stacked bar chart visualizes the distribution of movie ratings across six genres, using data from a CSV file. The chart shows the proportion of films falling into rating bands from "Below 5.0" to "Above 8.5" for each genre, with colors distinguishing the rating categories. Built with D3.js version 7, the visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color mapping. Hovering over any segment reveals an exact percentage via a tooltip, implemented with D3's mouseover events.

Activity 6 _Task 3.2

Activity6_Question4

This bubble chart visualizes correlations among engine power, torque, and fuel efficiency for 17 automaker brands using SVG circles. The x-axis maps average horsepower, the y-axis maps average torque, while bubble size encodes fuel efficiency and color distinguishes brand. Interactive tooltips display brand names on hover. The visualization uses D3 v7 scales (linear for axes and size, ordinal for color with interpolateTurbo), axis generators, and event listeners for tooltip positioning.

Activity 6_Question 4

This interactive scatter plot visualizes the Iris dataset, comparing sepal length against sepal width for three species. Each circle is colored by species using a d3.scaleOrdinal with d3.schemeCategory10, and interactive tooltips display the species name on hover. The visualization uses D3 v7 to create SVG elements, with axes, labels, and a legend generated through d3.axisBottom and d3.axisLeft. Data is loaded asynchronously from a CSV file via d3.csv.

Activity 6_Question 3.2

This scatter plot displays relationships between horsepower and torque for individual car models, with each point’s shape encoding the manufacturer. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` to render marks. A custom legend shows shape categories, while data loads asynchronously from a CSV file via `csvParse`.

Activity 6_Question 3

Activity 6_Question2

Activity 6_Question 1.2

Activity6_Question 1

Activity 6_Task 1

This bar chart displays the top 30 countries by population in 2020, using the D3 v5 library within a React framework. The visualization uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles with tooltips. Data is loaded via `d3.csv` from a GitHub repository, and axes are formatted with `d3.format`. The chart includes custom React components for axes and marks, with population values multiplied by 1,000 for display.

6 Buddhas

Six identical golden Buddha silhouettes, rendered as SVG paths, are layered over a background image of flowers. The React app maps over an array of numbers to generate six offset copies of the same path, creating an overlapping, translucent composition. The Buddhas are scaled and translated in a repeated grid, producing a rhythmic pattern across the 960×1000 canvas. The background image is loaded as an SVG image element, and the Buddha paths are drawn on top, blending the iconographic forms with the floral backdrop.

5 Buddhas

The visualization, titled "5 Buddhas," is a generative art piece rendered as an SVG using React. It displays five overlapping, colorful Buddha-like forms created from procedurally generated polygon vertices. Each Buddha is built from layered, semi-transparent geometric shapes that rotate and overlap, producing a dense, kaleidoscopic composition. The artwork combines stochastic point generation with vibrant RGB fills and rotational transforms, resulting in a dynamic and visually intricate piece. The rendering leverages React's component model to manage the repeated elements efficiently within an SVG canvas, set against a black background for contrast.