Skip to main content
Log in
M

maheshchowdaryponnaganti@my.unt.edu

@Maheshchowdary45·13 public vizzes

Loading thumbnail…

Assignment 2 - Question 2

This area chart displays declining population figures across years from 2000 to 2019, based on data from a CSV file. The visualization uses D3.js version 6 with SVG rendering, featuring a light yellow filled area with a subtle stroke. Interactive tooltips appear on hover over invisible circles positioned along the data points, showing the exact year and population value. The chart employs d3.area() for the area path, d3.scaleLinear() for both axes, and d3.axisBottom()/d3.axisLeft() for tick marks, with tooltip transitions providing animated feedback.

Apr 19, 2024
Loading thumbnail…

Assignment 2 - Question 1

This example shows a pie chart of food categories with quantities displayed both inside the slices and in a legend, using a color scale with four distinct sections. The visualization loads CSV data from a GitHub repository via `d3.csv`, then renders SVG arcs using `d3.pie` and `d3.arc` with an inner radius of zero. The chart positions text labels at each arc's centroid and appends a separate legend with rectangles and value labels. The code relies on D3 v5 APIs including `scaleOrdinal` for colors and `format` for tick value formatting, with styles defined in an external stylesheet.

Apr 19, 2024
Loading thumbnail…

Hello

This pie chart visualizes the gender distribution of customers from a CSV dataset, using D3.js to load and process the data. It groups the data by gender with `d3.group`, generates the chart with `d3.pie()` and `d3.arc()`, and renders the paths as SVG elements. A color scale (`d3.scaleOrdinal`) and a legend are also included. The code loads the data via `d3.csv` from a raw GitHub URL.

Apr 18, 2024
Loading thumbnail…

Activity6_Task2

This interactive stacked bar chart displays the religious composition of the top 20 countries by population, with each bar segment representing a religion’s population in millions. Users can hover over the color legend to highlight corresponding segments in the chart, which fade non-matching bars. Built with d3.v7, the visualization uses `flatRollup`, `stack`, `scaleBand`, and `scaleLinear` to structure data, while the color legend and chart respond to mouse events updating a shared state. Data comes from a CSV file containing country, religion, and population figures.

Apr 11, 2024
Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated religious composition of the 20 most populous countries in 2010, with each bar segmented by religion and colored accordingly. Hovering over a legend entry highlights that religion across all countries while fading others, using D3’s `scaleOrdinal` and `schemeCategory10` for color mapping and `stack()` for bar construction. The visualization also employs `flatRollup` to aggregate data and `scaleBand` for country positioning, with data sourced from the Pew Research Center’s Global Religious Landscape report.

Apr 11, 2024
Loading thumbnail…

Activity6_Task3

This example renders a scatter plot from the Mall_Customers dataset, visualizing the relationship between petal length and petal width, while encoding species type through circle color. It loads data via `d3.csv` from a GitHub raw URL, then uses `d3.scaleLinear` with `d3.extent` to map values to screen coordinates. The SVG circles are drawn with D3’s data join, and axes are created with `d3.axisLeft` and `d3.axisBottom`. The code also references sepal dimensions and displays axis labels using `svg.append('text')`.

Apr 10, 2024
Loading thumbnail…

activity 6_Task 1

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart, using React and D3 v5 to render the SVG elements. It loads data from a CSV file via a custom `useData` hook with `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The bars are drawn as SVG `<rect>` elements with a native `<title>` tooltip showing formatted population values, and tick marks are generated using `xScale.ticks()` with custom formatting.

Apr 10, 2024
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ranked by value. The visualization uses React with D3 v5, rendering as an SVG. The `Marks` component creates rectangles whose width is scaled by population, while the `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data is loaded via the `csv` API from a remote URL, with population computed by multiplying the 2000 column by 1000. The `scaleBand` and `scaleLinear` functions map countries and populations to screen coordinates, and formatted tick labels replace 'G' with 'B' for billions.

Apr 10, 2024
Loading thumbnail…

Fork of Hello VizHub

A stacked bar chart displays the religious composition of the population across the top 20 countries, with each bar segmented by religion and filled using a custom ordinal color scale. The visualization loads data from a CSV file via `d3.csv` and renders SVG elements using D3 v7. It employs `d3.scaleBand` for the country axis, `d3.scaleLinear` for the population axis, and `d3.stack` to compute the stacked series, with axes labeled "Country" and "Population".

Apr 10, 2024
Loading thumbnail…

Activity 6 Task 2(Interactive Stacked Bar Chart)

This interactive stacked bar chart displays the estimated religious breakdown of the 20 most populous countries in 2010, with population measured in millions. Each country's horizontal bar is segmented by religion, and hovering over a legend item highlights that religion’s segments across all countries while dimming others. The visualization is built using D3.js, utilizing `scaleOrdinal`, `scaleLinear`, `scaleBand`, and the `stack` function to process the CSV data. The legend and chart implement mouseenter/mouseleave events to update the hovered color state, adjusting segment opacity and stroke accordingly.

Apr 10, 2024
Loading thumbnail…

Activity 6 Task 4

This example shows a bubble chart that visualizes spatial data by mapping x and y coordinates to a scatterplot and a third size value to the radius of each circle. The chart loads CSV data from a GitHub repository using D3 v5’s `d3.csv` method, then renders the bubbles as SVG circles with a skyblue fill and semi-transparent opacity. It uses `d3.scaleLinear` for the x, y, and radius scales, and displays axes via `d3.axisBottom` and `d3.axisLeft`, with explicit axis labels. The SVG canvas is fixed at 800 by 600 pixels with defined margins.

Apr 10, 2024
Loading thumbnail…

Activity 6 Task 3

This scatter plot visualizes the Mall Customers dataset, showing the relationship between customer age and spending score, with each point colored by gender (blue for male, pink for female). The visualization uses D3 v5 to load the CSV data, applies linear scales for both axes, and renders circles as SVG marks. The chart includes labeled axes for age and spending score, with axis ticks and labels styled at 20 pixels.

Apr 10, 2024
Loading thumbnail…

Activity6_Task1

This bar chart displays the population of three countries: the USA, China, and India. The visualization uses D3.js to create an SVG chart with interactive bars that change color when hovered over. The code imports D3 via UNPKG and uses `d3.scaleBand` and `d3.scaleLinear` for the axes, along with `d3.axisBottom` and `d3.axisLeft` for chart labels. The sample data is hardcoded within the JavaScript module.

Apr 9, 2024