meenam1106@gmail.com

Ass1-Question1

A pie chart displays the count of employees from various industries, sourced from a CSV file. The chart visualizes data with colored segments and includes labels for values and a legend. The visualization uses D3 v5, with `d3.select`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to create the chart, and `d3.csv` to load the data. An x-axis and y-axis label are added for context, though the chart itself is not axis-based.

Apr 6, 2024

Activity6-Question4

This bubble chart visualizes life expectancy versus healthcare spending across several countries from 1970 to 1974, with each circle’s size and color encoding spending magnitude and country identity. The visualization uses d3.csv to load the dataset, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for country colors. Hover interactions trigger custom tooltips showing country, spending, and life expectancy values. The chart is rendered as an SVG with a legend for spending amounts, using d3.axisBottom and d3.axisLeft for axes.

Apr 5, 2024

Activity6-Question2-upd

This stacked horizontal bar chart visualizes the distribution of ratings across five streaming platforms, showing the percentage of content falling into each rating bracket from below 5.0 to above 8.5. The chart uses d3.stack() to compute the stacked segments, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the percentage x-axis. Tooltips provide exact percentage values on mouseover, and a color-coded legend identifies each rating category. The data originates from a CSV file listing OTT platforms and their rating proportions.

Activity6-Task2

This stacked bar chart shows the proportion of IMDb ratings within six movie genres, using percentages that sum to 1 for each genre. Hovering over a segment reveals the exact percentage for that rating band. The visualization uses D3 v7’s `d3.stack()` to build the stacked layout and `d3.scaleOrdinal` for color mapping, rendering to SVG. Tooltips are implemented with D3’s mouse event handlers, and data comes from a CSV file containing genre-level rating distributions.

Activity6-Task4

This interactive bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque, while its radius maps to highway MPG and color distinguishes the manufacturer. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for colors, and SVG animations for hover effects. A tooltip with mouse events displays the car make, and dual legends show the MPG bubble-size scale and the color-coded brands. Data is loaded from an external CSV file.

Activity6-Question2

This visualization shows health expenditure and life expectancy across multiple countries from 1970 to 2007, using a horizontal stacked bar chart where each bar represents a country and segments show annual spending contributions. The chart uses D3 v7’s `d3.stack()` to create the stacked layout and `d3.scaleBand()` for country positioning, with years mapped to colors via `d3.scaleOrdinal()`. Hovering over any segment triggers mouseover and mousemove events that display a tooltip with the exact spending value for that country-year combination. The data comes from a CSV file loaded using `d3.csv()`.

Activity6-question3

This interactive scatter plot visualizes the Titanic dataset, showing the relationship between passenger fare and age as individual steelblue circles. The visualization uses D3 v6 with an SVG rendering approach, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map the data. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with the chart sized to the full browser window and axes labeled "Age" and "Fare". The plot provides a straightforward view of fare versus age distribution across all passengers.

Activity6-QUES3

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length on the x-axis and bill depth on the y-axis. Points are colored by penguin species, with Adelie in skyblue, Chinstrap in lightgreen, and Gentoo in orange. The code loads CSV data using d3.csv, scales the quantitative variables with d3.scaleLinear, and renders circles via SVG joins. Axis labels are added with d3.axisLeft and d3.axisBottom, while additional data fields for flipper length and body mass are stored on each mark but not displayed.

Activity6-Task3

This D3.js (v6) scatter plot visualizes the Iris dataset, plotting petal length against petal width with circle marks colored by species. The SVG renderer uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and scales. The code loads CSV data from a GitHub URL, maps categorical species values to colors, and displays rotated axis labels. The chart omits a legend but differentiates setosa, versicolor, and virginica through skyblue, lightgreen, and orange fills, respectively.

Activity6-question3

This example displays a scatter plot of the Iris dataset, mapping petal length against petal width while color-coding points by species (skyblue, lightgreen, and orange). Data is loaded via `d3.csv` from a GitHub repository, and scales are created with `d3.scaleLinear` using `d3.extent`. The SVG circles are rendered with `d3.selectAll` and `.join`, while axes are added via `d3.axisLeft` and `d3.axisBottom`, with custom labels and styling.

Activity6-Task3.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, with the three iris species distinguished by different symbol shapes. The plot uses d3.scaleLinear for both axes, d3.scaleOrdinal with d3.symbolsFill to encode species, and includes axis labels and a shape legend. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csvParse, with numeric fields converted to numbers before rendering.

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into rating brackets from below 5.0 to above 8.5. The chart uses a horizontal layout with genres on the y-axis and percentage on the x-axis, where each genre’s bar is segmented by rating category. Hovering over any segment displays a tooltip with the exact percentage. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked data, `d3.scaleOrdinal` for color encoding, and SVG rendering. The data covers Documentary, Drama, Comedy, Romance, Animation, and Action genres, sourced from a local CSV file.

Activity6-Task2

This stacked bar chart visualizes the impact of movie genre on IMDb ratings, showing the proportional distribution of five rating categories within each genre. The chart uses a horizontal layout with genres on the y-axis and percentage on the x-axis, where each bar segment represents a rating bracket. D3.js v7 and SVG render the visualization, with a tooltip displaying exact percentages on mouseover. The code utilizes d3.stack for data transformation, d3.scaleOrdinal for color encoding, and d3.axisBottom for the x-axis, with data sourced from a local CSV file.

Activity6_Task2

A stacked bar chart reveals how movie rating distributions vary across genres, using data from a CSV file. Each horizontal bar represents a genre, segmented into five rating categories from below 5.0 to above 8.5. The visualization employs D3.js v7 with SVG rendering, using `d3.stack()` for the stacked segments and `d3.scaleOrdinal()` for color mapping. Hovering over any segment triggers a tooltip displaying the exact percentage for that genre and rating range. The chart includes a legend and axis labels with custom styling.

Activity6-Question1.2

This bar chart displays the populations of 20 countries in 2020, sorted alphabetically on the y-axis with a linear population scale on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub-hosted CSV, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` with `d3.max` for the quantitative axis. SVG rectangles render the bars, with axis ticks and labels drawn via custom components and `d3.format` for tick labels.

Activity6-Question1.1

This visualization displays the populations of ten countries for the year 2020 as horizontal bars, with a blue grid and green marks on an SVG. The React app loads CSV data via d3.csv, transforms the population values, and uses d3.scaleBand and d3.scaleLinear to position bars. Custom React components render the axes and marks, while d3.format with a '.2s' specifier converts tick labels to abbreviated units like "B" for billions.

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Activity6_Task1

This example demonstrates a minimal React and D3.js integration that imports local ES6 modules and D3 API functions. It renders a static text message into a div using `d3.select().text()` from the D3 v5 library, while the page styling is defined with Poppins font and inline CSS. The visualization shows how to combine React’s component structure with D3’s selection and DOM manipulation methods, and it loads D3 via UNPKG. No data visualization or interactive chart is present; instead, it focuses on basic module import patterns and styling.

Activity6

This example demonstrates a minimal web page that uses the D3.js library to dynamically display text content. The visualization shows the message “Hello VizHub!” centered prominently on the screen, rendered with large font styling. The implementation imports the `select` function from D3 to target the HTML element and set its text content. The page also showcases the use of local ES6 modules, importing a message string from a separate JavaScript file. The code includes a regular expression pattern and a variable, though these do not affect the visible output.

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

Apr 1, 2024

6 buddhas

The visualization displays six overlapping Buddha silhouettes in a dark void, each filled with a dense swarm of small, randomly colored circles. The composition relies on layered, semi-transparent shapes to create a sense of depth and organic motion. The code, built with React and ReactDOM, generates the SVG output by mapping over a nested array of values to place circles with random radial positions and RGB fills. The Buddha paths are defined as static SVG path data, while the circle positions and colors are computed procedurally at render time.

6 buddhas with flowers background

Six nearly identical Buddha silhouettes overlap in a vertical column against a photographic background of flowers. The composition uses a repeating triple-nested React map to generate a scattered field of semi-transparent dots behind a series of hand-coded SVG paths. Each path traces the same Buddha shape, positioned and scaled via SVG `transform` attributes. The visualization is built with React 16 and renders entirely as static SVG elements, with colors and dot positions derived from `Math.random()` calls. The flower image is loaded as a CSS `background-image` on the body element.

Fork of 5 buddhas

Five translucent buddha silhouettes are drawn as SVG paths, each transformed with a translate and scale, and overlaid to create a layered, overlapping composition. The paths are generated from a React application using the ReactDOM API. The visualization also renders a grid of small, randomly positioned and colored circles, created by nested map functions over an array. The chaotic circle placement and colorful fills suggest the work merges structured sacred imagery with procedural, generative randomness.

6 buddhas

Six buddha silhouettes, rendered as complex SVG paths, overlap in a grid pattern over a floral background image. Each path uses randomized colors with opacity and no fill, creating a dense, layered visual effect. The React app maps over arrays to generate multiple copies of the same path data, transforming each instance with translations and scales. The code imports React and ReactDOM, applying SVG elements directly within JSX to compose the final visualization.

5 buddhas

Five buddha silhouettes, drawn as SVG paths, overlap in a black field. The code generates a noisy backdrop of twenty random, translucent circles by cubing array indices and using `Math.random()` for positions. Each buddha path is rendered with React and `ReactDOM` within an SVG container, using inline `path` data and a five-pixel stroke. The composition creates a layered, abstract visual from repeated, identical religious iconography.

6 Buddhas

A generative visualization displays six overlapping Buddha silhouettes formed from colorful diamond shapes. Each polygon’s position, size, fill, rotation, and opacity are randomly derived from nested array iterations, producing chaotic, layered compositions on a black background. The piece is built with React and rendered as SVG elements, using inline JavaScript math and the `Math.random` API to generate procedural variation across the canvas.

5 buddhas

Five overlapping, brightly colored Buddha silhouettes form the central subject of this SVG visualization. Each Buddha is rendered as a complex path, filled with a solid color, and the group is scaled and translated. The background is black, and the overall composition is further obscured by a grid of randomly generated, semi-transparent, rotating polygons. The React application uses a nested array map to generate these overlapping shapes, with their positions, colors, and rotations determined by the `Math.random()` function.