m.maanvireddt761@gmail.com

Activity7_q2

This visualization displays BMI values across age groups using a smooth gradient-filled area chart. It loads data from a CSV file via d3.csv and maps BMI categories as either High or Normal based on a threshold of 25. The chart includes interactive hover effects using the bisector method, displaying tooltips with age, BMI, and category details. Gridlines and axis labels are generated using d3.axisBottom and d3.axisLeft, while the responsive hover line and marker are rendered with SVG elements.

Nov 6, 2024

Activity7_q1

This example shows the distribution of car classification categories (unacc, acc, good, vgood) as a pie chart with a legend. It uses D3.js to load CSV data, compute category counts, and render the chart as an SVG via `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` for color mapping. Percentage labels are placed on slices using a separate arc for label positioning, and the legend lists each category with its count.

Nov 6, 2024

Activity7

This animated scatter plot explores the Iris flower dataset, cycling through different combinations of sepal and petal measurements on the x- and y-axes. It uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the axes and positions. Circles are colored by species (setosa, versicolor, virginica) via a custom marker function. The visualization loops through four variable pairings using `setInterval`, updating the plot's scales and redrawing axis labels and legends.

Nov 5, 2024

activity6_q4

A bubble chart visualizes the correlation between movie rating ranges across six genres, plotting the percentage of ratings in the 5.0–6.5 range on the x-axis against the 7.5–8.5 range on the y-axis. Bubble size encodes the intermediate 6.5–7.5 rating percentage, while distinct colors identify each genre. The D3 v7 code uses `scaleLinear` for axes and sizing, `scaleOrdinal` for coloring, and includes interactive hover tooltips alongside axis labels and percentage-formatted ticks.

Oct 23, 2024

activity6_task4

An interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position encodes horsepower and torque, while its size maps to highway MPG and its color distinguishes different manufacturers. Built with d3.v7, the SVG visualization uses linear scales and includes interactive tooltips on mouseover. A legend displays both the bubble size scale and color-coded car makes. The data is loaded from a CSV file.

activity6_q3

This example shows the relationship between car horsepower and highway MPG using two coordinated visualizations. The scatter plot encodes car category (Economy, Standard, Luxury, Sports) with color via d3.scaleOrdinal, while the bar chart, rendered with Chart.js on a canvas, displays average horsepower grouped by car make, colored by brand category. The code loads data from bubblechart.csv using Papa.parse, with d3.v7 handling the SVG axes, scales, and scatter plot circles. The bar chart sorts makes by descending average horsepower.

activity6_task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length against petal length, with points shaped according to species. A custom shape legend identifies the three species. The visualization is built with D3 v7, using scaleLinear for axes, scaleOrdinal for shape encoding, and the axisBottom and axisLeft components. Data is loaded from a remote CSV and parsed with csvParse, while symbolsFill and symbol generate the point marks.

activity6_q3

This example demonstrates a minimal setup for a VizHub project using D3.js version 5, loaded via UNPKG. It displays the text "Hello VizHub!" in the center of the page, styled through a linked CSS file. The code imports the `select` function from D3 to target the `#message` div and sets its text content using a local ES6 module. It also showcases importing from local modules with the `myMessage.js` file, which exports the message string.

activity6_task3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species. The code uses d3.csv to load the data, d3.scaleLinear to map the coordinates, and d3.axisLeft and d3.axisBottom for the chart axes. Circles are drawn in SVG, with colors assigned to setosa, versicolor, and virginica. Extra attributes for sepal dimensions are also bound to each circle, though only petal dimensions determine their position.

activity6_question2

This horizontal stacked bar chart compares average horsepower, torque, and highway MPG for car makes, sorted by total performance. The Chart.js library renders the bar chart on an HTML canvas, using Papa Parse to load data from a CSV file. Color-coded segments, generated with increasing alpha values, distinguish the three metrics for each make.

activity6_task2

A stacked bar chart displays the percentage of movie ratings across five genres, with each bar segmented by rating categories from below 5.0 to above 8.5. The chart uses d3.stack and d3.scaleOrdinal with a custom color palette to build the SVG visualization. Hovering over a segment triggers a tooltip showing the precise percentage for that rating level within the genre. The data originates from a CSV file loaded with d3.csv, and the axes use d3.axisLeft and d3.axisBottom with a linear scale for percentages and a band scale for genres.

activity6_q1.-2

This visualization displays the populations of 20 countries for the year 2010 using a horizontal bar chart, with each bar's length proportional to its population. The data is loaded from a CSV file using D3's `csv` function and rendered as SVG rectangles via React's declarative syntax. The chart employs D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Formatting converts large numbers to abbreviated forms like "B" for billions, while tooltips show the exact values. Axes and bars are styled through CSS classes defined in the embedded stylesheet.

activity6_q1

This interactive bar chart uses a horizontal layout to display the population estimates of ten countries for 2010, sourced from a CSV file hosted online. The visualization, built with React and D3 v5, renders SVG rectangles whose lengths are proportional to each country's population value. The code employs D3's `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis, with formatted axis ticks and tooltips showing the abbreviated values.

activity6_question2

This example displays a simple "Hello VizHub!" message centered on the page using D3 v5. It demonstrates how to load D3 from a CDN, import functions like `select` from the `d3` module, and import a local ES6 module containing the message text. The code sets the text content of a `div` element via D3's selection API, while CSS styles control the large, centered typography.

Activity 6

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, using SVG rectangles rendered through a React component. The chart imports data from a CSV file hosted on GitHub, processing population values by multiplying the 2020 column by 1000. It uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with automatic tick generation via `xScale.ticks()`. The `format` API converts large numbers into abbreviated labels, and tooltips show precise values using the `title` element.

activity6_q1-2

This example demonstrates a minimal VizHub project that combines D3.js with ES6 modules to display a simple text message. The page loads D3 via UNPKG and uses the `select` function from D3 to update the content of a `div` element, setting its text to a value imported from a local module. The `message` constant is defined in `myMessage.js` and rendered with large, centered styling from CSS. It shows the basic workflow of importing D3 and custom modules in a browser-based visualization environment.

Activity 6

This example shows a horizontal bar chart comparing the 2020 population of 30 countries. The chart uses D3.js v5 scales to map country names and population values to the SVG canvas, with each bar's length proportional to its population. The bars are rendered as SVG rectangles, and hovering over a bar displays its formatted population value in a tooltip. The React application loads the data from a remote CSV file and uses D3's `scaleBand` and `scaleLinear` for positioning, with custom axis components for the bottom and left edges.

Activity 6

This example demonstrates how to load D3.js from a CDN and use its `select` API to update the text content of an HTML div element. It also shows the use of local ES6 modules for code organization. The visualization renders the message “Hello VizHub!” centered on the page, styled with CSS from an external stylesheet. The code includes a regular expression and a variable, though they do not affect the displayed output.

Activity6_Task3

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with the species of each flower indicated by a distinct symbol (circle, square, or triangle). A legend on the right identifies the species-to-shape mapping. The visualization is built using D3 v7, leveraging `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for the shapes, and D3's `symbol` generator to draw the marks. The data is loaded asynchronously from a GitHub-hosted CSV file, and the chart is rendered into an SVG canvas.

Activity6_Task4

This visualization uses a bubble chart to explore correlations between movie rating ranges across six film genres. Each genre is represented as a circle positioned by the percentage of ratings in the 5.0-6.5 range (x-axis) and the 7.5-8.5 range (y-axis), with circle size encoding the percentage of mid-range 6.5-7.5 ratings. The genre data comes from a CSV file embedded in the code. The visualization uses D3.js v7 scales and axes, with SVG circles, tooltips on hover, and a distinctive color scheme mapping each genre to a unique hue.

Activity6_Q2

This stacked bar chart visualizes average car performance metrics—horsepower, torque, and highway MPG—grouped by car make using Chart.js with data loaded from a CSV via PapaParse. The horizontal bars show each metric stacked in teal, red, and blue, sorted by total performance, with tooltips displaying exact values on hover. The data is aggregated by computing averages for each make from the bubblechart.csv source file, rendered on a Canvas element.

Oct 20, 2024

Activity 6_Q1

This example shows a horizontal bar chart of the populations of 20 countries in 2010, with a green fill for each bar and a tooltip displaying the formatted population value. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and the `format` function to abbreviate tick labels (e.g., “1.2B”). Data is loaded from a CSV via D3’s `csv` function, and custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the chart’s axes and rectangles.

Oct 20, 2024

6 buddhas

Six overlapping Buddha silhouettes form the centerpiece of this SVG visualization, rendered in vibrant, semi-transparent colors against a floral background. The composition layers repeated path data derived from a single Buddha shape, with each instance scaled, translated, and filled using randomly generated RGB values. Built with React 16.10, the visualization maps over nested arrays to generate multiple SVG path elements, while the CSS background image provides a contrasting botanical backdrop. The code imports React and ReactDOM, using JSX to construct the SVG canvas at 960 by 1000 pixels.

Oct 19, 2024

5 buddha

This visualization displays a dense field of small, randomly positioned polygons overlaid with a single large Buddha silhouette, rendered in bright, shifting colors on a black background. The polygons are generated from a nested array loop, with positions, sizes, and fill colors determined by repeated calls to `Math.random()`. The Buddha shape itself is drawn using an SVG `<path>` element, transformed and scaled into place. The piece is built with React, creating the SVG output through JSX, and uses the `react` and `react-dom` libraries for rendering.

Oct 18, 2024

5 buddas

Five translucent Buddha silhouettes emerge from a field of small, randomly placed diamond polygons, each figure rendered in a different color range. The overlapping shapes create a meditative, abstract portrait. The React application generates the background via nested map operations, while the Buddha paths are defined in SVG. Using React and react-dom, the code renders the SVG with a black background and high opacity values for the shapes.

5 buddas

Five layered Buddhas appear in an SVG built with React, rendered as overlapping outlined paths. Each path is composed of dense cubic Bézier segments that trace the figure’s profile. The sketchy, hand-drawn effect comes from `Math.random()` calls used to position hundreds of translucent, colored circles in a nested array, scattering them across the canvas. The React and ReactDOM libraries manage the component structure, while the black background and high opacity create a luminous, chaotic halo around the central icon.

5 buddas

Fork of 5 buddas

A grid of five nested loops renders hundreds of semi-transparent, randomly colored rectangles that rotate and drift across a black SVG canvas. The visualization uses React to generate SVG elements, with each rectangle’s position, color, and rotation determined by Math.random calls. Overlaid on this is a single large Buddha silhouette drawn as an SVG path, translated and scaled into the center. The code relies on React’s component model to map array indices to JSX, producing the layered abstract composition.

5 buddas

Five Buddha-like figures are drawn as white outlines across a black background. The composition is generated procedurally in React with a series of nested `map` operations that place hundreds of small, randomly colored and rotated square `rect` elements, creating a field of scattered pixels. The five main structures, which are the Buddha shapes, are rendered using a set of complex SVG path data that is scaled and translated into position, resulting in a repetitive, decorative pattern across the 960-by-1000 canvas. The entire piece is built with React and rendered directly to SVG.