venkatamanikantavaddi@my.unt.edu

Happiness Report Pie Chart

This pie chart visualizes the distribution of happiness scores across global regions, using data from the 2015 Happiness Report. The chart aggregates scores by region and displays each region as a colored slice with labels. Built with D3 v6, the visualization uses `d3.pie`, `d3.arc`, and `d3.rollup` to process and render the data, while `d3.scaleOrdinal` and `d3.schemeCategory10` assign colors. A legend maps regions to their corresponding hues, and the SVG output includes a clean, styled interface.

Nov 6, 2024

Area chart

This area chart visualizes temperature data over time, loading a CSV dataset and displaying daily temperature points connected by a filled band. The example uses D3 v7 to render an SVG chart with animated tooltips that appear on mouseover, showing the city, date, and temperature in Celsius. The area is drawn using `d3.area` with a steelblue fill, while individual data points are marked with circles. The x-axis labels are rotated, and the chart includes a title. Tooltips are implemented with a styled overlay that fades in and out on user interaction.

Nov 6, 2024

Pie chart

This pie chart displays browser market share percentages, with each slice colored via a categorical scale and a legend identifying the browser names. It uses D3 v7 with `d3.pie` and `d3.arc` to generate the SVG paths, and `d3.csv` to load the remote dataset. Hovering over a slice reveals a tooltip showing the browser and its exact share, while the chart includes a bold title and white stroke separators between slices.

Nov 5, 2024

Activity6_Task4_Q4

This bubble chart shows the correlation between average temperature, humidity, and pressure for various U.S. states. It plots temperature on the x-axis and humidity on the y-axis, while encoding pressure through both the size and color of each bubble, with a legend for pressure values and a color scale for states. The visualization uses D3.js v7, leveraging `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and custom tooltip handlers for interactivity. Data is loaded from a CSV file, and hovering reveals each state's name.

Activity6_Task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 30 car makes. Each circle's position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and car make, respectively. Rendered as an SVG with d3 v7, the chart uses d3.scaleLinear for axes and bubble size, and d3.scaleOrdinal for color. Interactive tooltips appear on hover, and legends display both the MPG scale and make categories.

Activity6_Task3_Q3

This scatter plot visualizes the relationship between age and insurance charges, with point shapes encoding the gender of each individual. The chart uses a linear scale for both axes and an ordinal scale for shape mapping, rendering points via D3 symbol generators. The visualization imports a CSV from a GitHub repository, using D3's `csvParse` and fetch API. Axes and shape legends are constructed programmatically to display the data.

Activity6_Task3.2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded through different symbol shapes and a legend. The code uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to position points and assign shapes, while d3.axisBottom and d3.axisLeft render the axes. Data loads asynchronously from a CSV URL and is parsed with d3.csvParse, converting numeric fields before rendering the chart with custom axes and legend modules.

Activity6_Task3.1

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to x and y positions while coloring each point by species (setosa, versicolor, or virginica) using predefined color markers. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes, with data loaded via `d3.csv` from a GitHub gist. Circles are rendered as SVG elements with their radii fixed and additional sepal dimensions stored as unused attributes, while axis labels are positioned using SVG text elements.

Activity6_Task2_Q3

This stacked bar chart visualizes sales data for five clothing stores, comparing revenue across three product categories: Cargo, Flannels, and Tee. The horizontal bars display the proportional contribution of each category to total store sales. Built with D3 v7 and rendered as SVG, the visualization uses `d3.stack()` to compute layered series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the numerical x-axis. Interactive tooltips on each segment reveal exact category sales values, with the data sourced from the included CSV file.

Activity6_Task2

A stacked bar chart shows the percentage distribution of IMDb rating levels across six movie genres, with each genre represented by a horizontal bar divided into five rating categories. The visualization reveals how genres differ in their rating patterns, such as Documentaries having higher percentages of top ratings compared to Action films. Built with D3 v7, the chart uses `d3.stack()` to compute stacked segments, `d3.scaleBand()` for the y-axis genres, and `d3.scaleLinear()` for the percentage scale. Interactive tooltips display exact percentages on mouse hover using D3 event handlers.

Activity6_Task1_Q1.2

This interactive bar chart visualizes the population of 20 countries for the year 2010. Each horizontal bar's length is proportional to population, with countries listed on the y-axis and population values on the x-axis, formatted in billions (e.g., "1.2B"). The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Data is loaded from a remote CSV file using D3's `csv` function, and the chart is rendered as an SVG with tooltips showing exact values.

Activity6_Task1_Q1.2

This visualization displays the text "Hello World!" in a large, centered Poppins typeface that adapts to a user-adjustable font size. Built with React and D3 v5, it uses an interactive Alt-drag widget to modify the font size property in real time, demonstrating a dynamic text-based rendering example. The code uses `container.innerHTML` to inject styled content into the root element, with a global CSS rule styling tick lines in blue and axis labels in a muted gray.

Activity6_Task1_Q1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout where each bar's length corresponds to the population value. The visualization uses D3 v5's `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering marks as SVG rectangles. Tooltips show formatted population values (using D3's `format` with SI prefixes like "B" for billions). The data is loaded from a remote CSV file using D3's `csv` function, with the population values computed by multiplying the raw 2000 column by 1000. React manages the component state and rendering, with custom `AxisBottom` and `AxisLeft` components generating the tick marks and labels.

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file via `d3.csv`, and each bar’s value is formatted using D3’s `format` function, with tooltips showing the abbreviated population.

Activity 6

This example demonstrates the basic setup of a VizHub project using D3.js. It shows how to load D3 via a CDN, import individual API functions like `select` from the d3 module, and use local ES6 modules with `import` and `export` statements. The code renders a simple text message, "Hello VizHub!", into a div element and applies styling from an external CSS file. The visualization serves as a minimal template illustrating module-based code organization within a D3 environment.

Oct 19, 2024