Skip to main content
SimilarExport ZIP
100%

Activity 7.1: Area Chart

✓ Published0🌍 Public
AAbhinay Peeta
Last edited Apr 10, 2025
Created on Apr 10, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7: Area Chart

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.

Oorusushanth2002@gmail.com
93% 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
78% 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…

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
77% match
Loading thumbnail…

Activity6__Task4

This bubble chart visualizes the correlation between processor speed, RAM, and battery life for various devices, with each circle's size encoding battery life and color representing the device category. Built with D3 v7, it renders as an SVG and includes interactive tooltips that display the exact specifications on hover. The chart uses `d3.scaleLinear` for x/y axes and bubble radius, while `d3.scaleOrdinal` maps device names to color categories. A legend shows both the battery-life scale and color-coding, drawn from the gadgetdata.csv file.

Vvarunreddy.gudigopuram@gmail.com
77% match
Loading thumbnail…

Activity7_Question2

This area chart shows average daily screen time in hours across different age groups, based on a CSV file loaded from a GitHub gist. The code uses D3 v7 to build the visualization, parsing the data with `d3.csv` and rendering the area path with `d3.area`. A point scale maps age categories horizontally, while a linear scale handles the vertical time axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. The SVG output includes labeled axes and a filled purple area with a dark stroke.

Eenochabraham97@gmail.com
77% match
Loading thumbnail…

Activity 7 Q2

This area chart visualizes the sales of Apple mobile devices from 2009 to 2019. The D3 v5 code creates a smooth, curved line and fills the area beneath it, with labeled axes and gridlines. The visualization loads data from a CSV file, which is parsed and formatted to extract the year and convert sales values to numbers. Using the `d3.area` and `d3.line` generators, the chart is rendered as an SVG, with time-based scaling for the x-axis and linear scaling for the y-axis.

Ssumithdugyala@my.unt.edu
77% 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
76% match