Skip to main content
SimilarExport ZIP
100%

Area_Chart_Visualisation_LakshmiMaddukuri

✓ Published0🌍 Public
Llakshmisurekhamaddukuri@my.unt.edu
Last edited Mar 25, 2025
Created on Mar 24, 2025
Forked from HTML Starter

This area chart displays the average body mass of different penguin species, using red data points over a light blue filled area. The visualization is built with D3 v7 and rendered as an SVG, pulling data from a remote TSV file. It computes averages per species using D3’s `scalePoint` and `scaleLinear` for axes, while an interactive tooltip appears on hover via `d3.select` and mouse events, enhancing data exploration.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Area Chart- Deeksha Kondam

This area chart displays the average body mass of three penguin species—Adelie, Chinstrap, and Gentoo—using animated hover interactions that enlarge data points and reveal exact values. Built with D3 v7, it uses `d3.rollups` to aggregate the CSV data, `d3.scalePoint` and `d3.scaleLinear` for positioning, and `d3.area` with a monotone curve to render the filled SVG path. Circles respond to mouseover/mouseout via D3 transitions, while axes and labels are generated with `d3.axisBottom` and `d3.axisLeft`.

Ddeekshakondam@gmail.com
83% match
Loading thumbnail…

hemanth 71

This visualization presents a species-wise area chart of the total body mass for penguins, derived from the Penguins Size dataset. Using D3.js v7, the code groups the CSV records by species and sums the body mass values to generate distinct area segments. A band scale positions species along the x-axis, while a linear scale maps body mass to the y-axis. The `d3.area` generator draws the filled path, with `d3.axisBottom` and `d3.axisLeft` providing labeled axes. The chart renders as SVG, showcasing aggregated size trends across penguin types.

Hhemanthmaddila13@gmail.com
79% match
Loading thumbnail…

AREA PLOT pca

This area chart visualizes BMI values for individuals, with each point color-coded and interactive. The chart uses D3.js v7 to fetch and parse CSV data from a GitHub gist, then renders an SVG area path and circles representing BMI readings. Users can hover over any data point to see a tooltip with the precise BMI value, which also changes the dot’s color and size. The visualization includes labeled axes for Individuals and BMI, with a light green fill for the area and responsive hover effects.

CChaturyaAkhilaPallem@my.unt.edu
75% match
Loading thumbnail…

Scatter Plot

A scatter plot maps penguin flipper length to body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using cyan, magenta, and green. The SVG visualization is built with D3 v5, using `scaleLinear` for axes, `extent` to compute domains, and `axisLeft`/`axisBottom` for ticks. Data is loaded as CSV from a GitHub gist, and each circle’s size is fixed at radius 5 while bill dimensions are stored as extra attributes. The chart includes a title and cursive font styling for axes.

Kkrishnareddy23
75% match
Loading thumbnail…

Penguin Data _Niharika Reddy Amanaganti

This scatter plot visualizes penguin measurements, with flipper length on the x-axis, body mass on the y-axis, and each point colored by species (orange for Adélie, red for Chinstrap, green for Gentoo). Using D3 v5 and React, the code loads a CSV dataset via `d3.csv`, parses numeric columns, and renders circles with `d3.scaleLinear` for axes and `d3.axisLeft`/`d3.axisBottom` for tick marks. The SVG is sized to the window, and point radius is fixed while culmen dimensions are stored but not visually mapped.

NNiharika Reddy Amanaganti
74% match
Loading thumbnail…

ICE-6 Scatter Plot- Sharanya Javvaji

This scatter plot displays penguin flipper length against body mass, with each point colored by species using a custom color mapping function. The chart also encodes culmen dimensions in the circle’s rx and ry attributes, though these are not visually varied since the radius is fixed. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map scales and axes, while loading data from a CSV via `d3.csv`. Rendered as SVG in a React project, it includes axis labels and a title, with the body margin removed for a full-screen layout.

SSharanya1307
74% match
Loading thumbnail…

PieChartVisualisation_LakshmiMaddukuri

This visualization shows the distribution of breast cancer tumor sizes, categorized as Small, Medium, or Large based on the mean area from the dataset. A pie chart displays the count of records in each category, with interactive tooltips revealing exact counts on hover. The chart is rendered as SVG using D3 v7, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for slice geometry, coloring, and a custom legend. Data is loaded from a TSV file via `d3.tsv` and aggregated with `d3.rollup`.

Llakshmisurekhamaddukuri@my.unt.edu
74% match
Loading thumbnail…

act6q3

This example shows a scatter plot of penguin species, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization loads data from a remote CSV, parses numeric fields, and renders circles using D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs onto an SVG canvas. The chart includes labeled axes and a title, with axis text styled in cursive.

Sshravan.s0710@gmail.com
74% match