Skip to main content
SimilarExport ZIP
100%

Activity7_Task9_Question2

✓ Published0🌍 Public
SShasankreddyganta@my.unt.edu
Last edited Apr 21, 2024
Created on Apr 21, 2024
Forked from Hello VizHub

A D3 area chart displays the duration of study across ten academic subjects, with a light blue fill and monotone curve smoothing. The data is hardcoded as an array of objects containing Subject, Duration, Format, and Year attributes. Using `d3.scaleBand` and `d3.scaleLinear` for positioning, the chart renders an SVG with `d3.area`, `d3.curveMonotoneX`, and axes generated by `d3.axisBottom` and `d3.axisLeft`. Labels for "Subject" and "Duration (weeks)" are added, with margins applied via a translated SVG group.

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…

Activity-9_Question-2

This example shows a D3.js area chart of average weekly temperatures, using a fixed sample dataset of seven days with values in Celsius. The chart renders as an SVG, with a steel-blue filled area beneath a line that plots each day’s temperature. The implementation uses a `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.area` generator to create the path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the chart includes labels for both axes.

Ttharunramula@gmail.com
78% match
Loading thumbnail…

Task9-Question 2

This example shows an area chart of net scores over time, rendered as a yellow, semi-transparent shape on an SVG canvas. It loads time-series data from a remote gist file, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to map values. The chart draws the area path via `d3.area`, adds axes with `d3.axisBottom` and `d3.axisLeft`, and includes formatted date ticks and axis labels.

Kkowshiksamudrala08@gmail.com
78% match
Loading thumbnail…

Task_9_Question_9

This example displays an area chart of the number of days in each month for the first half of the year, using a small hardcoded dataset of six monthly values. It renders an SVG visualization with D3 v7, employing `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the day count, and a `d3.area()` generator to create the filled path. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labeled text for both dimensions. The chart is drawn entirely client-side using the D3 library loaded from UNPKG.

Ttarunskuruvadi@gmail.com
78% match
Loading thumbnail…

Activity 7.1 Question 2

This example shows an area chart of total exam scores for individual students, plotted along a categorical Student ID axis on the x-axis and a linear Total Score axis on the y-axis. It loads D3 v6 from a CDN and uses `d3.csv` to fetch remote student score data, then renders an SVG path using `d3.area`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with labels added for both dimensions.

Ppenujulilikhil01020@gmail.com
77% match
Loading thumbnail…

Activity-9_Question-2

This example shows an area chart of temperature over time, with a filled region beneath a line that maps date to temperature readings. The visualization uses D3 v5 to load a CSV dataset from a gist, parse dates with `d3.timeParse`, and create the chart with `d3.area` and `d3.scaleTime`/`d3.scaleLinear`. It renders to an SVG via a `path` element, styled with a categorical color scheme, and includes labeled x- and y-axes using `d3.axisBottom` and `d3.axisLeft`. The data source is a remote CSV file, and the chart displays the unlabeled series with a single filled area.

Hharipadmavathim2023@gmail.com
77% match
Loading thumbnail…

Task9&10_Question2

This area chart visualizes the distribution of student marks, showing the number of students across different score ranges on the x-axis and y-axis. The chart uses a linear gradient fill that fades from a semi-transparent purple at the bottom to fully transparent at the top, creating a smooth shaded area beneath the curve. The visualization is rendered as an SVG using D3 v7, with scales defined via `d3.scaleLinear` and the area shape generated by `d3.area`. The dataset is loaded asynchronously from a GitHub gist CSV file using `d3.csv`.

Kkondaveeti.bhargavi7780@gmail.com
77% match
Loading thumbnail…

Task9_Question2

This area chart visualizes a time series dataset loaded from a CSV file via `d3.csv`. It displays data points on a linear `xScale` (Year) and `yScale` (Value), with a purple filled path generated by `d3.area()`. The chart includes SVG axes rendered with `d3.axisBottom` and `d3.axisLeft`, labeled "Year" and "Value". The code runs within a React environment using D3 v7, appending elements to an HTML div with an SVG.

BBindumadhavi
77% match
Loading thumbnail…

activity7_question2

This example shows a stacked area chart of course enrollment by category (Technology, Business, Design) over time, where the colored regions represent the number of students enrolled in each category per year. The chart is rendered as an SVG using D3 v7, with `d3.csv` loading the data from a GitHub gist, `d3.area` generating the stacked paths, and `d3.scaleLinear` mapping the year and enrollment values. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with a legend and axis labels included.

Hhoneyravuri.711@gmail.com
77% match