venkataravitarunelisetty@my.unt.edu

Assignment-2(Question-1)

This example shows the proportion of total car sales by model type as an SVG pie chart, with a legend on the right. It loads car sales data from a CSV file and aggregates units sold by model using `d3.rollup` and `d3.sum`. The chart uses `d3.pie` and `d3.arc` to generate the slices, with labels placed via `arc.centroid` and colors from `d3.scaleOrdinal` with `d3.schemeCategory10`.

Apr 11, 2024

QUESTION-4(TASK-4)

This bubble chart visualizes product sales across three regions, with Europe on the x-axis, Asia on the y-axis, and North America represented by bubble size. Each circle’s color distinguishes a product category, and hovering reveals exact sales figures via a tooltip. Built with D3 v7, the code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded from a CSV file using `d3.csv`, and the SVG is rendered with axes, labels, and interactive event handlers.

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG and its color distinguishes the manufacturer. The visualization uses D3 v7 with SVG rendering, including tooltips on mouseover and a custom legend for bubble size. It reads data from a CSV file and employs simple d3.scaleLinear scales for positioning and sizing.

QUESTION-3 (TASK-3)

This scatter plot visualizes the relationship between leaf length and leaf width for 150 plants, with points colored by plant type (Type A, Type B, or other) using light green, blue, or yellow. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` to draw the labeled axes. Circle radii are fixed at 5 pixels, and the plot fills the entire browser window.

Activity6_Task3

This example uses a scatter plot to visualize the Iris dataset, displaying petal length and petal width on the axes while coloring each point by species (setosa, versicolor, virginica). The D3 v6 code loads CSV data via the `csv` function, maps sepal and petal measurements using `scaleLinear` and `extent`, and renders the plot with SVG circles. It creates axes using `axisLeft` and `axisBottom` and adds data-driven colors, providing a clear comparison of species clusters in the flower measurements.

Activity6_Task3.2

This scatter plot displays the relationship between sepal length and petal length for three iris species, using distinct symbols to differentiate each species. The visualization loads the Iris dataset via a remote CSV, parses it with `d3.csvParse`, and renders it as SVG paths generated by `d3.symbol` and `symbolsFill`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while a custom legend maps species names to shapes using `d3.scaleOrdinal`. The chart updates reactively through a `setState` pattern, fetching and parsing the data asynchronously on initial load.

Activity6_Task3.2

This example greets the viewer with a simple, text-based message. It demonstrates the fundamental workflow of a VizHub project by loading the D3 library directly from a CDN (UNPKG) and executing a local JavaScript bundle. The page uses an HTML container with the id "message" and relies on a separate styles.css file for any visual styling. The core purpose is to show how to include D3 as an external dependency and how to render output into the DOM, with the associated README explaining the local module imports.

Question-2(Task-2)

A stacked bar chart displays monthly fruit sales for apples, bananas, and carrots, with each bar normalized to represent 100% of total quantity. The chart uses horizontal bars where segment widths show each fruit's proportional contribution, and hovering reveals precise quantities via a tooltip. The visualization is built with D3.js (v7), using `d3.csv` to load data, `d3.stack` for series stacking, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG rendering. Data comes from the fruitsales.csv file.

QUESTION-2(TASK-2)

This stacked horizontal bar chart displays population distribution across multiple countries for the years 1950–2020, with each bar segment representing a yearly population count. It uses d3.csv to load the data, d3.stack() to compute the stacked segments, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. Hovering over a segment highlights it and shows a tooltip with the specific year and population value, using d3.axisLeft, d3.axisBottom, and d3.scaleBand.

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb rating levels across six movie genres, revealing how genre influences audience ratings. Each bar represents a genre, segmented into five rating categories from below 5.0 to above 8.5. Using d3.stack() and d3.scaleOrdinal for coloring, the visualization renders as SVG. Interactive tooltips appear on mouseover via d3.select and event handlers, displaying the exact percentage for each rating segment within a genre. The data comes from a CSV file containing genre and rating proportion columns.

QUESTION-1.2(TASK-1)

This example displays a horizontal bar chart of the top 20 countries by 2010 population, with bars sorted in descending order and labeled on the y-axis. The visualization uses React with D3 v5 scaleBand and scaleLinear for positioning, while CSV data is fetched from a GitHub raw URL. SVG rendering is handled through React components (AxisBottom, AxisLeft, Marks), with axis ticks styled via CSS and formatted using D3’s format('.2s') to abbreviate values in billions.

QUESTION-1(TASK-1)

A horizontal bar chart displays the top 10 countries by population in the year 2000, with bars sorted in descending order. The visualization loads CSV data via `d3.csv`, transforms population values by multiplying by 1,000, and renders SVG rectangles using React components. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `d3.format` abbreviates axis tick labels (e.g., converting billions to "B"). The chart includes styled axes with blue tick lines and green bars, using a Poppins font.

activity 6_Task 1

This bar chart displays the 2020 population for 30 countries, sorted along a linear scale, with country names on the y-axis. Built with React and D3 v5, it creates an SVG using `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. The data comes from a CSV file loaded with `d3.csv`.

5 buddhas

The visualization displays five overlapping Buddha silhouettes, each rendered as an SVG path, colored with randomized RGB values and rotated at 45 degrees. The composition is generated using React, with ReactDOM mounting the SVG elements. A dense grid of semi-transparent polygons, produced by nested array maps and random coordinates, forms a textured background. The Buddha paths are static, while the background’s opacity and random fill colors create a layered, dynamic effect. The code uses React.js for structure and SVG for rendering.

Mar 29, 2024

Activity-5 (Question-3)

This example presents a static visualization consisting of two violet flower shapes rendered as SVG paths, each positioned and scaled differently over a black background with a floral photographic image. The visualization is built using React, with the ReactDOM library managing the SVG elements within the viewport. The paths are defined by long, complex coordinate strings and styled with white strokes, violet fills, and varying opacities to create the outlined shapes. The code includes arrays, functions, and console logging, but the primary visual output focuses solely on these two distinct floral SVG path renderings.

Mar 29, 2024