M

malampatiramya03@gmail.com

@chetanaramyamalampati·19 public vizzes

Loading thumbnail…

Line chart

The chart shows total COVID-19 deaths over time in Afghanistan during 2020, using a line chart to display the trend across the year. It includes axes, labels for months and total deaths, and a tooltip that appears on mouse movement to highlight specific data points. The visualization is built with D3 v7, loading CSV data via `d3.csv`, parsing dates with `d3.timeParse`, and generating the line with `d3.line`. A `d3.bisector` finds the nearest data point, while an SVG circle and HTML tooltip provide interaction. The line path uses steelblue styling on an SVG canvas.

Loading thumbnail…

Project Area Chart

This example shows the progression of total COVID-19 cases over time using a filled area chart. The chart plots dates on the x-axis and case counts on the y-axis, with a steelblue area beneath the line and circular markers on each data point. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.area to generate the path. Interactive tooltips appear on mouseover via D3's transition and style methods, while the SVG rendering includes rotated tick labels and axis annotations.

Loading thumbnail…

Project Bar Chart

This bar chart displays the average salary in USD for various job titles, using data loaded from a CSV file via d3.csv. Each bar is colored with a categorical scale (d3.scaleOrdinal and d3.schemeCategory10) and shows a hover tooltip with the title and salary. The chart uses d3.rollup to calculate mean salaries, d3.scaleBand and d3.scaleLinear for axes, and includes rotated x-axis labels for readability.

Loading thumbnail…

Project boxplot

This chart displays the average salary for different job titles, using bars with distinct colors and a legend to identify each category. Hovering over a bar reveals a tooltip with the exact job title and salary amount. The visualization is built with D3.js v7, using `d3.csv` to load data, `d3.rollup` and `d3.mean` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and interactive mouseover events to control tooltip opacity. The SVG render includes rotated x-axis labels and a custom legend.

Loading thumbnail…

Area Chart

This area chart visualizes the relationship between average salary and total COVID-19 cases across different work models. The chart uses a linear x-axis for average salary and a linear y-axis for total cases, with a filled steel-blue area beneath the curve. Built with D3 v7, the code processes two CSV datasets using `d3.rollup` and `d3.sum` to aggregate case data, then renders the area with `d3.area`, adds axes with `d3.axisBottom` and `d3.axisLeft`, and implements interactive tooltips on mouseover.

Loading thumbnail…

Assignment-2 Q.2.1

This example shows a temperature data area chart with interactive tooltips, displaying temperature readings across cities and dates. The SVG chart uses d3.area to render the filled path and d3.scaleBand for the categorical x-axis, with d3.csv loading the external temperature dataset. Circle markers at each data point trigger tooltips on mouseover using D3 transitions, while axes are drawn with d3.axisBottom and d3.axisLeft. The visualization updates tooltip content with city, date, and temperature values in degrees Celsius.

Loading thumbnail…

Assignment-2 Q1.1

This example visualizes browser market share data as a pie chart. The chart uses D3.js v7 to load CSV data from a GitHub gist and render it as SVG arcs, with each slice colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. Interactive tooltips appear on mouseover, displaying the browser name and percentage. A legend lists each browser with a corresponding color swatch, and the chart includes a title and axis labels.

Loading thumbnail…

Activity-6 Q.4.1

This bubble chart visualizes the relationship between sports' popularity, participation, and revenue, where each circle represents a sport, with its x-position mapped to participation and y-position to popularity, while the circle radius encodes revenue. The color distinguishes each sport. Built with D3 v6, the visualization uses `d3.scaleLinear` for axis and radius scaling, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG circles. Interactive tooltips appear on mouseover, displaying the sport's values. Axes, labels, and bottom/left axis ticks are generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity-6 Q.3.6

This example displays a scatter plot of buyer data, showing the relationship between the number of reviews and the price of products, with points colored by genre (positive or negative). The visualization uses D3 v7 to fetch a CSV file from a GitHub Gist, parse it, and render the points as SVG circles. D3’s scaleLinear functions map the data values to pixel coordinates, while d3.axisBottom and d3.axisLeft create the labeled axes. A simple legend, built using D3’s data join, indicates the categorical color mapping via scaleOrdinal.

Loading thumbnail…

Activity-6 Q2.3

This example displays a stacked bar chart that visualizes survey responses by categorizing them into positive and negative feedback across "Yes" and "No" output groups. The code loads Chart.js and renders the chart to a canvas element using the `Chart` API with a bar type. It presents two datasets for positive feedback (teal) and negative feedback (red), each with hardcoded values, and configures both axes for stacked scaling.

Loading thumbnail…

Activity-6 Q.1.2

A horizontal bar chart displays 2010 population estimates for 20 countries, sorted by country name, with light green bars and blue axis ticks. The chart uses D3 v5 scales (`scaleBand`, `scaleLinear`) to position bars and axes, while React components render SVG elements. Data loads from a GitHub CSV via `d3.csv`, with population values converted to billions using `d3.format`.

Loading thumbnail…

Activity_6 Q1.1

This horizontal bar chart ranks the population of the top 10 countries for the year 2000, using the United Nations dataset fetched from a GitHub CSV. The React application uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to the SVG canvas. Green bars are rendered via the custom `Marks` component, which includes a tooltip (`<title>`) showing the formatted population (e.g., “1.28B”). Styled axes come from `AxisBottom` and `AxisLeft`, with blue tick lines and formatted labels using `d3.format`.

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes in purple and white form a symmetric, layered mandala-like composition on a dark floral background. Each Buddha path is rendered as an SVG `<path>` element within a `<g>` group, transformed with different `translate` and `scale` values. The React app builds the visualization by mapping over the `array` of numbers to generate the six layers, setting stroke and fill colors per path. The rendering uses React 16.10 and raw SVG, with no external data source beyond the embedded path coordinates.

Loading thumbnail…

Activity6-Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each circle’s position maps to horsepower (x-axis) and torque (y-axis), while its radius encodes highway MPG and its color distinguishes car make, revealing trends like high-performance brands clustering at higher horsepower and torque with lower fuel efficiency. The visualization uses d3.v7 to load CSV data and render an SVG with animated circle transitions, hover tooltips showing the car make, and legends for both bubble size (MPG) and categorical color.

Loading thumbnail…

Activity6 - Tutorial 3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for different flower species. The D3.js v7 code uses `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` to assign distinct shapes to each species, and a custom legend showing the shape-to-species mapping. Data loads asynchronously from a GitHub-hosted CSV file using `csvParse`, with axes generated via `axisLeft` and `axisBottom`.

Loading thumbnail…

Activity 6 - Task3

This interactive scatter plot visualizes the Iris dataset, encoding four flower measurements across two plots using D3 v6. The main chart maps petal length against petal width, while each point’s radius and fill color—skyblue, lightgreen, or orange—encode sepal length, sepal width, and species via D3 scaleLinear, extent, and a custom marker function. Rendered as SVG circles, the visualization uses axisLeft and axisBottom to generate labeled axes with rotated text, with data loaded asynchronously from a remote CSV via D3’s csv parser.

Loading thumbnail…

Activity 6 - Task2

This stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each bar segment representing a rating band from below 5.0 to above 8.5. The visualization uses d3.stack() to compute stacked segments, d3.scaleBand for genre positioning, and d3.scaleOrdinal with a categorical color palette. Hovering over a segment triggers a tooltip showing the precise percentage via d3.format. The chart renders as SVG with axes generated by d3.axisBottom and d3.axisLeft, and reads data from a CSV file containing genre and rating proportions.

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the population of 30 countries for 2020, with country names on the y-axis and population values on the x-axis. Rendered as SVG in a React framework using D3 v5, the chart uses `scaleBand` and `scaleLinear` to map data, and custom `AxisBottom` and `Marks` components built with React. Population values are formatted using D3's `format` with `siFormat`, converting billions to "B". Data is loaded asynchronously from a GitHub-hosted CSV via `useData` hook and D3's `csv` function.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha outlines appear in bright, erratic colors against a black background. The visualization generates a dense field of randomly rotated and positioned diamond polygons, built with nested array maps in React, while a large SVG path traces the central Buddha figure. The code combines React 16 and ReactDOM with raw SVG `<polygon>` and `<path>` elements, using JavaScript’s `Math.random()` for color, placement, and rotation, producing a chaotic, layered composition.