Skip to main content
SimilarExport ZIP
100%

Activity 7.2_Question 2

✓ Published0🌍 Public
Sshettisowmya01@gmail.com
Last edited Nov 3, 2024
Created on Nov 2, 2024

This example shows an area chart of star absolute magnitude by luminosity, using a light green, semi-transparent filled region to highlight the relationship between the two variables. The visualization loads CSV data from a GitHub repository and renders it as an SVG using D3 v6, with a logarithmic x-axis for luminosity and a linear y-axis for absolute magnitude. The code employs `d3.csv`, `d3.scaleLog`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, applying `curveMonotoneX` for smooth area boundaries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 3.1_Question

This example shows a scatter plot of star data, mapping temperature on the x-axis and luminosity on the y-axis. Each circle’s color corresponds to the star’s color category, using a fixed color map with gray as a fallback. The visualization loads CSV data from a GitHub URL, parses numeric fields with custom row handling, and renders SVG circles using D3 v6’s `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs. Axis labels are added manually, and the plot fills the full browser window.

Sshettisowmya01@gmail.com
80% 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
79% match
Loading thumbnail…

Activity 7.2_Question 1

This pie chart visualizes the distribution of star luminosity across five defined ranges, from "Very Low (0-0.1)" to "Very High (100+)". It aggregates data from a CSV file of stars, counting how many fall into each luminosity bin, and colors each slice with a corresponding gray-to-yellow ordinal scale. The visualization uses d3.csv for data loading, d3.pie and d3.arc for generating the SVG paths, and d3.scaleOrdinal for color mapping. An interactive HTML legend displaying each range and its count is positioned outside the chart.

Sshettisowmya01@gmail.com
79% match
Loading thumbnail…

Activity7_Q2

This example displays an area chart comparing tree species by average height and lifespan, with two overlapping translucent regions representing each metric. It loads data from a CSV file hosted on GitHub Gist and renders the visualization as an SVG. The code uses D3 v7 APIs including `csv`, `scaleBand`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to construct the chart. The `area` generator creates the filled paths, with categorical color coding—blue for height and orange for lifespan—and the chart adapts to the viewport size.

VVarshith Peddineni
78% match
Loading thumbnail…

Activity 7 question 2

This example visualizes genre ratings as a filled area chart, with each genre represented as a distinct colored area overlaid on a shared axis. The chart loads CSV data from a GitHub repository via `d3.csv`, uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, and renders paths with the `d3.area` generator. It includes axis labels, a title, and a legend built with SVG rectangles and text. Colors come from `d3.schemeCategory10`.

AAamani Chamarthi
77% match
Loading thumbnail…

activity7 Question 2

This example shows monthly visitor counts as a filled area chart, with the area colored in teal and labeled axes for month and visitor numbers. The code uses d3.csv to load data from a GitHub gist, then applies d3.scalePoint for the x-axis and d3.scaleLinear for the y-axis. It generates the area shape with d3.area and renders it as an SVG path, adding d3.axisBottom and d3.axisLeft for the chart axes.

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

Activity 7 Question 2

This area chart displays global average temperature over time, with the year on the x-axis and temperature in degrees Celsius on the y-axis. The chart is rendered as an SVG using the D3 v7 library, loading data from a CSV file provided via a GitHub gist URL. The code uses `d3.scaleLinear` for both axes, `d3.area` to create the filled area path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The area is filled with a semi-transparent steelblue color, and the chart includes labeled axes and a title.

Vvemulasai306@gmail.com
77% match
Loading thumbnail…

Activity - 7_Question - 2

This area chart displays monthly sales data over time, with the date on the x-axis and sales figures on the y-axis. The visualization loads CSV data from a GitHub Gist, parses date strings using `d3.timeParse`, and renders a filled area path with a steelblue color. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.area` for the area generator, and `d3.axisBottom`/`d3.axisLeft` to draw the axes, all within an SVG container.

Mmalisettisaisumanth@gmail.com
77% match