Skip to main content
SimilarExport ZIP
100%

Activity 7: Area Chart

✓ Published1🌍 Public
Oorusushanth2002@gmail.com
Last edited Apr 10, 2025
Created on Apr 10, 2025
Forked from Hello VizHub

An area chart displays battery life versus screen size across phone categories. The chart uses semi-transparent, color-coded areas for each category, which are differentiated by a legend. Data is loaded from a CSV file using `d3.csv` and rendered as SVG with D3 v7. The visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for colors, and `d3.area` with `d3.curveMonotoneX` to create smooth, filled areas for each category.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7.1: Area Chart

This area chart visualizes the relationship between screen size and battery life for mobile devices, grouped by category. It uses stacked, semi-transparent areas with a monotone curve to show how battery life varies across screen sizes for each category. The visualization is built with D3 v7, loading CSV data from a GitHub gist and rendering as SVG. It includes axes for screen size and battery life, plus a legend, using `d3.area`, `d3.scaleLinear`, and `d3.schemeTableau10` for coloring.

AAbhinay Peeta
93% match
Loading thumbnail…

Activity7_area_chart

This area chart visualizes monthly sales data for electronics, clothing, furniture, and toys across four smoothed, semi-transparent colored areas. It loads CSV data from a GitHub gist using `fetch` and `csvParse`, then renders an SVG chart using D3 v5. The visualization employs `scaleBand` and `scaleLinear` for axes, `area` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for ticks. A legend maps each category to its fill color, with styling defined in external CSS.

11810vineeth@gmail.com
80% match
Loading thumbnail…

Activity 6 Q 4.9

This bubble chart compares smartphone brands across battery life (hours), screen size (inches), and charging speed (watts). Each circle’s x-position encodes battery life, y-position encodes screen size, and its area encodes charging speed, with colors distinguishing brands. The D3.js v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data comes from a hardcoded CSV-like array. A hover tooltip displays exact values for each smartphone model.

RRukmini Devi Y
79% match
Loading thumbnail…

Activity 6 quiz 6

This scatter plot visualizes phone specifications, showing the relationship between screen size and battery capacity, with each point’s radius scaled by camera megapixels and its color indicating the brand model. Built with D3 v6, it loads CSV data from a GitHub gist, uses `scaleLinear` and `extent` for axes, and renders circles, axes, and labels as SVG. The chart omits a legend but provides axis titles for battery and screen size.

Ssreejabommineni1506@gmail.com
78% match
Loading thumbnail…

Area chart - Activity 7

This example uses D3 v6 to visualize total energy consumption by electric vehicle model. It loads CSV data from a GitHub repository, aggregates energy values per vehicle model with `d3.rollups`, and renders an area chart using `d3.area()`, `d3.scaleBand()`, and `d3.scaleLinear()`. The SVG output includes rotated x-axis labels, a y-axis title, and value labels above each point.

Ssahithigovindaraju@my.unt.edu
78% match
Loading thumbnail…

Activity 7.1.1

This area chart displays laptop sales across different months of the year. The visualization loads data from an external CSV file hosted on GitHub and renders a smooth, cardinal-curved area filled in yellow, with labeled X and Y axes. The implementation uses D3 v7 with several key APIs: `d3.select` to build the SVG container, `d3.scaleBand` and `d3.scaleLinear` for coordinate mapping, `d3.area` with `d3.curveCardinal` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Ssharanyabobbala@my.unt.edu
77% match
Loading thumbnail…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Aamarnadhkari98@gmail.com
77% match
Loading thumbnail…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Aamarnadhkari98@gmail.com
77% match