188r1a0559@gmail.com

Assignment2_2

This visualization displays the growth of iOS users over time, using an area chart to show the trend from the data source. The chart features axes with labels, grid lines, and a title. The code uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.area for the area chart, all rendered as SVG. Data is loaded from a CSV file using d3.csv.

assignment2

Assignment2

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal measurements with color-coded species markers. Using d3.csv and d3.scaleLinear, it creates an SVG visualization that animates through different measurement combinations on the x-axis every few seconds via setInterval. The code employs d3.axisBottom and d3.axisLeft for axes, while a custom legend labels species categories. The reusable scatterPlot function, defined with D3’s module pattern, accepts configurable accessors and margin settings, allowing dynamic updates as the selected measurement column changes.

Assignment 2

Assignment2

This animated scatter plot visualizes the Iris flower dataset, cycling through four measurement combinations of petal and sepal dimensions. Colored circles represent three species (setosa, versicolor, virginica) with a legend and axis labels. The visualization uses a reusable D3 scatter plot module (`scatterPlot()`) with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Data is loaded via D3's `csv` parser from a GitHub-hosted CSV file, with the view updating every few seconds through `setInterval`. SVG circles and text elements render the animated chart.

Assignment 6

This animated scatter plot visualizes the Iris dataset, cycling through different x-axis assignments (petal width, sepal width, petal length, sepal length) to explore relationships between flower measurements. Points are colored by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3's `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` module, rendering SVG elements updated via `setInterval`.

123

activity6_question2

A stacked bar chart displays TV brand ratings across five percentage categories (below 2.0 to above 6.5), with each bar segmented by brand. The visualization loads data from a CSV file and renders SVG using D3 v7. It employs `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` to position and color segments, while mouseover events trigger a custom tooltip showing exact rating percentages.

Activity-6_question4

activity6_question 3

Activity6_tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position encoding horsepower on the x-axis and torque on the y-axis, while radius and color represent MPG and make, respectively. Using d3.v7, the chart loads data from a CSV, renders SVG circles with tooltips on hover, and includes a legend for circle size and color. Interactive features rely on event handlers for mouseover, mousemove, and mouseleave to display tooltips.

activity6_tutorial3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length. Points are color-coded by species using a shape-based legend, with axes labeled accordingly. Built with D3 v7, the visualization dynamically loads CSV data from GitHub and uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs for scaling and rendering. The code structure separates chart components into modular functions for axes, shape legends, and the main scatter plot, with a reactive state management pattern handling asynchronous data fetching and re-rendering on updates.

activity6_tutorial3

activity6_tutorial3

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange markers. The D3.js v6 code loads CSV data from a remote GitHub repository and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and position circles in an SVG. The visualization includes rotated axis labels for petal length and sepal length, with a fixed radius of 5 pixels for each circle.

activity6_tutorial3

This example demonstrates a minimal "Hello VizHub" visualization that displays a text message on a webpage. The application uses D3.js v5, imported via UNPKG from a CDN, to select and set the text content of an HTML div element. The code also showcases local ES6 module imports, bringing in a message string from a separate `myMessage.js` file. The page is styled with CSS to center and enlarge the message, though no data is rendered or visualized.

activity6_tutorial2

A stacked horizontal bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating category from “below 5.0” to “above 8.5.” The chart reads proportions along a linear percentage axis, using d3.stack to compute layer offsets and d3.scaleOrdinal with distinct colors for each category. Interactive tooltips appear on mouseover via D3 event handlers, showing the exact percentage for a given genre and rating segment. The example imports D3 v7 from UNPKG and renders the visualization as SVG, with axes formatted using d3.axisBottom and d3.axisLeft.

Actvity6_question1

This visualization shows population figures for ten countries in the year 2000 using a horizontal bar chart rendered with React and SVG. The code loads CSV data from a GitHub repository via d3.csv, processes the population column with a custom row function, and scales the bars using d3.scaleBand and d3.scaleLinear. Axis components generate ticks and labels, while the Marks component renders each bar with a tooltip showing the formatted population value.

Fork of Actvity6_question1.2

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population values on the x-axis using a linear scale. It loads data from a remote CSV file via D3’s `csv` function and renders the chart as SVG in React using local components for axes and marks. The bars are colored teal, and hovering reveals formatted population values via SVG `<title>` tooltips. The code imports `scaleBand`, `scaleLinear`, and `format` from `d3` to handle scaling and tick labeling.

Activity6_question1

This example demonstrates a minimal D3.js setup within the VizHub environment, showing how to load D3 from a CDN and render text into a page. The code imports the `select` function from D3 and uses it to set the text content of a div element, while also displaying a local ES6 module import. It illustrates basic DOM manipulation with D3’s selection API, along with optional CSS styling. The example primarily serves as a template for understanding D3 imports, local module structure, and simple SVG-less rendering.

Actvity6_task1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using SVG rectangles scaled by population values. The visualization loads CSV data from a GitHub repository via `d3.csv`, processes it with a row conversion function, and renders React components. The code uses D3 v5 scale functions (`scaleBand`, `scaleLinear`), `d3.format` for tick labeling (converting values to billions), and custom axis components that generate SVG tick marks and text labels.

Activity_task1

tutorial1

This example demonstrates a minimal VizHub project that renders the text “Hello VizHub!” in the center of the page. It shows how to import D3.js functions and local ES6 modules, using `d3.select` to set the text content of a specific HTML element. The code includes a regular expression and a CSS file for styling.

Budda question 3

A React and SVG application renders an ornamental Buddha silhouette as a repeating, partially overlapping pattern against a photographic background of flowers. The code defines two separate SVG path groups, each containing an identical complex path encoded with cubic Bezier curve commands and transformed with different translate and scale values to create the overlapping arrangement. The first path renders in violet and white, while a second copy uses different positioning and scaling. The background is set via CSS on the body element, and the React components are mounted to a root div using standard ReactDOM rendering methods.

Buddha

A dense field of randomly generated, multi-colored polygons forms an abstract, kaleidoscopic backdrop for a line-art Buddha silhouette. The composition combines generative chaos with a structured religious icon. Built with React and rendered as SVG, the code uses nested `Array.map` loops to create the polygons, applying random values for coordinates, fill colors, and rotation. The Buddha figure is a static `path` element with complex Bezier curve data, layered on top of the generative polygons.

Buddha

A dense field of randomly generated, multi-colored polygons forms an abstract, kaleidoscopic backdrop for a line-art Buddha silhouette. The composition combines generative chaos with a structured religious icon. Built with React and rendered as SVG, the code uses nested `Array.map` loops to create the polygons, applying random values for coordinates, fill colors, and rotation. The Buddha figure is a static `path` element with complex Bezier curve data, layered on top of the generative polygons.

Fork of Fork of Fork of Fork of Overlapping budda-iCE-4

The visualization displays a dense field of randomly generated, semi-transparent polygons overlaid on a fixed Buddha silhouette path. A grid-based loop constructs hundreds of triangles with randomized positions, colors, and rotations, while the SVG path renders the central figure. Built with React and ReactDOM, the code leverages inline SVG elements, including polygons and path data, to create the chaotic, overlapping composition on a black background.

Fork of Fork of Fork of Overlapping budda-iCE-4

This example displays a dense, layered visualization of overlapping Buddha-like shapes built from a hierarchical series of polygon mappings. The React application renders a large SVG canvas where nested iterations of map functions generate numerous semi-transparent polygons with random colors and opacity. A central Buddha path is positioned using SVG group transforms, while the CSS sets a black background. The code uses React and ReactDOM to manage the component structure and render the SVG output.

5 Buddhas

Five Buddhas shows a dense, abstract composition of overlapping, rotated colored rectangles scattered across a black canvas, layered with a single intricate vector path tracing a Buddha silhouette. The rectangles are generated procedurally in React, mapping nested arrays to produce hundreds of SVG `<rect>` elements with random positions, sizes, and RGB fill colors. This psychedelic grid incorporates the path data for the Buddha figure, transformed and scaled, creating a visual interplay between chaotic geometric noise and a recognizable religious icon. The visualization relies on React and ReactDOM to render the SVG scene directly in the browser.