nikhilapogula@my.unt.edu

Assignment 2 Question 1

This example shows the distribution of fruit categories using a pie chart, with each slice sized according to the value in the "4-5" column from a remote CSV file. The visualization renders as an SVG using D3 v7, with colored slices, a bold title, and an interactive legend that displays category names. D3's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs generate the chart and color scheme, while the legend uses `rect` and `text` elements to map colors to categories. The data is fetched via `d3.csv` from a GitHub gist, and labels for "Category" and "Percentage" are added as static text elements.

Apr 13, 2024

Fork of Fork of Hello VizHub

This pie chart shows the distribution of total sales across item categories, with each slice labeled by its category and dollar amount, alongside a color-coded legend and a centered title and subtitle. It loads data from a CSV hosted in a GitHub Gist, aggregates the sales per category using `d3.rollups` and `d3.sum`, then renders the visualization with `d3.pie` and `d3.arc`. The SVG output uses `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and D3 is loaded via a script tag from d3js.org.

Apr 13, 2024

Activity 6 Question 1-2

This example displays a horizontal bar chart comparing the 2010 populations of twenty countries, sorted by the country name along the y-axis and population magnitude along the x-axis. Built with React and rendered as an SVG, the chart uses d3's `scaleBand` and `scaleLinear` to position bars and axes, with `d3.format` shortened to billion units for tick labels. Population data is loaded from a CSV file via d3's `csv` function, with each bar’s tooltip showing the formatted value.

Activity 6 Question 4

This animated bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and user ratings on the y-axis, with bubble size encoding calorie content and color encoding the manufacturer. Users can hover over any circle to reveal its exact calorie and glucose values via a tooltip. The visualization is rendered using D3.js version 7, building an SVG scene with `d3.scaleLinear` for axes and bubble radii, and `d3.scaleOrdinal` for color mapping. The chart includes a filled-circle legend for calorie size and a color-coded legend for each brand, pulling data from a local CSV file.

Fork of Activity 6 Tutorial 4

This interactive bubble chart reveals the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble sized by fuel efficiency and colored by manufacturer. The visualization uses D3.js v7 with SVG rendering and animation, loading data from a CSV file. Hovering over bubbles triggers tooltips showing the car make, while a legend displays MPG values and color-coded makes. The chart employs d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/Left to map data dimensions and axes.

Activity 6 Question 4

This bubble chart shows the correlation between vehicle weight, height, and length, with each car model represented by a circle positioned along the x-axis (weight) and y-axis (height). The bubble size encodes length, while the color differentiates the vehicle make, as shown by the accompanying legend. Hovering over a bubble reveals a tooltip with the model and exact measurements. The chart is built with D3 v7, using `d3.scaleLinear` for axes and bubble scaling, `d3.scaleOrdinal` with `d3.schemeCategory10` for color assignment, and SVG circles with mouseover events for interactive data display.

Activity 6 Tutorial 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position encoding horsepower and torque, while its radius and color represent highway MPG and car make, respectively. A tooltip displays the car make on hover, and a legend explains the bubble size scale for highway MPG values. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and SVG elements for rendering.

Activity 6 Question 3

This example shows a scatter plot of product specifications, mapping thickness on the x-axis and length on the y-axis, with each point colored individually using a categorical color scale. The visualization uses D3 v6 to load CSV data from a GitHub gist, create an SVG canvas, and apply linear scales based on the data extent. Axes are generated with `axisBottom` and `axisLeft`, and the plot fills the browser window with a fixed radius of 5 pixels per circle. The visualization highlights the distribution of product measurements without additional layers of encoding or interaction.

Activity 6 Tutorial 3

This chart shows the pairwise relationships between measurements from the classic Iris dataset, plotting petal length against petal width while mapping each flower species to a distinct color (setosa in sky blue, versicolor in light green, and virginica in orange). The visualization loads data from a GitHub-hosted CSV file using d3.csv, then constructs a scatter plot with d3.scaleLinear scales for both axes and positions circles using the d3.select and .join methods. Axis ticks are rendered via d3.axisLeft and d3.axisBottom, with axis labels styled using SVG text elements. The chart fills the browser viewport, setting its SVG dimensions from window.innerWidth and window.innerHeight.

Activity 6 Tutorial 3.2

A scatter plot of the Iris dataset displays sepal length against petal length, with each species represented by a distinct symbol shape and a legend labeling the three species. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV file via `fetch` and `csvParse`, with axes, marks, and legend rendered through reusable module functions.

Activity 6 Question 2

A horizontal stacked bar chart shows the proportion of ratings (Below 4 through Above 8) for six food categories, with each bar segmented by rating level and colored by category. The visualization uses D3 v7 with an SVG renderer and d3.stack to compute stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Tooltips display exact percentages on mouseover, and a legend identifies each rating color. Data comes from a CSV file containing proportional values for fruit, vegetables, meat, dairy, grains, and snacks.

Fork of Interactive Stacked Bar Chart Prototype

This interactive stacked bar chart displays the estimated religious breakdown of the 20 most populous countries in 2010, based on data from the Pew Research Center. Hovering over a religion in the legend highlights that specific religion across all bars, while dimming others. Built with D3.js, it uses `scaleOrdinal` for color mapping, `stack` for data aggregation, and `flatRollup` to group by country. The `colorLegend` module handles the interactive highlighting with mouse events and opacity fading.

Activity 6 Tutorial 2

This stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, showing the proportion of titles falling into five rating brackets from "below 5.0" to "above 8.5." The chart uses d3.stack to create the stacked segments and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover via D3 event handlers, displaying the exact percentage for each genre-rating combination. The SVG output is generated using the d3.js library (v7) with data loaded from a CSV file, and the chart includes axis labels and a title rendered with custom fonts.

Activity 6 Tutorial 1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020. It uses React with D3’s `scaleBand`, `scaleLinear`, `max`, and `format` APIs to build the visualization in SVG. The code loads CSV data via `csv` from a GitHub gist, formats tick labels with `.2s` (converting Gigabytes to Billions), and includes native SVG `<title>` tooltips. Axes are rendered as custom React components, with blue tick lines and green bars.

Activity 6 Question 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. The visualization uses D3 v5 scales (scaleBand and scaleLinear) within a React component, rendering to SVG. Data is loaded from a CSV file via D3’s csv function, with the population values formatted using a custom tick formatter that converts large numbers to abbreviated forms like "B" for billions.

Fork of 2 to 6 FACE BUDDHA

The visualization displays a colorful, abstract Buddha-like face constructed from a complex SVG path. Multiple overlapping Buddha silhouettes rotate and are scaled, while the background is a photographic image of flowers, creating a layered, surreal composition. The code uses React and ReactDOM to render the SVG elements, with the primary shape defined by a large `path` element containing extensive coordinate data. The image includes randomized, semi-transparent polygons and a header text element.

Apr 2, 2024