Skip to main content
SimilarExport ZIP
100%

activity9-2

✓ Published0🌍 Public
Ssahaspragna6@gmail.com
Last edited Apr 22, 2024
Created on Apr 21, 2024
Forked from Hello VizHub

This stacked area chart visualizes sea turtle population trends from 1900 onward across three categories—Green, Loggerhead, and Hawksbill—using time-series data loaded via `d3.csv`. The visualization uses `d3.stack()` to layer the series and `d3.area()` with `curveBasis` for smooth paths, while `d3.scaleTime` and `d3.scaleLinear` map years and counts. Axes employ `d3.axisBottom` and `d3.axisLeft`, with `d3.timeFormat('%Y')` for year labels and `d3-scale-chromatic` for color encoding. Tooltips appear on hover via appended `<title>` elements, and the chart resizes dynamically with the window.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Turtle test

This stacked area chart visualizes turtle population counts for three species—Green, Loggerhead, and Hawksbill—from 1940 to 2010, based on data from `data.csv`. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the areas and `d3.area` with `d3.curveBasis` to render smooth paths in SVG. The `d3-area-label` library positions white text labels within each area, while `d3.scaleOrdinal(d3.schemeDark2)` colors the series. Hovering turns areas black, and an interactive resize listener updates the chart’s dimensions.

CChristine Lanser
87% match
Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes sea turtle population trends from 1910 to 1990, showing the decline of Green, Loggerhead, and Hawksbill species using mock data. The chart uses d3.stack with ascending order, d3.area with curveBasis smoothing, and d3.scaleTime for the x-axis. Label placement employs d3-area-label, while hover interactions reveal species names via SVG titles. The visualization renders as SVG within an HTML page, using d3-scale-chromatic’s schemeDark2 for categorical colors and d3.axisBottom and d3.axisLeft for gridlines and tick marks.

Ggaryz1997
87% match
Loading thumbnail…

Sea Turtle Survival (mock data)

This stacked area chart displays the decline in sea turtle populations (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the three species, and `d3.area` with `d3.curveBasis` for smooth paths. Labels are positioned via the `d3-area-label` library, while axes use `d3.axisBottom` and `d3.axisLeft`. The visualization renders in SVG, with hover effects that turn areas black and tooltips showing species names.

CChristine Lanser
86% match
Loading thumbnail…

Untitled

A stacked area chart shows the changing levels of three turtle species—Green, Loggerhead, and Hawksbill—from 1901 to 2000, revealing a dramatic decline in all populations. The chart uses d3.area to render the stacked layers, with d3.scaleOrdinal and d3.schemeSet2 providing the color palette. Brushing, implemented via d3.brushX, allows zooming on the x-axis, while hovering highlights individual series by adjusting opacity. The d3-axis components handle the time-based and numeric scales, and the rendering is done with SVG.

CChristine Lanser
86% match
Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes mock sea turtle survival data for three species—Green, Loggerhead, and Hawksbill—over time, with each colored layer representing population counts. The chart uses D3 v4’s `d3.stack()`, `d3.area()`, and `d3.scaleTime()` to render the SVG paths, while `d3-area-label` positions the species labels inside each region. Axis ticks and gridlines are styled with CSS, and the y-axis title labels the population metric. Data is loaded from a CSV file, filtered to post-1900 dates, and the chart redraws responsively on window resize.

NNarayana Reddy
85% match
Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the declining populations of three sea turtle species—Green, Loggerhead, and Hawksbill—from 1910 to 1990, using mock data. The visualization uses d3.v4 with d3.stack and d3.area to construct the layers, while d3-area-label positions the species labels along the curves. It employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for colors, and includes hover effects that turn areas black, with basic tooltips revealing species names.

Aaniosindustries
84% match
Loading thumbnail…

Fork of Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the survival of sea turtle species (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart renders as SVG with D3 v4, using `d3.stack` and `d3.area` with `curveBasis` to create smooth stacked areas. Labels are positioned via `d3.areaLabel`, while hover effects reveal species names through built-in SVG `<title>` tooltips. The y-axis includes gridlines and a rotated title, with data parsed from an external CSV file using `d3.csv`.

Ppreethamkesa
82% match
Loading thumbnail…

Turtle Survival

This streamgraph visualizes the mock mortality rates of three sea turtle species (Green, Loggerhead, Hawksbill) from 1901 to 2000, showing their combined decline over time. The stacked area chart uses d3.nest to group data by year and d3.stack to layer the species’ counts. Each species is distinguished by a color from a d3.scaleOrdinal palette, with the SVG paths generated using d3.area. Axes are scaled with d3.scaleLinear, and data is loaded from a CSV file via d3.csv.

CChristine Lanser
80% match