ganeshrajuparmalla@my.unt.edu

Activity 6 - Question 4final

A D3.js bubble chart displays the relationship between television screen size, price, and vertical resolution, with each bubble's position encoding size and price, while its radius reflects resolution and color distinguishes brand. The visualization uses D3's scaleLinear for axes and bubble sizing, scaleOrdinal with interpolateTurbo for categorical colors, and interactive tooltips that appear on hover. Data is loaded from a local CSV file, and the animation-like transitions occur when tooltips fade in and out.

Apr 5, 2024

Fork of QUESTION3ACT6

This scatter plot visualizes the Iris dataset, showing petal length versus petal width as colored circles for three species (setosa, versicolor, and virginica). The code loads CSV data from a GitHub gist and uses D3 v6 APIs such as `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. Circles are rendered via SVG and colored by species with a switch-based marker function. The layout fills the entire browser window, with axis labels indicating petal dimensions, while sepal measurements are stored but not visually mapped.

Apr 4, 2024

questtion4activity6

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position maps horsepower and torque on the x- and y-axes, while its size and color encode highway MPG and manufacturer. Tooltips display the vehicle make on hover. Built with d3.csv and SVG, it uses d3.axisBottom, d3.axisLeft, d3.scaleLinear, and d3.scaleOrdinal, with d3.interpolateTurbo for coloring, and includes a legend for bubble size and make categories.

question-3

This scatter plot visualizes a dataset, mapping one attribute to the x-axis and another to the y-axis, with each point’s color representing a species category. The visualization uses the D3 library (v6) to load CSV data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders the points as SVG circles. Additional data fields for sales cost and rating are mapped to the circle’s `rx` and `ry` attributes, though they are not visually apparent in the default rendering. Axis labels are added using SVG text elements.

3questionactivity6

This scatter plot visualizes the Iris dataset, displaying the relationship between 'Number of Sales' on the x-axis and 'Book Price' on the y-axis, with points colored by book type (Fantasy, Science, and a default). The visualization uses the D3 v6 library, loading the data via `d3.csv` and creating the plot with `scaleLinear`, `axisLeft`, and `axisBottom`. The plot is rendered as an SVG, with circles positioned according to the scaled data values and colored based on the book category. The example is set up to use the full width and height of the browser window.

Question3activity6

This scatter plot visualizes the relationship between sepal length and petal length for different iris species, using distinct symbols to differentiate each species. The visualization is built with D3 v7, employing `scaleLinear` for the axes, `scaleOrdinal` and `symbolsFill` to assign shapes, and `symbol` to render the data points. A legend, created via `shapeLegend`, maps each species to its corresponding symbol. The data is loaded from a CSV file and rendered using the `scatterPlot` and `axes` functions.

activity6question2

This example shows how movie ratings vary across genres using stacked horizontal bars, where each bar segment represents the percentage of ratings falling into one of five rating brackets from below 5.0 to above 8.5. The visualization makes it easy to compare rating distributions across genres like Drama, Comedy, and Non-fictional works. Built with D3 v7, the chart uses d3.stack to compute the layered data and d3.scaleOrdinal for color encoding. Hovering over a segment triggers a tooltip showing the exact percentage for that genre and rating level, while the legend identifies each rating category.

activity-6question-1(2)

This chart displays the population of 20 countries in 2010 as horizontal bars. A D3.js linear scale maps population values to bar widths, while a band scale orders the countries. The visualization uses React and D3 v5 to render SVG directly, with a CSV data source. The custom axes and tooltip provide the population details.

Activity7question1

This bar chart displays the population of ten countries in the year 2000, with countries listed along the y-axis and population values along the x-axis. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Bars are rendered as SVG rect elements, with axis labels and tick marks styled via CSS. Data is loaded from a CSV file using D3's `csv` parser, with population values multiplied by 1000, and formatted using D3's `format('.2s')` to abbreviate large numbers.

Question-1Activity-6

This bar chart displays the top 10 countries by estimated 2020 population, sourced from a CSV file and rendered as an SVG with React. A horizontal layout uses `scaleBand` for country categories and `scaleLinear` for population values, with tick labels formatted via `format` to abbreviate large numbers (e.g., “B” for billions). The code imports D3 modules (`csv`, `scaleBand`, `scaleLinear`, `max`, `format`) and builds custom React components for axes and marks, using `useData` to asynchronously load and parse the dataset. Interactive tooltips are provided via SVG `<title>` elements within each rectangle.

Activity-6Task-4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car make, respectively. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and event handlers for tooltip interactions. Data is loaded from a CSV file and rendered as SVG with animated hover effects.

Activity6-Taks-3.2

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length and petal length on the x- and y-axes while using distinct symbols to encode the three iris species. The chart is built using D3 version 7 APIs, including `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, `symbolsFill`, and `symbol`. Axis generation and labels are handled by custom helper modules (`axes.js`, `shapeLegend.js`), which leverage D3’s `axisLeft`, `axisBottom`, and a symbol generator. Data is fetched as CSV from a remote source and parsed with `csvParse`.

Activity-6Tutorial-3

This scatter plot visualizes the Iris dataset, mapping petal length and width as point coordinates while encoding species with distinct colors. The chart uses D3 version 6, loaded via UNPKG, with a data pipeline that fetches CSV data and parses it with `d3.csv`. The implementation builds an SVG visualization using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes, while circles are rendered with size and shape variations based on sepal dimensions.

Activity-6Tutorial-3

This example demonstrates a minimal VizHub project that renders a centered “Hello VizHub!” message using D3.js. It shows how to load D3 v5 from UNPKG, import the `select` function from the `d3` module, and use a local ES6 module (`myMessage.js`) to supply the text content. The code sets the text of a `div` element via `select('#message').text(message)`, with styling applied through an external CSS file. No data source is used; the visualization is purely text-based.

Tutorial-2

A stacked horizontal bar chart displays the percentage distribution of IMDb ratings across six movie genres, using five rating bands from below 5.0 to above 8.5. The chart uses `d3.stack` to compute the layered segments and `d3.scaleOrdinal` with a custom color palette for each band. `d3.scaleBand` positions the genres along the y-axis, while `d3.scaleLinear` maps percentages on the x-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each genre-rating combination. Data comes from a CSV file loaded with D3 v7, rendered as SVG rectangles.

Activity-6_task-1

This bar chart displays the 2020 populations of 30 countries, sorted along a vertical categorical axis. The visualization uses D3 v5 scales to map population values to horizontal bar lengths and country names to vertical bands. The React-based SVG rendering includes custom axis components that generate tick marks and labels, with a green fill for each bar. Population data is loaded from a remote CSV file, and a tooltip showing formatted population values appears when hovering over each bar.

Activity-6

This example demonstrates how to set up a minimal D3.js visualization within the VizHub environment, displaying the text "Hello VizHub!" prominently in the center of the page. The code imports the `select` function from D3's API and a custom string from a local ES6 module called `myMessage.js`. The text is then rendered using D3's DOM selection and manipulation capabilities, with the styling controlled through an external CSS file. The example showcases the basic integration of D3 v5 and modular JavaScript.

background change

This example displays a colorful, flower-patterned background behind a detailed SVG rendering of a Buddha figure. The Buddha path is drawn using a large embedded SVG path element, positioned and scaled with a transform. The page uses React to render the SVG, with the background image and green color set via CSS on the body element. The visualization combines static SVG geometry with a photographic background image, creating a layered visual composition.

Apr 1, 2024

Dvq3

A dense field of randomly colored, rotated diamond polygons overlaps a single large Buddha outline rendered as an SVG path. The background is solid green. The code uses React to generate a 3D array of polygon elements, each with randomized coordinates, fill colors, and rotation transforms. The Buddha path data is hardcoded in the SVG `d` attribute. The rendering is done through ReactDOM into an SVG container.

Fork of Buddha changed

The visualization displays a dense, colorful field of rotated, semi-transparent polygons generated from nested loops over a numeric array, layered behind a large, intricate SVG path of a Buddha figure. The geometric background produces a randomized, chaotic texture, while the foreground Buddha path, traced in sharp detail, provides a contrasting focal point. Built with React, the SVG rendering uses nested `A.map()` iterations to create hundreds of polygons with random coordinates, fills, and a fixed 45-degree rotation, simulating an abstract, generative art piece. The Buddha path is rendered via an SVG `<path>` element, with a transform applied for scaling and positioning, demonstrating a hybrid of algorithmic pattern generation and structured vector illustration.

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

A colorful field of randomly positioned, semi-transparent circles overlays a large, detailed Buddha path drawn in SVG, creating a layered mixed-media effect. The circles are generated via nested React array maps, with positions based on pseudo-random values scaled by an array index. The Buddha figure is rendered as an SVG path element with a thick stroke, while the entire composition is built using React components and rendered into the DOM with ReactDOM.

Buddha fork

A generative Buddha illustration renders as a dense field of overlapping colored circles composited over a black-and-white SVG path tracing a seated figure. The circles are positioned using nested array maps with Math.random values for x, y, and fill color, creating a chaotic, layered texture. The Buddha path is drawn via a hand-coded `d` string with a visible stroke, while React manages the SVG elements and DOM updates. The piece combines algorithmic randomness with a fixed geometric form to produce a vibrant, abstract meditation on repetition.