pmanoj13053@gmail.com

Area Chart

This area chart visualizes the relationship between petal width and sepal length from the Iris dataset. The chart uses `d3.area` to generate a filled path with light blue fill, while `d3.axisBottom` and `d3.axisLeft` render the axes. The `d3.scaleLinear` scales map data coordinates to pixel positions. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart adjusts to fill the browser window with margins.

Pie chart

This pie chart visualizes the distribution of iris flower species from a remote CSV dataset, with each species represented as a colored slice and a matching legend. Built with D3 v6, the example uses the `pie` generator, `arc` generator, `scaleOrdinal`, and `schemeCategory10` to create the chart, while `svg` selections handle rendering. The code also demonstrates a reusable `pieChart` module with chained getter-setter methods, and the legend is drawn manually using appended `g` elements with rectangles and text labels, all styled with custom CSS.

Pie chart

This pie chart example displays a static visualization of categorical data using D3.js v5, rendered as SVG paths within an HTML page. The code loads D3 from UNPKG and uses the `select` function to target a div element, while also demonstrating ES6 module imports from a local file. It sets text content via `select('#message').text(message)`, showcasing basic DOM manipulation alongside the pie chart structure. The example emphasizes modular JavaScript organization and D3’s data-binding capabilities, though it does not include actual pie chart generation logic or a specific dataset.

Activity6_Q4

This interactive D3.js v7 scatter plot visualizes the relationship between fixed acidity and volatile acidity in a wine quality dataset. Each point represents a wine sample, colored by its quality rating (good, average, or bad) using an ordinal color scale. The visualization includes axis labels, a title, and hover tooltips that display the quality of each wine. The scatter plot uses SVG circles with mouseover interactions for tooltip display, and reads data from a CSV file to map the acidity values onto the chart.

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, using D3.js v7. Each circle’s position encodes horsepower and torque, while its radius scales with highway MPG, and color distinguishes the vehicle brand. The chart includes an interactive tooltip that reveals the make on hover, a legend for bubble sizing, and a color scale. The visualization is rendered as an SVG with smooth transitions, and the underlying data comes from a CSV file.

Activity6_Task4

This example uses a bubble chart to visualize automobile performance data from `bubblechart.csv`, plotting each car make’s horsepower, torque, and highway miles per gallon as an interactive scatter of scaled circles. The visualization is built with D3 v5, imported via `d3.select` from the UNPKG CDN, and loads local ES6 modules for its message display. The chart renders SVG circles whose sizes are tied to the dataset values, with axes encoded from the numeric columns.

Activity6_Question3(6)

This example shows the relationship between engine power and engine torque for different car makes, using symbol shapes to distinguish each manufacturer. The scatter plot encodes engine power on the x-axis, engine torque on the y-axis, and maps each make to a distinct symbol via `scaleOrdinal` with `symbolsFill`. A custom legend displays the shape-to-make mapping. The visualization includes axis labels generated with the `axes` module using `axisLeft` and `axisBottom`. Data comes from an external CSV file loaded with `csvParse`, and rendering updates dynamically via D3 v7’s join pattern.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Species are distinguished through different point shapes, with a legend identifying each species. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and `symbolsFill` for rendering. The code imports specific D3 modules like `axisLeft`, `axisBottom`, and `csvParse` to construct the chart and load data from a remote CSV file.

Activity6_Task3_Scatter plot

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: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization is built with D3 version 6.7, using the `csv` loader to fetch data from a GitHub gist, `scaleLinear` for axis scaling, and `select` to append an SVG to the body. The code renders circles via an append-and-join pattern and adds labeled axes using `axisLeft` and `axisBottom`.

Activity6_Q2(3)

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the percentage of films falling into rating levels from “Below 5.0” to “Above 8.5.” The visualization uses d3.stack and d3.scaleBand to structure the data, while d3.scaleOrdinal assigns colors from d3.schemeCategory10. Hovering over a bar segment triggers a tooltip displaying the exact percentage via d3.select and style opacity changes. The data comes from movie.csv, rendered as SVG elements with axes and labels styled through external CSS.

Activity6_Task2

This stacked bar chart visualizes the impact of movie genre on IMDb ratings by showing the percentage distribution of five rating categories for each genre. The data is loaded from a CSV file and processed using D3 v7’s stack function, with a linear scale for the percentage axis and a band scale for genres. Hovering over a bar reveals a tooltip with the exact percentage for that rating segment. The visualization uses SVG rendering, with a Safari-style color scale for the rating bands.

Activity6_Task2

This example displays the distribution of movie ratings across six genres, using proportional segments to compare the share of films in five rating bands from below 5.0 to above 8.5. The visualization loads data from a CSV file and renders the genre-ratio relationships as horizontal stacked bars, with each band’s width reflecting its proportion. The code imports D3 via `d3.v5` from UNPKG and uses the `select` API to update a DOM element with a greeting message, while the chart itself relies on the parsed CSV data to derive the displayed values. The page also demonstrates local ES6 module imports for a simple text message.

Activity6_Q1.2

This bar chart visualizes the 2010 populations of the top 20 countries from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering rectangles as SVG marks. A tooltip shows each bar’s exact value, and the x-axis labels are formatted using `format('.2s')` to abbreviate large numbers. The chart is styled with custom tick colors and a green fill, with axes and labels generated by the custom `AxisBottom` and `AxisLeft` components.

Activity6_Q1.1

This example shows a horizontal bar chart ranking the population of ten countries in the year 2000. The visualization uses React with D3 v5 to render SVG elements, with population values loaded from a remote CSV file and formatted using the `format` function from D3. The chart displays a custom axis with tick labels, uses `scaleBand` for the categorical country names, and `scaleLinear` for population values. Each bar includes a native SVG `<title>` element for tooltip functionality.

Activity 6_Task 1

This bar chart displays 2020 population estimates for 30 countries, sorted by country name on the vertical axis and proportional bar lengths on the horizontal axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the positional scales, while d3.csv loads the remote dataset. The code demonstrates a reusable axis and mark component architecture, with tooltips showing formatted population values via d3.format.

Activity 6_Task 1

This example demonstrates how D3.js version 5 can be loaded via UNPKG and used alongside local ES6 modules to dynamically update page content. It shows the ability to import specific functions like `select` from the D3 library, as well as custom local modules such as `message.js`, which exports a simple string. The code uses D3's `select` API to target a div element and set its text content, with styling applied via an external CSS file. It serves as a minimal starter template highlighting D3's modular import capabilities.

Fork of TASK BUDDHA

A fork of Task Buddha renders an ornate, curved SVG path of a Buddha silhouette over a full-screen background image of flowers. The path, drawn with a thick white stroke and violet fill, is generated from a static SVG path string and positioned via a transform. The visualization uses React to mount the SVG element, with the background image loaded from an external URL. Black page styling and a large message element frame the composition, while the code includes utility functions for cubic calculations but no interactive behavior.

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

Fork of TASK BUDDHA6

A Buddha silhouette rendered as an SVG path is layered over a photographic flower background, with the path filled in violet and outlined in white. The visualization uses React to manage the SVG elements, hardcoding the path data within a `<g>` transform that scales and positions the figure. The background image is loaded via an `<image>` href URL, and the path is drawn with a thick white stroke, creating a bold overlapping effect against the busy floral image. The code defines constants for canvas dimensions and a point radius, though no interactive behavior is implemented.

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

An overlapping Buddha emerges from hundreds of semi-transparent, randomly colored diamond polygons, each rotated 45 degrees and scattered across a black SVG canvas. Built with React and rendered as SVG polygons, the visualization layers chaotic geometric shapes using nested array maps to produce a dense, abstract composition. The code references a Buddha path silhouette but does not visibly render it, instead focusing on the generative randomness of position, fill color, and opacity. React manages the component structure, while the browser handles SVG rendering.

Question

This visualization renders a Buddha silhouette in overlapping, semi-transparent polygons on a black background. The SVG app draws thousands of randomly placed polygon shapes using nested `Array.map()` loops, each with randomized positions and vibrant RGB color values derived from `Math.random()`. The central Buddha figure is constructed from a detailed SVG `path` element, transformed and scaled to overlay the generative background. Built with React and ReactDOM, the example combines procedural color generation with a classical iconographic form.

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

An overlapping Buddha emerges from hundreds of semi-transparent, randomly colored diamond polygons, each rotated 45 degrees and scattered across a black SVG canvas. Built with React and rendered as SVG polygons, the visualization layers chaotic geometric shapes using nested array maps to produce a dense, abstract composition. The code references a Buddha path silhouette but does not visibly render it, instead focusing on the generative randomness of position, fill color, and opacity. React manages the component structure, while the browser handles SVG rendering.

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

A dense field of randomly positioned, semi-transparent SVG circles overlays a colorful line-art rendering of the Buddha. The circles are generated through nested React map functions, with each circle's coordinates, fill color, and opacity derived from `Math.random()`. The Buddha path is drawn using an SVG `path` element, styled with a thick stroke. The visualization is built with React and rendered as SVG, with the dark background and opaque, layered circles creating a visual contrast against the central figure.

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

This example renders a dense field of overlapping, randomly colored polygons atop a large SVG path of a Buddha. The polygons are generated through three nested loops over a sequence, each using `Math.random()` to determine position, size, and fill color, resulting in a chaotic, layered abstraction. The Buddha shape originates from a complex path `d` definition, scaled and translated via a `transform` attribute. The visualization is built with React, creating SVG elements directly, and includes a hard-coded, highly detailed path that provides a recognizable figurative anchor beneath the randomized geometry.

Fork of 5 fork budhas

This React and SVG visualization displays a field of 21 nested semi-transparent polygons, each with randomized positions and red-blue-purple color values generated from cubed indices. A single intricate Buddha silhouette path, defined by a large SVG `d` coordinate string, is rendered and scaled prominently at the center of the composition. Using React's `map` functions to generate the geometric elements, the piece contrasts chaotic procedural shapes with a precise, hand-coded vector figure. The black background and SVG rendering emphasize the colorful, overlapping forms.

5 fork budhas

The visualization displays five cube symbols rendered as SVG paths, overlaid with a 20x20 grid of randomly colored, semi-transparent polygons. Built with React and ReactDOM, the SVG elements are generated using nested array map functions that compute positions and fill colors via `Math.random()`. Each Buddha path is transformed with a scale and translate, demonstrating layered procedural composition within a minimalist black-background layout.

Fork of budha

This visualization shows a portrait of Buddha created using layered, randomly-positioned polygons against a dark background. The code generates a grid of semi-transparent, multi-colored polygons across the entire canvas, then overlays a detailed SVG path that traces the Buddha’s silhouette in the center. The React application uses `ReactDOM` to render the SVG, with JavaScript’s `Math.random()` controlling the polygon placement and fill colors, while the path data defines the figure’s contours. The piece combines procedural chaos with a fixed, intricate vector drawing.

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

A decorative visualization of an overlapping Buddha figure rendered in vivid, randomized colors. The code uses React to render an SVG, layering a repeating polygon pattern alongside a detailed Buddha path, each element filled with randomly generated RGB values. The Buddha path is drawn at a fixed scale and position, while the background polygons are generated through nested array mappings. The visualization is built with React 16.10 and uses SVG elements, with the entire composition set against a black background.