S

Satish Nallamadugu

@Satishnallamadugu·17 public vizzes

Loading thumbnail…

web page

This gallery presents a collection of charts examining global demographic and economic indicators. The visualizations cover topics like population growth, land area, CO2 emissions, GDP, and life expectancy. The examples are rendered with a variety of tools, including static images created with Python and interactive maps built with D3.js. A Tableau dashboard is also included, showing population rankings and tax revenue. The D3.js visualizations use geospatial and scatter plot techniques, while the Python charts rely on data plotting libraries.

Loading thumbnail…

Pie Chart

This pie chart shows the number of accidents in each state in 2023, with each slice labeled by its value in thousands and a legend mapping colors to states. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, rendered as SVG elements. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and `scaleOrdinal` assigns colors to states. Slice labels are positioned using `arc.centroid`, while the legend and axis titles are added as HTML divisions.

Loading thumbnail…

Fork of Pie Chart

This fork of a D3 pie chart visualizes the count of students per major at UNT, using a dataset from a GitHub gist. The chart displays each major as a colored segment with a label showing the student count in thousands, and includes a legend to identify each segment. Built with d3.v5, the visualization uses the `pie`, `arc`, and `scaleOrdinal` APIs for layout and coloring, with SVG rendering for the final output.

Loading thumbnail…

Fork of ACTIVITY9-Q1

This fork from ACTIVITY9-Q1 is a pie chart depicting the number of employees in various technology sectors. It uses the D3.js v5 library to load CSV data from a GitHub gist, compute the pie segments with the `pie()` function, and render the chart as SVG. The visualization includes labeled percentage values within each slice, a legend, and uses a categorical color scale through `scaleOrdinal`. The chart is positioned within an SVG canvas and displays employee counts in thousands on both the slices and the legend.

Loading thumbnail…

satish_q2

This area chart visualizes monthly sales data loaded from a remote CSV file via `d3.csv`. It uses D3 v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to render a filled path in SVG. The chart includes labeled axes for Month and Sales, with the area fill styled in steelblue. Data comes from a Gist URL, and the rendering is SVG-based with fixed dimensions.

Loading thumbnail…

Satish Tutorial

This animated scatter plot displays the Iris flower dataset, cycling through four feature combinations on the x-axis while y remains sepal length. Colored circles represent species (skyblue, lightgreen, orange), with a legend and titles. Built with D3.js (v6), it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module, re-rendering SVG elements via `join` on a timer.

Loading thumbnail…

q3_satish

This D3.js v6 scatter plot visualizes a bird dataset by plotting Weight on the x-axis and Height on the y-axis. Each circle is colored according to the species, with a switch statement mapping species names to colors. The chart loads CSV data via the `d3.csv` promise, uses `scaleLinear` and `extent` to set the scales, and renders axis labels with custom styling. The SVG is sized to the full browser window, and the data is fetched from a GitHub raw URL.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films within five rating bands for each genre. The chart uses a horizontal layout with genre on the y-axis and percentage on the x-axis, enabling quick comparison of rating patterns. Each bar segment is colored according to its rating category, with a legend indicating the mapping. Hovering over a segment reveals the exact percentage for that rating band within the genre. The visualization is built with d3.v7, using stacked bar geometry, axis scaling, and a custom tooltip for interactive data exploration.

Loading thumbnail…

Activity6_Question2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating intervals from below 5.0 to above 8.5. The visualization uses d3.stack() to compose the stacked segments, d3.scaleBand() for the categorical genre axis, and d3.scaleLinear() for the percentage scale. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating level within the genre. The chart renders as SVG with ordinal color encoding and axes generated using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of Activity6_Question2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the percentage of ratings in five categories from "below 5.0" to "above 8.5". The visualization uses d3.stack() to create stacked segments, d3.scaleBand for the genre categories, and d3.scaleOrdinal with a custom color palette. Hovering over any segment reveals a tooltip displaying the exact percentage for that genre and rating level. The data comes from a CSV file loaded and processed with D3 v7, rendered as SVG elements.

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle represents a make, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size scaled to highway MPG using a linear scale and color assigned via an ordinal scale with interpolated turbo colors. The visualization includes a tooltip displaying the make on hover, a legend showing MPG values, and is rendered as an SVG with d3.v7, using scales like `d3.scaleLinear` and `d3.scaleOrdinal` alongside axis generators. Data comes from the included CSV file.

Loading thumbnail…

Activity6_Question-4

This bubble chart displays sales performance for ten products, plotting revenue on the x-axis and profit on the y-axis, with bubble size encoding units sold. The visualization uses a linear scale for both axes and a third linear scale to map units sold to bubble radii, with all bubbles rendered in steel blue with black outlines. The chart is drawn as an SVG using D3 v7, with axes and labels generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file using `d3.csv`, and circles are created with `.join('circle')` within an SVG group.

Loading thumbnail…

Activity6_Task4

This bubble chart shows sales performance by product, plotting Profit against Revenue where the size of each circle represents Units Sold. Built with D3 v7, it renders as SVG using `d3.scaleLinear` for the x, y, and bubble-size scales, `d3.axisBottom`, and `d3.axisLeft`. The code reads data from a local CSV file and uses the `d3.csv` API to load it.

Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length and petal length while encoding species through distinct point shapes. The chart includes labeled axes (Sepal Length, Petal Length) and a custom shape legend in the upper right. Built with D3 v7, it uses `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` for shape mapping. The visualization loads data asynchronously via `csvParse` from a GitHub-hosted CSV, then densely renders marks using `path` elements and the `symbol()` generator.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code loads the dataset from a remote CSV URL using `d3.csv` and renders the plot as SVG using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The plot includes axis labels and a red title, with the layout sized to the browser window via `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the impact of movie genre on IMDb rating distributions, showing the percentage of films within five rating bands across six genres. Hovering over any segment triggers a tooltip displaying the exact percentage value. The visualization uses d3.stack() to compute the stacked layout, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the percentage x-axis, and d3.scaleOrdinal with a custom color palette. Data is loaded from a CSV file and rendered as SVG rectangles with mouse event listeners for interactivity.

Loading thumbnail…

activity 6_Task 1

This visualization shows the population of ten countries in the year 2000 as a horizontal bar chart, with countries listed on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the scaling, while the AxisBottom and AxisLeft components generate the tick marks and labels. Data is loaded from a remote CSV file via d3.csv, and population values are formatted using d3.format with the '.2s' notation, displaying values in billions.