P

puneetputtu@my.unt.edu

@PuneetPuttu·16 public vizzes

Loading thumbnail…

Area Chart Activity_7.1

This area chart displays cumulative revenue over time for January 2024, with a shaded region and overlaid line tracing the total as transactions accumulate across six product categories. The visualization is built with D3 v7, using the `d3.rollup` API to aggregate sample transaction data by date, then calculating running totals with a JavaScript map. The SVG rendering employs `d3.area` and `d3.line` generators with monotone curve smoothing, while scales handle time on the x-axis and linear revenue values on the y-axis. The title and axis labels are styled via embedded CSS.

Loading thumbnail…

Pie chart Activity 7_Question 1

A pie chart displays revenue distribution across six product categories from a sample sales dataset, including Electronics, Home Appliances, Clothing, Books, Beauty Products, and Sports. The SVG rendering uses D3.js v7 functions such as `d3.rollup` for aggregation, `d3.pie` for layout, and `d3.arc` for slice generation, with each slice labeled by its revenue value and a separate legend built from the color scale.

Loading thumbnail…

Reusable Scatter Plot Activity_7.1

This interactive scatter plot animates through different dimensions of the classic Iris flower dataset, cycling between petal and sepal measurements on the x-axis while keeping sepal length on the y-axis. Built with D3.js (v6) and rendered as an SVG, the visualization uses `d3.csv` to load data from a GitHub Gist and `d3.scaleLinear` to map values. Species are distinguished by color (blue, green, orange), and the plot updates dynamically via `setInterval`.

Loading thumbnail…

Activity6_Task3.2

A scatter plot of the classic Iris dataset, showing sepal length against petal length for three species of iris flowers. The visualization encodes species through both color and distinct marker shapes: circles for setosa, squares for versicolor, and triangles for virginica, with a custom legend identifying each. Built with D3.js v7, the code loads data from a remote CSV, uses `d3.scaleLinear` for the axes, and renders the symbols using `d3.symbol` with `symbolCircle`, `symbolSquare`, and `symbolTriangle`. The SVG output is styled with CSS and includes labeled axes.

Loading thumbnail…

Activity6_Task4

This interactive D3.js bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position represents horsepower, y-position represents torque, and its size encodes highway MPG, with color distinguishing individual brands. Built with d3.v7, the visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal for color. On hover, a tooltip displays exact values, while circle stroke and opacity adjust via d3.select and d3.color.

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset by comparing sepal length against petal length for three species of iris flowers. Each species (setosa, versicolor, virginica) is rendered as a distinct colored point cloud, with tooltips displaying the species name and exact coordinates on hover. The example fetches the CSV data from a GitHub gist and uses Chart.js with the scatter chart type to render the plot onto an HTML canvas. The chart axes are labeled with measurement units in centimeters, and the legend identifies each species' color grouping.

Loading thumbnail…

Activity6_Task 2

This example visualizes the distribution of movie ratings across six genres, showing the proportion of films in each rating range (below 5.0 to above 8.5) as stacked horizontal bars that sum to 100%. The code loads data from a CSV file and uses d3.stack with stackOffsetExpand to create normalized percentages, d3.scaleBand for the genre axis, and d3.scaleLinear for the percentage axis. Interactive tooltips display the exact genre, rating range, and percentage on mouseover, while a color-coded legend identifies each rating category. The visualization is rendered as animated SVG elements.

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the top 30 most populous countries in 2020, sorted in descending order with population values formatted in millions along the x-axis. The visualization uses React with D3 v7 scales and SVG rendering, fetching its CSV data from a GitHub repository with fallback sample data if the request fails. Bars are rendered as SVG rectangles using the `scaleBand` for country positioning and `scaleLinear` for population values, with axis components built through custom React functions for ticks and labels.

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order with a teal fill. The visualization uses d3.csv to load data from a GitHub-hosted CSV file, d3.scaleLinear and d3.scaleBand to map population values and country names to SVG coordinates, and d3.axisBottom with custom tick formatting to label values in millions and billions. Bars are rendered as SVG rect elements within a React framework, with an interactive hover effect that reduces opacity.

Loading thumbnail…

Activity 6_Task 1

This example visualizes the top 30 most populous countries in 2020 using a horizontal bar chart, with each bar’s length encoding population size. The chart is built with React and D3 v7, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis categories. Population data is fetched from a CSV hosted in a GitHub gist, with a hardcoded fallback dataset in case the request fails. The visualization renders as SVG, with custom React components for the axes and marks, and includes styled hover effects and axis labels.

Loading thumbnail…

Fork of Activity6_Task 1

This example presents a horizontal bar chart ranking the top 30 countries by 2020 population. The React-based visualization uses D3’s `scaleLinear` and `scaleBand` to map values and categories, with `axisBottom` and `axisLeft` rendering the axes. Data is loaded via `d3.csv` from a remote Gist, sorted by population, and rendered as SVG rectangles. The chart includes a clear axis label indicating population in millions, with the x-axis formatted using tick formatting to display values in that unit.

Loading thumbnail…

Fork of Activity6_Task1

This bar chart visualizes the top 30 most populous countries in 2020 using a horizontal layout, with population values displayed in millions on the x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, then sorts and filters the dataset before rendering SVG rectangles with React components. The chart employs d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with custom AxisBottom and AxisLeft components generating tick marks and labels. The bars use a consistent teal fill with rounded corners, and the code includes fallback data sources and error handling for network failures.

Loading thumbnail…

Activity6_Task 1

This visualization displays a horizontal bar chart ranking the top 30 countries by their 2020 population figures, sourced from a CSV file fetched via `d3.csvParse`. The React application uses D3.js scales (`scaleLinear`, `scaleBand`) to map population values to bar lengths and country names to vertical positions, rendering SVG rectangles with a teal fill. The chart includes labeled x and y axes, with population values formatted in millions (e.g., "1.4B"), and a fallback dataset is shown if live data fails to load.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes the 2020 population of 30 countries as a horizontal bar chart using SVG rendering within a React application. The chart uses D3 v5’s `scaleBand` and `scaleLinear` to map data points to coordinates. The bars are rendered as `rect` elements with population values formatted using `d3.format`. A tooltip displays the formatted population value via a `<title>` element. The data is loaded from a CSV file using `d3.csv`, and the chart includes styled tick marks and labels.

Loading thumbnail…

Fork of 5 Buddhas

A dense field of semi-transparent, randomly rotated and colored polygons overlays a large green SVG canvas, beneath which a single intricate Buddha silhouette is rendered as a red path. The polygons are generated through nested `Array.map` loops in React, with each point calculated using `Math.random()` for position, fill color, and rotation. The Buddha path is drawn using raw SVG path data within a `<g>` transform, combined with the React rendering approach.

Loading thumbnail…

Fork of 5 Buddhas

A screen of blackness is scattered with over 200 small, randomly positioned, semi-transparent circles, their fill colors randomly sampled from a palette of blues and reds. At the center, a large, ornate SVG path renders a single Buddha silhouette in white. The visualization is built with React and uses the ReactDOM library to mount the SVG. It applies a `transform` attribute to scale and translate the path, and uses JavaScript's `Math.random()` directly in the code to generate circle positions and colors.