S

SuneelKalva@my.unt.edu

@suneel190700·21 public vizzes

Loading thumbnail…

Final Project 1

This dashboard analyzes U.S. pollution and respiratory health data from 2000 to 2020, sourced from a CSV file. It presents an interactive scatter plot linking pollutant levels (NO₂, CO, SO₂, O₃) to death rates, with selectable causes of death via HTML dropdowns. The visualization also includes multiple Plotly charts: line charts for death trends and pollution averages, a bar chart of 2010 death rates, a pie chart of pollution composition, and a heatmap. The implementation uses `d3.csv` to load the data and `Plotly.newPlot` to render each chart container.

Loading thumbnail…

Final Project

This interactive visualization explores the relationship between air pollutants and respiratory death rates using U.S. data from 2000–2020. Users select a cause of death and pollutant to update three linked charts: an animated scatter plot showing pollution versus death rates over time, a multi-line chart tracking trends across causes, and a bubble chart for the same relationship. The code uses d3.csv to load data and Plotly for rendering, with event listeners on dropdown menus triggering chart updates. A button links to an external Power BI dashboard.

Loading thumbnail…

Project 2

This interactive visualization explores the relationship between air pollution levels and respiratory disease death rates. Users select a cause of death and a pollutant from dropdown menus, driving an animated Plotly scatter plot that traces data points across years. A separate Plotly multi-line chart displays death rate trends for all causes over time. The page loads CSV data from a GitHub repository using D3.js v5 and renders charts with the Plotly API.

Loading thumbnail…

Project 1

This interactive scatter plot explores the relationship between selected air pollutants and respiratory disease death rates. Users choose a cause of death and a pollutant from dropdown menus, and the visualization updates dynamically, showing each year as a labeled data point. The code loads a CSV dataset from GitHub using D3.js (d3.csv) and renders the chart with Plotly’s `Plotly.newPlot` API, using teal markers and text annotations for each year. The interface is built with plain HTML and JavaScript event listeners.

Loading thumbnail…

Project

This interactive visualization examines the relationship between air pollution and respiratory health using a dataset of individual pollution and respiratory records. It displays two linked views: a combo chart with bars for NO₂ mean values and a line for death rates per 100,000 people over time, plus a scatter plot correlating these variables. The code loads external CSV data via `d3.csv` and constructs both charts using the Plotly JavaScript API (`Plotly.newPlot`). The scatter plot includes year labels as hover text for each data point.

Loading thumbnail…

Activity 7.2

This area chart displays the sales trend of Peanut Butter Cubes over time, with a salmon-colored gradient fill beneath the line. The visualization loads chocolate sales data from a GitHub-hosted CSV, filters it by product, and parses dates using `timeParse`. It employs `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart. The y-axis shows sales amounts in dollars, while the x-axis represents chronological dates, with axis labels and a bold title included.

Loading thumbnail…

Activity 7.1

This pie chart visualizes the distribution of total counts across different travel modes from a CSV dataset. The data is loaded via `d3.csv` and aggregated by the 'Mode' column, with each slice's size proportional to its 'Total' value. The chart uses `d3.pie` and `d3.arc` to generate the arcs, which are rendered as SVG paths with a categorical color scale from `d3.scaleOrdinal`. A legend, built with the same color mapping, displays each mode and its corresponding total value alongside the chart.

Loading thumbnail…

Activity 7 tutorial 1

A D3.js scatter plot animates the Iris dataset, cycling through different x-axis measurements (petal width, sepal width, petal length, sepal length) every few seconds. Circles are color-coded by species (setosa, versicolor, virginica) with a legend, axis labels, and a static title. Using d3.scaleLinear, d3.extent, axisLeft, and axisBottom, the animated plot updates axes and points via setInterval, loading data from a CSV source.

Loading thumbnail…

Activity 6 Task 3 Que

An interactive scatter plot explores the relationship between glucose levels and BMI in a diabetes dataset, distinguishing diabetic and non-diabetic outcomes. Each point is rendered as an SVG path whose shape and color encode the outcome category, while hover interactions reveal a tooltip with additional attributes like age and blood pressure. Built with D3 v7, the visualization uses `d3.csv` to load remote data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and `d3.symbol` to generate distinct point markers. A legend and axis labels are appended to the SVG container.

Loading thumbnail…

Activity 6 Tutorial 3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol shape. A legend on the right identifies the three species categories, while axis labels clarify the measurement values. The visualization loads data from a remote CSV file using `csvParse` and renders marks with `d3.symbol` and `symbolsFill`. Axes are drawn using `axisLeft` and `axisBottom`, with scales from `scaleLinear` and `scaleOrdinal` assigning positions and shapes.

Loading thumbnail…

Activity 4 Task4 Qus

This bubble chart visualizes chocolate sales performance, plotting sales amount against boxes shipped for individual transactions. Each bubble’s size corresponds to the sales amount, while its color encodes the product type, with a legend identifying each category. Hovering over a bubble reveals a tooltip with product, sales, boxes, and country details. Built with D3 v7, the visualization uses SVG circles, linear and square-root scales for positioning and sizing, and ordinal color scaling, all rendered within an SVG container.

Loading thumbnail…

Activity 6 Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes, with each circle colored by manufacturer and sized by fuel efficiency. It uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color encoding. Interactive tooltips appear on mouseover via d3 transitions, while a legend explains the MPG scale. The visualization is rendered as SVG with hover effects that increase opacity and stroke width.

Loading thumbnail…

Activity 6 Task 3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for three flower species. Each circle is color-coded by species using a d3.scaleOrdinal, with axis labels indicating measurements in centimeters. The visualization leverages d3.csv for data loading, d3.axisBottom and d3.axisLeft for axes, and interactive mouseover events that enlarge points and reveal a tooltip with species details. A legend identifies the color mapping for Iris-setosa, Iris-versicolor, and Iris-virginica.

Loading thumbnail…

Activity 6 task 2 Q2

This example presents a stacked bar chart showing the sales distribution of four product categories (Electronics, Clothing, Furniture, Groceries) across four regions (North, South, East, West), with each bar segment colored by region and displaying a hover tooltip with the exact percentage. Built with D3.js v5 and rendered as an SVG, the visualization uses `d3.stack()` to create stacked series from the in-memory `salesData` array, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the percentage-based y-axis. A legend identifies regions, and both axes include descriptive labels.

Loading thumbnail…

Activity 6 task 2

This example displays a stacked bar chart showing the percentage distribution of IMDb rating categories across six movie genres. The chart reveals that documentaries and dramas have higher shares of strong ratings, while action and comedy films skew toward lower rating brackets. Built with D3.js (v7) and rendered as SVG, the visualization uses `d3.stack()`, `d3.scaleOrdinal()`, and `d3.axisBottom()` to compose the bars. Hovering over a segment triggers an HTML tooltip showing the precise percentage for that genre-rating pair, formatted with `d3.format()`. The data comes from a CSV file with pre-aggregated proportions per genre.

Loading thumbnail…

Activity 6_task 1 Q2

This bar chart displays the top 20 countries by population in 2010, with countries listed alphabetically on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map the data, rendered as SVG rectangles. Population values are formatted using `format('.2s')` to display billions. Data is loaded from a CSV file using `d3.csv` in a custom `useData` hook, with hover effects changing bar colors and tooltips showing exact population values.

Loading thumbnail…

activity 6_Task 1 Q1

This horizontal bar chart displays the population of the top 10 countries in 2000, using a linear scale for population values and a band scale for country names. The visualization loads CSV data from a GitHub repository, sorts it in descending order, and renders SVG bars with React. It employs d3.scaleBand, d3.scaleLinear, and d3.format for axis tick labels, converting 'G' to 'B' for billions, with hover effects and tooltips showing exact values.

Loading thumbnail…

Activity 6_task 1

This horizontal bar chart visualizes the 2020 population estimates for 30 countries, sorted in descending order from the top. The visualization employs a React and D3 v5 stack, using `scaleBand` for the categorical country axis and `scaleLinear` for the numerical population axis, rendered as SVG rectangles. Data is loaded from a CSV file, with population values formatted using `d3.format` and tooltips that display the abbreviated figure (e.g., "1.4B"). The chart includes styled axes with blue tick lines and a green fill for the bars, with hover effects changing the bar color.

Loading thumbnail…

Activity 6_task 1

This example shows a horizontal bar chart displaying the populations of 20 countries in 2020, with bars colored green and ordered by country name on the y-axis. Using the React framework with D3 v5, the code loads CSV data via `d3.csv`, scales values with `scaleBand` and `scaleLinear`, and renders SVG elements through components like `AxisBottom`, `AxisLeft`, and `Marks`. The x-axis labels use `d3.format` to abbreviate large numbers, converting "G" to "B" for billions, and the dataset is fetched from a GitHub repository.

Loading thumbnail…

Fork of Activity 6_task 1

This example shows a horizontal bar chart ranking the populations of 30 countries in 2020, using a green fill for each bar that encodes the population magnitude. Data is loaded from a CSV file via d3.csv, then processed and rendered as SVG rectangles. The chart uses d3.scaleBand for the categorical country axis, d3.scaleLinear for the population axis, and d3.format for tick labels that abbreviate large numbers (e.g., "1.2B"). Tooltips display the formatted population when hovering over a bar. The visualization is built with React and the d3.v5 library.

Loading thumbnail…

Activity 6_task 1

This example displays the text “Hello VizHub!” centered on a blank page using D3.js, specifically the `select` function from the D3 API to target the message `div` and set its text content. The styling comes from a linked CSS file that sets the font size and alignment, while the text itself is imported as a template literal from a local ES6 module. The page loads D3 version 6 from a CDN and uses a bundled JavaScript file containing both the module import and the DOM manipulation.