P

pavanbellam@my.unt.edu

@PavanBellam0890·23 public vizzes

Loading thumbnail…

Project

This interactive D3.js dashboard explores diabetes medication, gender, and age-group trends related to heart disease outcomes. It shows three SVG charts built from a merged CSV dataset, including a bar chart of heart disease cases by medication status, a pie chart of patient gender distribution, and a bar chart of cases across age groups. The code uses `d3.csv` to load data, `d3.select` to render SVG elements, and a custom tooltip for hover interactions. An embedded Power BI iframe complements the narrative with additional health analytics.

Loading thumbnail…

Project

This visualization presents a health data dashboard with three SVG charts. It includes a pie chart showing gender distribution, a bar chart displaying age distribution using d3.bin, and a scatter plot correlating glucose levels with BMI using d3.scaleLinear. The code uses d3.csv to load data and d3.rollup for aggregation, rendering all charts with D3 v7's SVG API.

Loading thumbnail…

project

This project demonstrates a basic D3.js visualization workflow that loads and processes a merged health dataset from a CSV file. The code uses d3.csv to asynchronously fetch the data and log it to the console, setting up the foundation for further visual exploration. The simple HTML page includes a stylesheet with a full-screen message and references D3 v6 from a CDN, while the JavaScript imports the csv function from D3 to handle the data parsing.

Loading thumbnail…

question 2

This example shows a weekly area chart of visitor counts, with the x-axis mapping days of the week and the y-axis mapping the number of visitors, rendered as a semi-transparent steel-blue filled path. The visualization uses D3 v7’s `d3.scalePoint`, `d3.scaleLinear`, and `d3.area` to generate the smooth area geometry, with axes drawn via `d3.axisBottom` and `d3.axisLeft`, and axis labels appended as SVG text elements. The data is loaded asynchronously from a remote CSV file using `d3.csv`, with numeric visitor values parsed before the domain is set, and the chart is drawn into an SVG container with explicit margins and a styled `path.area` class.

Loading thumbnail…

Question 1

This pie chart visualizes sales distribution by product category, using a categorical color scale to differentiate segments and displaying numeric values directly inside each slice. It loads CSV data from a GitHub Gist, converts the values to numbers, and renders the chart with d3.pie, d3.arc, and d3.scaleOrdinal. A custom legend built with SVG rectangles and text identifies each category, while positional labels for "Product Categories" and "Sales Value" reinforce the chart’s context. The visualization uses D3 v7 with an SVG-based rendering approach.

Loading thumbnail…

Question 4

This bubble chart compares GDP per capita and life expectancy for five countries, with bubble size scaled to population. The visualization uses D3 v5’s `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble radii, and `d3.axisBottom`/`d3.axisLeft` to render ticks. Data loads from a CSV, and each circle’s position maps GDP on the x-axis and life expectancy on the y-axis, with country labels overlaid. SVG rendering with `circle` and `text` elements shows population, wealth, and health outcomes in a single static view.

Loading thumbnail…

Question 3

A scatter plot shows the relationship between math and reading scores for students, with points colored by gender (blue for male, pink for female). Both axes range from 50 to 100, and the plot uses an ordinal color scale to distinguish genders. The visualization loads data from a CSV file via `d3.csv`, converts numeric fields with unary plus, and renders SVG circles using `d3.scaleLinear` for positioning and `d3.axisBottom`/`d3.axisLeft` for axes. Axis labels are added as SVG text elements.

Loading thumbnail…

tutorial 3.2

This example shows a scatter plot of iris flower measurements, mapping sepal length against petal length and using different shapes to distinguish species. It loads the dataset from a remote CSV file and renders the chart using D3 v7. The code builds the visualization with a compositional approach, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and custom modules for drawing axes and a shape legend. The chart updates declaratively via D3's `selection.join` operations.

Loading thumbnail…

Task_3 Pavan

This scatter plot visualizes the Iris dataset, comparing petal length against petal width. Each circle’s color encodes the flower species (setosa, versicolor, or virginica), while its horizontal and vertical positioning maps to the selected measurements. The plot uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` to map values to coordinates, and `axisLeft`/`axisBottom` to display scales. An `axis-label` text element annotates both axes, and circles are placed via `selectAll`/`join`.

Loading thumbnail…

question 1.2

This bar chart displays the top 20 countries by population in 2010. The chart uses a horizontal layout, with country names on the y-axis and population on the x-axis, encoded by bar length. The data is loaded from a CSV file via `d3.csv`. The visualization is built with D3 v5, using `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and positioned with `d3.axisLeft` and `d3.axisBottom` for the axes.

Loading thumbnail…

question1.1

A horizontal bar chart displays the top 10 countries by population in the year 2000, with bars sorted in descending order along a linear scale. The visualization uses D3 v5 to load CSV data via `d3.csv` and renders SVG rectangles with `d3.axisLeft` and `d3.axisBottom` for axes. Population values are formatted compactly using tick formatting. The chart presents static summary data without interactivity.

Loading thumbnail…

Activity_6_Pavan_Ques_2

A horizontal bar chart displays the top 10 most populous countries in the year 2000, with each bar’s length proportional to its population value. The visualization loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Rectangles are rendered in SVG with a teal fill, while `d3.axisLeft` and `d3.axisBottom` generate the axes, and tick labels are formatted using `d3.format('.2s')`.

Loading thumbnail…

Fork of Activity 7

This example visualizes the 2020 population of 30 countries using a horizontal bar chart. The SVG renders through React components, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar lengths on the x-axis. Axis tick labels use d3.format with the '.2s' specifier to abbreviate values, replacing 'G' with 'B' for billions. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Loading thumbnail…

Question 2

This example shows fruit sales across three regions as a horizontal stacked bar chart, with each bar segmented by region and color-coded via a legend. It loads data from a CSV file using d3.csv, parses numeric values, and builds the visualization with d3.stack, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the quantitative x-axis. The SVG rendering uses d3.axisLeft and d3.axisBottom for axes, while d3.scaleOrdinal assigns distinct colors to each region.

Loading thumbnail…

tutorial 1

This example displays the text "Hello VizHub!" centered on the page using D3.js version 6. The code imports the `select` function from D3 and the custom `message` module to set the text content of the HTML div with id `message`. The visualization reads from a CSV file containing fruit data across three regions, though the current rendering only shows the static message. The page styling is handled through an external CSS file, and the `index.html` loads D3 from a CDN while the JavaScript is bundled separately.

Loading thumbnail…

tutorial 2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar representing the percentage of ratings in categories from “below 5.0” to “above 8.5.” Hovering over a segment displays a tooltip with the exact percentage for that rating level within the genre. The visualization uses D3 v7’s `d3.stack` for data stacking, `d3.scaleOrdinal` for color assignment, and `d3.scaleLinear` and `d3.scaleBand` for axes. Data is loaded from a CSV file, and the chart is rendered as SVG with interactive mouse events.

Loading thumbnail…

Tutorial 1

This chart displays the population figures for 30 countries in 2020. Built with React and D3 v5, it renders as an SVG with a horizontal bar chart layout. Each bar’s length is scaled using `scaleLinear`, with country names positioned via `scaleBand`. The visualization uses D3’s `csv` loader to fetch data from a remote GitHub dataset, and axis formatting is applied with D3’s `format` function to abbreviate large numbers.

Loading thumbnail…

tutorial 1

This example displays the text “Hello VizHub!” centered in the browser window using D3.js. The code imports the `select` function from D3 and applies it to a `<div>` element with the ID `message`. A separate ES6 module, `myMessage.js`, exports the string, which is then set as the element’s text content. Styling is handled via an external CSS file.

Loading thumbnail…

tutorial 1

This example displays the text “Hello VizHub!” centered in the browser window using D3.js. The code imports the `select` function from D3 and applies it to a `<div>` element with the ID `message`. A separate ES6 module, `myMessage.js`, exports the string, which is then set as the element’s text content. Styling is handled via an external CSS file.

Loading thumbnail…

tutorial 1

This example displays the text “Hello VizHub!” centered in the browser window using D3.js. The code imports the `select` function from D3 and applies it to a `<div>` element with the ID `message`. A separate ES6 module, `myMessage.js`, exports the string, which is then set as the element’s text content. Styling is handled via an external CSS file.

Loading thumbnail…

tutorial 1

This example displays the text “Hello VizHub!” centered in the browser window using D3.js. The code imports the `select` function from D3 and applies it to a `<div>` element with the ID `message`. A separate ES6 module, `myMessage.js`, exports the string, which is then set as the element’s text content. Styling is handled via an external CSS file.

Loading thumbnail…

Tutorial 1

This chart displays the population figures for 30 countries in 2020. Built with React and D3 v5, it renders as an SVG with a horizontal bar chart layout. Each bar’s length is scaled using `scaleLinear`, with country names positioned via `scaleBand`. The visualization uses D3’s `csv` loader to fetch data from a remote GitHub dataset, and axis formatting is applied with D3’s `format` function to abbreviate large numbers.

Loading thumbnail…

Activity_6_Pavan Bellam

This bar chart displays the 2000 population figures for ten countries, including the USA, China, and India. It uses a horizontal layout with a linear scale for population values and a band scale for country names, rendered as SVG rectangles. The visualization is built with D3 v5, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` for axes. The data is embedded directly in the script, and the chart includes labeled axes for population and country, with a clean, styled container.