praneeth7222@gmail.com

Question-2

This example displays a time-series area chart, tracking a single numeric value across dates in April 2024. The chart uses D3 v6 via UNPKG. It demonstrates parsing date strings with `d3.timeParse`, scaling axes with `d3.scaleTime` and `d3.scaleLinear`, and rendering a filled region using a `d3.area` generator applied to a path. The SVG output includes axis labels for Date and Value, and the code also showcases importing a local ES6 module.

question-1

This example displays a pie chart visualizing disease frequencies, with sample data showing counts for Hypertension, Diabetes, and Arthritis. The chart uses D3 v7 to generate arcs via `d3.pie()` and `d3.arc()`, with an ordinal color scale from `d3.schemeCategory10`. It renders SVG paths and includes a separate HTML legend built with D3 selections, listing each disease and its count. The code also demonstrates ES6 module imports and axis label placement using SVG text elements.

task9,10

taskk8_4

This example displays a bubble chart comparing seven countries by their GDP, life expectancy, and population. It loads data from a JSON file and uses D3 v7 scales (d3.scaleLinear for axes, d3.scaleSqrt for bubble radius) to map GDP to the x-axis, life expectancy to the y-axis, and population to circle size. The visualization is rendered as an SVG with sky-blue, semi-transparent circles and axis labels appended directly to the chart.

taskk8_4

This example demonstrates a minimal D3.js setup within VizHub, showing how to import D3 functions and local ES6 modules. The code uses `import { select } from 'd3'` to target the `#message` div and set its text content, while `myMessage.js` exports the string "Hello VizHub!" as the displayed message. The page renders a single centered heading with large typography defined in `styles.css`, supported by D3 v5 loaded from UNPKG. The example illustrates basic D3 DOM selection and text manipulation within a modular JavaScript structure.

taskk8_4

This example demonstrates a minimal D3.js setup within VizHub, showing how to import D3 functions and local ES6 modules. The code uses `import { select } from 'd3'` to target the `#message` div and set its text content, while `myMessage.js` exports the string "Hello VizHub!" as the displayed message. The page renders a single centered heading with large typography defined in `styles.css`, supported by D3 v5 loaded from UNPKG. The example illustrates basic D3 DOM selection and text manipulation within a modular JavaScript structure.

task8

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 37 car makes, with each bubble's position mapping horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and its color distinguishes makes. The chart includes an interactive tooltip displaying the car make on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and `d3.axisBottom` and `d3.axisLeft` for axes, rendering via SVG with animation on tooltip transitions.

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

task8

task8

task8

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

task8

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

task8

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying the text "Hello VizHub!" centered on the page. It shows how to load D3 via UNPKG and import both the `select` API from `d3` and a local ES6 module that exports a message string. The rendered output is a simple HTML page with CSS styling for the message element.

new

new

Fork of Hello VizHub

task8.4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Rendered as SVG circles, each bubble’s x-position maps to horsepower, y-position to torque, and radius to highway MPG, with colors assigned per make via `d3.scaleOrdinal` and `d3.interpolateTurbo`. Hovering reveals a tooltip showing the car make. The chart includes axes, labels, a size legend for MPG values, and a color legend, all built with D3 v7 and data from `bubblechart.csv`.

Task-8

Task-8

This scatter plot visualizes the IRIS dataset, displaying individual data points based on their x and y values. Each point is colored according to its species category, allowing viewers to see potential groupings. The visualization uses D3 v6, specifically calling `scaleLinear`, `extent`, `csv`, `axisLeft`, and `axisBottom` to load data from a GitHub URL and construct the SVG plot. Points are rendered as circles with a fixed radius, and both axes are labeled with green text to clarify the data dimensions.

Task-8

Task-8

This example visualizes the Iris dataset with a scatter plot, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to load data, position circles, and render axes as SVG, with data sourced from a GitHub-hosted CSV. Colors are assigned via a switch statement, and axis labels are added as SVG text elements.

TASK-8

This stacked bar chart visualizes the distribution of IMDb rating categories across six video game genres, using percentages that sum to 100% for each genre. The D3.js v7 code builds the horizontal bars with `d3.stack()` and `d3.scaleOrdinal` for color mapping, while hover interactions trigger tooltips showing precise percentage values via `d3.format`. The SVG rendering includes a linear x-axis for percentages and a band scale for genres, with data loaded from a CSV file displaying five rating brackets from below 5.0 to above 8.5.

Task-8

This bar chart displays the population of ten countries for the year 2020, with countries on the vertical axis and population values on the horizontal axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the spatial mapping. Data is loaded asynchronously from a remote CSV using D3’s `csv` parser, with population values formatted using the `format` function to abbreviate large numbers (e.g., “1.5B”). The chart includes blue axis ticks and labels, green rectangular marks, and tooltips showing the formatted population on hover.

Task-8

five buddha

Five Buddha is a generative React visualization that layers hundreds of randomly positioned, semi-transparent polygon glyphs over a hand-authored Buddhist figure. The piece uses an SVG canvas with a black background, where a 21×21 grid of diamond-like shapes is rendered with randomized coordinates and rotation, creating a dense, colorful field of overlapping forms. Each polygon's fill is derived from randomly generated RGB values with high intensity, and the low-opacity overlapping produces additive color mixing effects that shift between electric violets, warm oranges, and pinks. The Buddha path is centered and scaled atop this vibrant, chaotic ground, its intricate linework contrasting with the abstract noise. The work combines generative randomness with a sacred geometric motif, producing a visually rich composition that balances algorithmic chance with deliberate form.

dotted buddha

A meditative abstract portrait of the Buddha emerges from thousands of semi-transparent dotted polygons, rendered as overlapping diamond shapes in a dark field. Each point is positioned through nested iterations over an integer array, with randomized coordinates and vibrant RGB colors that create a shimmering, pixelated halo. The central figure is defined by a large SVG path—a seated Buddha silhouette—overlaid with a dense scattering of small, rotated diamonds. The piece blends generative randomness with a traditional iconographic form, resulting in a hypnotic, mosaic-like visual that balances chaos and calm. The high opacity and bright color palette against the black background give the image a luminous, stained-glass effect.