Skip to main content
Log in
K

kamalini.ponnuru11@gmail.com

@kamaliniPonnuru·15 public vizzes

Loading thumbnail…

Activity_7_AreaChart

This area chart visualizes the total sales of Rolex watches in India over a decade, with the x-axis representing the year and the y-axis showing total sales figures. The chart uses D3 v5 functions including `area` and `line` generators with `curveBasis` for smoothing, along with `scaleTime` and `scaleLinear` to map data to coordinates. The code also employs `axisBottom` and `axisLeft` for labeled axes, and imports data from a CSV file containing yearly sales records. The visualization is rendered as an SVG, with a semi-transparent steelblue area and a darkblue line overlay.

Oct 30, 2024
Loading thumbnail…

Activity_7_PieChart

This pie chart visualizes the distribution of watch models by brand, using an interactive legend and tooltips to display exact counts and percentages. The chart is rendered with SVG elements and animated transitions, built using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs alongside React. Data is loaded from a remote CSV and aggregated client-side, with hover interactions revealing detailed brand statistics.

Oct 30, 2024
Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the percentage of each rating level within different music genres, revealing how genre influences ratings. Each bar represents a genre, with segments colored by rating level, and hovering over a segment displays the precise percentage via a tooltip. The visualization uses d3.v7 with SVG rendering, employing `d3.stack()` for stacking, `d3.scaleOrdinal` for colors, and `d3.scaleBand` for the y-axis. Data is loaded from a local CSV file using `d3.csv`.

Oct 22, 2024
Loading thumbnail…

Activity6_Task1Question2

This visualization displays the top 20 most populous countries in 2010 as a horizontal bar chart, with population values encoded by bar width and country names listed on the y-axis. The chart uses React with D3 v5 APIs, including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements rendered through a custom `Marks` component. Population data is loaded from a CSV file using `d3.csv`, sorted descending, and formatted with D3's `format('.2s')` to convert numbers into billions. Axis ticks are styled with CSS classes.

Oct 17, 2024
Loading thumbnail…

Activity6_Question3

This interactive scatter plot shows the relationship between square footage and price for real estate listings across multiple cities, with each city assigned a distinct color in a legend. Built with D3 v7 and SVG, the visualization includes labeled axes and hover tooltips that display property details. The code uses `d3.csv` to load the in-memory data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for city-based coloring. Circle elements represent individual properties, and mouseover events trigger a transition-based tooltip update.

Oct 17, 2024
Loading thumbnail…

Activity6_Question4Bubble chart

This bubble chart visualizes the correlation between units sold, average price, and customer satisfaction for various iPhone models. Using D3 v7, the chart renders SVG circles positioned by linear scales for price and units sold, with radius encoding customer satisfaction ratings. Colors map to individual models via an ordinal scale using `d3.interpolateTurbo`. Interactive tooltips appear on mouseover, and legend circles show size reference points. Data is loaded from a CSV file containing model specifications and performance metrics.

Oct 17, 2024
Loading thumbnail…

Activity6_Question4

This bubble chart visualizes the relationship between iPhone model attributes—units sold, average price, and customer satisfaction—using D3.js v7. The data from `appleSalesChart.csv` positions each bubble by make and model, with bubble size representing units sold and color encoding price tiers. The chart includes an x-axis for average price, a y-axis for customer satisfaction, and a legend for bubble size. Interactive tooltips display exact values on hover, while the SVG rendering uses D3's scale functions for axis mapping and color encoding.

Oct 17, 2024
Loading thumbnail…

Activity6_Task4Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while bubble size reflects highway MPG and color distinguishes make. Built with D3 v7, the SVG renders animated hover interactions via tooltip events. The legend maps MPG values to circle radii, and a color scale applies d3.interpolateTurbo to the categorical makes.

Oct 17, 2024
Loading thumbnail…

Activity6_Task3.1 Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each species distinguished by a unique symbol shape. The visualization uses d3.scaleOrdinal and symbolsFill to assign distinct shapes, and includes a custom shape legend generated with d3.symbol. Data is loaded via fetch and parsed with d3.csvParse. The chart is rendered using D3 v7, with axes created through d3.axisLeft and d3.axisBottom, and marks drawn as SVG path elements using the d3.symbol generator.

Oct 17, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three species (setosa, versicolor, and virginica) with points colored by species. The D3 v6 code loads CSV data from a GitHub URL, maps values using linear scales, and renders circles in an SVG. Axes are labeled with rotated text, and the chart employs the `axisLeft` and `axisBottom` functions to display tick marks.

Oct 17, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, where each bar segment represents a rating category from "below 5.0" to "above 8.5." Hovering over a segment reveals the exact percentage via a tooltip. Built with d3.v7, the visualization uses `d3.stack()` to create the stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisBottom()` for the percentage x-axis. Data is loaded from CSV using `d3.csv()` and rendered as SVG elements with interactive mouse events for the tooltips.

Oct 17, 2024
Loading thumbnail…

Activity6_Question1

This visualization presents a horizontal bar chart showing the population of the top 10 countries in the year 2000, sorted in descending order. React with D3 v5 renders the SVG, using `scaleBand` for the categorical y-axis of country names and `scaleLinear` for the population values on the x-axis. The data is fetched via D3's `csv` function from a GitHub raw file, filtered and sorted. Tooltips are provided via SVG `<title>` elements, and axis labels are rotated for readability.

Oct 17, 2024
Loading thumbnail…

Activity6 Q1

This visualization displays the population of 10 countries in the year 2000 as a bar chart using D3 v7. The chart loads CSV data from a GitHub repository, filters for the year 2000, and takes the first 10 records. It uses d3.scaleBand for the categorical x-axis, d3.scaleLinear for the population y-axis, and renders steelblue bars in an SVG container. The code includes rotated x-axis labels and axis titles for Country and Population.

Oct 17, 2024
Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart of the 2020 populations for the top 30 countries, using a dataset of country-level population values from a CSV hosted on GitHub. The bars are drawn as SVG `<rect>` elements, with axes rendered using custom components that leverage D3’s `scaleBand` and `scaleLinear` to map country names and population numbers to screen coordinates. The visualization is built with React, using D3 v5 for data loading and scaling, and follows a tidy narrative. Tooltips reveal the exact population value (in billions) when hovering over each bar.

Oct 16, 2024
Loading thumbnail…

Buddha

A meditative portrait of the Buddha emerges from a dense field of repeated SVG images, overlaid with a single, intricate vector path that traces the figure's silhouette. The visualization layers a flower background image across the entire canvas, while the path, composed of numerous cubic Bézier curve commands, delineates the seated form. Built with React and rendered as SVG, the code maps over arrays to generate multiple background layers, with the primary subject drawn via a `path` element's `d` attribute.

Oct 16, 2024