Task 9 & 10 D3 Q2 Area chart UN

100%

Task 9 & 10 D3 Q2 Area chart UN

✓ Published0🌍 Public

Last edited Apr 20, 2024

Created on Apr 20, 2024

This area chart displays quarterly worldwide user numbers for Twitter, Instagram, and Facebook from Q1 2016 through Q4 2020, with each dataset layered as a filled line using gradient colors. The chart uses Chart.js with the chartjs-plugin-zoom extension to enable interactive panning and zooming via mouse wheel or pinch gestures. It renders to a Canvas element within an 800x400 pixel container, and includes tooltips and a bottom-positioned legend for cross-platform comparison. The data is hardcoded in the script and reflects growth trends across the three social media platforms.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity8Task2UN

A horizontal stacked bar chart shows the percentage distribution of social media platform users across each month of 2023. The chart displays the total share for platforms like Facebook, Pinterest, and Twitter, with each bar segmented by platform and colored via a custom ordinal scale. Using D3 v7, the code loads a CSV file and applies d3.stack to compute the layered segments, while d3.scaleBand positions the months and d3.scaleLinear maps percentages. Interactive tooltips reveal exact values on hover, with axes rendered by d3.axisBottom and d3.axisLeft.

Uuzairnaeem15@gmail.com

79% match

Loading thumbnail…

Task1_Q2

This area chart visualizes the screen time of the top three social media applications across each month of 2023, with minutes on the y-axis and month on the x-axis. Each colored layer represents a different app, identified by a legend on the right side. Built with D3 v7, it uses `d3.stack()` to create stacked series, `d3.area()` for the path generation, and `d3.scaleBand` and `d3.scaleLinear` for the axes. Data is loaded from a remote CSV file, and the SVG is rendered with a categorical color scale from `d3.schemeCategory10`.

LLakshmi Keerthi

76% match

Loading thumbnail…

Area Chart Facebook Users

This area chart visualizes Facebook’s annual user growth from 2008 to 2017, emphasizing the rising trend through a filled curve beneath a black line. Built with D3 v5, it uses `scaleLinear`, `scaleTime`, `line`, `area`, and `curveBasis` to generate smooth SVG paths, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded via `csv` from a GitHub gist, with both the line and area paths appended to an SVG group. The chart highlights the dataset’s upward trajectory through the combination of stroke and fill styling.

PPavaniMangugari

71% match

Loading thumbnail…

Area chart

This area chart displays Facebook’s annual user growth from 2008 to 2017, using a smooth curved line and a filled area beneath it to emphasize the rising trend. The visualization loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, and renders axes with `d3.axisLeft` and `d3.axisBottom`. The line and area paths are generated using `d3.line` and `d3.area` with `d3.curveBasis`, while styled grid ticks and labels appear in green and orange. The SVG output includes custom tick formatting with `d3.format`.

Eeravellisaimeghana

70% match

Loading thumbnail…

Area_Chart_facebook_users_anually

This area chart displays Facebook’s annual user growth from 2008 to 2017, emphasizing the upward trend through a smooth, curved filled region. The visualization uses D3 v5 with `d3.area()` and `d3.line()` generators, both employing `curveBasis` for smoothing, while scales are created via `scaleLinear`. Axes are rendered with `axisBottom` and `axisLeft`, featuring green tick labels and orange gridlines. Data is loaded as CSV from a GitHub gist and parsed with `csv()`, then drawn as SVG paths within a fixed 930x450 viewport.

MMeghanaArepalli

70% match

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This chart displays Facebook annual users from 2008 to 2017 using both a black line and a pink filled area to emphasize the growth trend. The x-axis shows years and the y-axis shows user counts, with a green tick label style and orange grid lines. The visualization uses d3.csv to load remote data, d3.scaleLinear for both axes, and d3.line and d3.area generators with d3.curveBasis to create the smooth combined line and area paths. SVG rendering with custom margins and axis labels is implemented via d3.axisBottom and d3.axisLeft.

SSohilaBheemReddy

70% match

Loading thumbnail…

Task9-Question2

This area chart visualizes smartphone sales across multiple months, with distinct colored regions representing different product lines or years. The visualization uses stacked areas to show the cumulative contribution of each category over time, making it easy to compare relative proportions. Built with D3.js v7, the chart loads CSV data from a GitHub repository and uses d3.stack, d3.area, and d3.scaleBand to construct the stacked layout. SVG rendering handles the paths, axes, and rotated month labels, while a custom HTML legend with colored circles identifies each series.

LLayaMyadam@my.unt.edu

70% match

Loading thumbnail…

ques2-task9

This area chart shows the number of iPhone users per year, with a smoothed line and a filled area beneath it to emphasize the trend. The visualization is rendered as an SVG using D3 v5, and relies on the `d3` API to load and parse CSV data from a remote gist. It constructs linear scales for both axes, and uses `line`, `area`, and `curveBasis` to generate the chart’s paths, with custom tick formatting for the y-axis.

AAbdul Kareem

69% match