saisnehapalle@my.unt.edu

Assignment2_Question1(PieChart)

This pie chart displays the population distribution of major cities, with each slice labeled by its population value in thousands and accompanied by a legend identifying the corresponding state. The chart uses D3.js v5 APIs including `d3.pie` and `d3.arc` to generate the SVG paths, and `d3.scaleOrdinal` for slice coloring. Data is loaded asynchronously via `d3.csv` from a GitHub repository, with values formatted using `d3.format`.

Apr 11, 2024

Assigment2_Question1

This example displays a single message, “Hello VizHub,” centered as large text. The visualization is built with D3.js v5, using the `select` API to target the `#message` div and set its text content. The page loads local CSS for styling and a bundled JavaScript file that imports the message from a separate module. The code also defines a constant and a regular expression, though these do not affect the displayed output. The rendering is a simple DOM-manipulation example rather than a data-driven graphic.

Apr 11, 2024

Assigment2_Question1

This example shows a reusable pie chart that visualizes vehicle type counts, displaying four categories as colored slices with a corresponding legend. The chart is built using D3.js version 6.7.0, leveraging the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute arc paths and assign colors from the `d3.schemeCategory10` palette. The SVG rendering is created with `d3.select` and `.append`, with the legend generated through additional SVG groups and rectangles. The code also references an external iris dataset URL, though the chart itself uses the inline vehicle data for its visual output.

Apr 9, 2024

Activity6_Task 3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica) using a custom marker function. The visualization, rendered as an SVG using D3 v6, loads data from a remote CSV file via `d3.csv`, scales axes with `scaleLinear` and `extent`, and draws circles with attributes mapped from sepal measurements. Axis labels are added via `axisLeft` and `axisBottom`, and text elements are rotated to label the y-axis.

Activity6_Task 1

This example shows a horizontal bar chart of population data for 30 countries in 2020, with country names on the y-axis and population values on the x-axis. The chart renders as an SVG using React components for the axes and marks, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) to display tick labels in billions. Data is loaded asynchronously from a CSV file via `csv` and `useEffect`, and each bar includes a tooltip showing the formatted population value.

Activity6_Question2

This stacked bar chart displays the percentage distribution of ratings across six categories (Technology, Finance, Healthcare, Education, Sports, Entertainment), with each bar segmented into five rating ranges from below 5.0 to above 8.5. The visualization uses d3.stack to compute cumulative segment positions, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the percentage x-axis, and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment, while the SVG rendering includes axes with tick marks and custom styling from the linked CSS.

Activity6_Question 1.1

This bar chart displays the population of ten countries in the year 2000, sourced from a CSV file and shown in descending order. Built with React and D3 v5, the visualization loads data via `d3.csv`, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG rectangles. The bottom axis labels are formatted with `d3.format` to abbreviate billions, while tooltips appear on hover.

Activity6_Question 1.2

This example shows a horizontal bar chart comparing the populations of 20 countries in 2010. The chart uses D3 scales to map data values to screen positions, with SVG rectangles representing each bar and the D3 `format` function converting large numbers into abbreviated labels. It is built with React components that render the axes and marks, and it loads data from a CSV file hosted on GitHub. The chart includes a blue axis grid and green bars, with tooltips displaying exact values.

Activity6_Question4

This bubble chart shows how average population, area, and temperature correlate across multiple U.S. cities. Each circle’s x-position encodes population, y-position encodes area, radius encodes temperature, and color distinguishes cities. The visualization uses D3 v7 with SVG rendering, linear scales for axes and bubble size, and an ordinal color scale. Interactive tooltips appear on mouseover, while legend circles indicate the temperature-to-radius mapping. Data is loaded from a CSV file.

Activity6_Question 3.1

This scatter plot visualizes car data, showing the relationship between engine size and torque, with points colored by vehicle type (Sedan, SUV, Hatchback, etc.). Each circle’s rx and ry attributes are set to horsepower and model year values, creating an elliptical effect. Built with D3 v6, it uses `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV and render an SVG chart.

Activity6_Question 3.1

This scatter plot displays the relationship between vehicle mileage and price across different car types, using color-coded circles for the Iris dataset. The visualization loads data from a CSV file via d3.csv, parses the numeric values, and maps them to SVG circle elements using d3.scaleLinear scales. Coordinate axes are rendered with d3.axisLeft and d3.axisBottom, while circle colors are determined by a custom marker function that assigns distinct hues to each car type. The chart is built with D3 v6, using the select, extent, and join methods to bind data to SVG elements.

Activity6_Task 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with data sourced from `bubblechart.csv`. Each circle's x-axis position encodes horsepower, the y-axis encodes torque, and the circle's radius represents highway MPG via a linear scale (`d3.scaleLinear`), while a categorical color scale (`d3.scaleOrdinal` with `interpolateTurbo`) distinguishes makes. Rendered as SVG with D3 v7, the visualization includes hover tooltips showing the make, a legend for MPG bubble sizes, and color-coded entries for each make. The chart animates tooltip opacity using D3 transitions and uses axes from `d3.axisBottom` and `d3.axisLeft`.

Activity6_Task3.2

A scatter plot visualizes the relationship between sepal length and petal length for iris flowers, with each point’s shape encoding the species category. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` to map species to `symbolsFill` shapes, and renders marks via `d3.symbol`. Data is loaded asynchronously from a remote CSV using `d3.csvParse` and numeric coercion. The chart includes labeled axes and a shape legend, with margins and responsive sizing based on window dimensions.

Activity6_Question3.1

This interactive scatter plot displays car mileage and price relationships, with points colored by car type (Camry, Corolla, and other). It uses the D3 v6 API, loading data from a GitHub-hosted CSV file, scaling values with `d3.scaleLinear` and rendering circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the full-screen responsive layout adapts to the window size.

Activity 6_Tas 3.2

A D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Species are encoded through distinct shapes using `d3.symbolsFill` and a custom shape legend generated with `d3.symbol`. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for shape mapping, and `d3.csvParse` to load data from an external CSV file. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`.

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings across genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" expressed as percentages. The chart is rendered as SVG using D3 v7, with data loaded from a CSV file. It employs d3.stack() to create the stacked layout, d3.scaleBand() for the genre axis, d3.scaleLinear() for percentages, and d3.scaleOrdinal() with a custom color palette. Interactive tooltips display the exact percentage for each rating segment on hover.

Activity_66666

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position maps to horsepower, y-position to torque, and size to highway MPG, with colors assigned per make. Built with D3.js v7 as an animated SVG, the visualization reads data from a CSV file and includes interactive tooltips on hover. A legend displays both the bubble-size scale for MPG values and a color key for each car brand.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle's position mapping horsepower and torque while its radius encodes fuel efficiency. The visualization includes a tooltip that displays the car make on hover, alongside dual legends showing both the bubble size scale and color-coded makes using `d3.scaleOrdinal` with interpolated Turbo colors. Built with D3 v7, the chart renders as SVG and uses `d3.scaleLinear` for axes and bubble sizing, with data loaded from a CSV file and interactive hover states managed through mouse events.

Activity6_Task 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with data sourced from `bubblechart.csv`. Each circle's x-axis position encodes horsepower, the y-axis encodes torque, and the circle's radius represents highway MPG via a linear scale (`d3.scaleLinear`), while a categorical color scale (`d3.scaleOrdinal` with `interpolateTurbo`) distinguishes makes. Rendered as SVG with D3 v7, the visualization includes hover tooltips showing the make, a legend for MPG bubble sizes, and color-coded entries for each make. The chart animates tooltip opacity using D3 transitions and uses axes from `d3.axisBottom` and `d3.axisLeft`.

Activity6_Question2

This stacked bar chart displays the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from “below 5.0” to “above 8.5.” Built with D3 v7, the visualization uses an SVG canvas, a linear x-scale for proportions, and a band scale for genres. Interactive tooltips reveal the exact percentage for each segment on mouseover, while a five-color ordinal scale distinguishes the rating categories. The code relies on d3.scaleLinear, d3.scaleBand, d3.scaleOrdinal, and d3.stack to construct the grouped bars from CSV data.

6 Buddhas

This visualization displays a multilayered, colorful arrangement of Buddha-like forms generated through overlapping polygons. The artwork builds a dense, textured composition using SVG polygon elements within a React framework, with each point calculated using the `Math.random` function to create unpredictable geometric placements. Instead of importing data, the piece relies on procedural generation through nested array mappings to create visual complexity. The code also integrates CSS styling and ReactDOM for rendering, while a separate ES6 module demonstrates modular export functionality within the app structure.

6 Buddha

Six small, violet Buddha silhouettes overlap in a grid-like arrangement against a floral background image. Each silhouette is rendered as an SVG path with a white outline, scaled and translated to create a layered composition. The visualization is built with React and renders the paths using the `path` SVG element, with data defined as hardcoded coordinate strings. The code applies distinct transforms to each Buddha path to vary their size and position across the canvas.

Activity6_Task2

This example demonstrates how VizHub combines ES6 modules with D3.js to render a simple text message inside an HTML page. The code uses `import { select } from 'd3'` to manipulate the DOM and sets the content of a `#message` div to the string "Hello VizHub!". It also imports a local module, `myMessage.js`, to supply that text, and includes a CSS file for centered, large-font styling. The visualization is entirely static, with no data source or dynamic rendering involved.

Activity6_Task2

This example demonstrates how VizHub combines ES6 modules with D3.js to render a simple text message inside an HTML page. The code uses `import { select } from 'd3'` to manipulate the DOM and sets the content of a `#message` div to the string "Hello VizHub!". It also imports a local module, `myMessage.js`, to supply that text, and includes a CSS file for centered, large-font styling. The visualization is entirely static, with no data source or dynamic rendering involved.

Activity6_Task2

This example demonstrates how VizHub combines ES6 modules with D3.js to render a simple text message inside an HTML page. The code uses `import { select } from 'd3'` to manipulate the DOM and sets the content of a `#message` div to the string "Hello VizHub!". It also imports a local module, `myMessage.js`, to supply that text, and includes a CSS file for centered, large-font styling. The visualization is entirely static, with no data source or dynamic rendering involved.

5 Buddhas

Five Buddhas presents a single, colorful composition of overlapping polygonal shapes, randomly generated in a React application, that form the silhouette of a Buddha. The code uses ReactDOM to render SVG polygons with random points, sizes, and colors. A large, detailed path outlines the central Buddha figure, while smaller random shapes fill the surrounding space. The piece is built using the React framework and rendered to SVG, creating a vibrant, abstract representation from code.

5 Buddhas

Five Buddhas renders a symmetrical, kaleidoscopic array of overlapping Buddha silhouettes in vibrant color against a black background. The composition uses nested React map functions to generate hundreds of semi-transparent polygons, each with randomized coordinates and RGB values, creating a dense, chaotic mandala effect. A single detailed Buddha path, defined by SVG path data, is replicated and transformed with translate and scale operations. The code relies on React and ReactDOM for rendering the SVG output, while random number generation drives the visual variation.