SrinivasAbburi@my.unt.edu

Histogram

This histogram visualizes the distribution of salary values in U.S. dollars from a CSV dataset loaded via a gist URL. It uses D3.js v7 with an SVG renderer to draw rectangular bars, each representing a salary range, with bar height indicating frequency. The code applies `d3.histogram()` with `xScale.ticks(20)` to bin the data, along with linear scales for both axes. Hovering highlights bars in orange, and axis labels are rotated for readability.

Pie Chart

This pie chart visually represents the distribution of skills from a CSV dataset, showing the count of each skill as a proportional slice. The chart uses D3.js v7 to load the data, apply a categorical color scheme, and render the pie and legend as SVG elements. The pie chart is generated with `d3.pie()`, arcs are drawn using `d3.arc()`, and the legend displays each skill label with its associated count.

Barchart2

This stacked bar chart displays the top 10 job titles by total salary in USD, aggregated from a CSV dataset loaded via `d3.csv`, with each bar colored using `d3.scaleOrdinal` and `d3.schemeCategory10`. It renders an SVG with `d3.axisBottom` and `d3.axisLeft` for axes, uses `d3.rollups` to sum salaries per job title, and includes a legend. Bars highlight on hover due to CSS opacity changes. The data source is a remote gist file.

Barchart

This stacked bar chart displays salary distributions across employment types, using two stacked segments per category to represent a binary breakdown of the data. The visualization loads CSV data from a GitHub gist via `d3.csv`, then applies `d3.stack()` to compute the stacked series, `d3.scaleBand()` for the categorical x-axis, and `d3.scaleLinear()` for the continuous y-axis. Bars are rendered as SVG `rect` elements with colors assigned by `d3.scaleOrdinal`, while axis labels are added through `d3.axisBottom` and `d3.axisLeft`.

SDV Final Project

This example demonstrates how D3.js can be used to display a simple text message on a web page. It shows the basic structure of a VizHub project, including loading D3 from a CDN via UNPKG and importing local ES6 modules. The code uses `d3.select` to set the text content of an HTML div element with the message "Hello VizHub!". A separate module exports this message, and CSS styles the text with large, centered font sizing.

srinivas task 3.2

This scatter plot visualizes the Iris dataset, displaying sepal length against petal length, with points colored and shaped by species. The visualization loads data from a remote CSV file and uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisBottom` to render axes and a custom shape legend. The code demonstrates modular ES6 imports and reactive state management through a setState pattern.

srinivas 1.1

This bar chart displays the population of ten countries in 2020, with horizontal bars sorted by country name. The visualization uses a linear scale for the population axis and a band scale for the categorical country axis. Built with React and D3 v5, it loads data from a CSV file and renders the chart as SVG elements, including custom axes and marks. Tooltips show the formatted population value for each bar.

srinivas que4

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length in the Iris dataset. Each circle's x-position represents sepal length, y-position represents sepal width, and its size (radius) encodes petal length. The chart colors each data point by species using a categorical color scale applied via `d3.scaleOrdinal` with the `interpolateTurbo` color function, and includes a legend for species identification. The visualization is built with D3.js (v7) using SVG rendering. The code loads data from `iris.csv`, then constructs the chart with `d3.scaleLinear` scales and D3's axis generators (`d3.axisBottom`, `d3.axisLeft`). Interactive tooltips appear on hover, displaying species and petal length information. The chart includes axes labeled for sepal length and width, with a title contextualizing the data relationships.

srinivas tutorial4

This interactive bubble chart examines the relationship between average horsepower, torque, and highway MPG across different car makes. Using a dataset from `bubblechart.csv`, the visualization employs x- and y-axes for horsepower and torque, with bubble size encoding MPG and color distinguishing vehicle brands via `d3.scaleOrdinal` and `d3.interpolateTurbo`. The D3.js code (v7) renders SVG elements with smooth transitions on hover, displaying tooltips via mouseover, mousemove, and mouseleave events, and includes a legend for MPG values.

srinivas 3.2

This scatter plot visualizes a car dataset, mapping horsepower on the x-axis against highway MPG on the y-axis, with each point colored by the car’s make. The visualization uses D3 v6 to load CSV data from a GitHub repository, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeTableau10` for categorical colors, and `axisLeft`/`axisBottom` for gridlines. It renders as an SVG, includes labeled axes and a legend, and dynamically sizes to the browser window.

srinivas task3.1

This scatter plot visualizes the Iris dataset, showing petal width against petal length while encoding sepal dimensions and species. Colored circles represent species categories—sky blue for setosa, light green for versicolor, and orange for virginica—with circle radius fixed at five pixels. The visualization loads data from a CSV file via `d3.csv` and renders an SVG scatterplot using `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`. Axis labels clarify measurements, while the code demonstrates D3 v6 imports and local module usage.

srinivas que2

A stacked horizontal bar chart displays the percentage distribution of iris flower measurements (sepal length, sepal width, petal length, petal width) across three species: setosa, versicolor, and virginica. The visualization uses d3.stack() to compute stacked series, d3.scaleBand() for the categorical y-axis, and d3.scaleOrdinal() with a custom color palette. A tooltip appears on mouseover to show the exact percentage for each segment. The data comes from the included iris.csv file.

srinivas tutorial2

A stacked horizontal bar chart displays the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." The chart uses d3.stack to aggregate the data from a CSV file and renders segments as SVG rectangles scaled by d3.scaleLinear and positioned with d3.scaleBand. Hovering over a segment reveals a tooltip showing the exact percentage for that genre-rating combination, while a legend and axis labels clarify the categories and percentage scale.

srinivas 1.2

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with each bar labeled by country name on the left and population values formatted in billions along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a GitHub-hosted CSV file. The bars are rendered as SVG rectangles, with tooltips showing exact values and axis labels styled via CSS classes.

srinivas tutorial1

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar representing a country’s total population. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering the bars as SVG rectangles via React components. The data is loaded from a remote CSV using D3’s `csv`, and tick labels are formatted with D3’s `format` function, converting values like “1.2G” to “1.2B”. Axes and marks are generated through custom ES6 modules, with tooltips provided by SVG `<title>` elements.