Skip to main content
SimilarExport ZIP
100%

Activity 7 question 2

✓ Published0🌍 Public
AAamani Chamarthi
Last edited Nov 7, 2024
Created on Nov 7, 2024
Forked from Hello VizHub

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`.

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 7 Area Chart

This example renders an area chart showing the proportion of ratings across different music genres. It uses stacked areas, colored with a custom palette, to display the data, with a legend identifying each genre. The chart is built with D3 v6, loading data from a CSV file via `d3.csv`. It creates an SVG visualization using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.area` generator for the areas, with axes and labels added via `d3.axisBottom` and `d3.axisLeft`.

Rraaghaveramireddy@my.unt.edu
86% match
Loading thumbnail…

Question2

This example displays a multi-series area chart of genre rating proportions using D3 v6. It loads CSV data from a GitHub gist, parses columns into separate genre series, and renders overlapping filled areas with a categorical color scheme alongside an x-axis for genres and a y-axis for ratings. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10`, outputting to an SVG container. A legend maps each genre to its corresponding color.

Ttallavijayalakshmi0710@gmail.com
86% match
Loading thumbnail…

Activity 7

This example visualizes the distribution of movies rated above 8.5 by genre as a pie chart, with a custom legend using distinct D3 symbols (circles, squares, triangles, diamonds, and crosses) for each genre. It loads CSV data asynchronously via `d3.csv`, converts the relevant column to numbers, and renders the chart as SVG using `d3.pie` and `d3.arc`. The visualization uses a color scale with `d3.schemeCategory10` and includes axis labels and a title, though no axes are drawn.

AAamani Chamarthi
85% match
Loading thumbnail…

activity7_question2

This stacked area chart shows the distribution of IMDb rating levels across movie genres, with each genre’s ratings stacked to total 100%. The visualization uses d3.stack() to compose the data, d3.area() with curveBasis for smooth paths, and d3.scaleBand and d3.scaleLinear for axes. A legend and axis labels clarify the rating categories. The data is loaded via d3.csv from a GitHub-hosted CSV file, and the SVG rendering uses color-coded areas to compare genre-specific rating proportions.

Nnishwitha.1032@gmail.com
85% match
Loading thumbnail…

Activity6_Q_3

This scatter plot visualizes the relationship between the percentage of ratings in the 5.0-6.5 range (x-axis) and the 6.5-7.5 range (y-axis) across different genres from a CSV dataset. Each data point is a colored circle representing a genre, with colors assigned via d3.scaleOrdinal. The code loads data using d3.csv, scales axes with d3.scaleLinear, and renders the visualization as an SVG using d3.select, d3.axisLeft, and d3.axisBottom, with axis labels styled via CSS.

AAbrarb702@gmail.com
85% match
Loading thumbnail…

Activity6_q6

This scatter plot visualizes the relationship between the percentage of ratings in the 5.0–6.5 range (x-axis) and the 6.5–7.5 range (y-axis) across different genres from a remote CSV dataset. Each circle represents a genre, colored by its category through a `d3.scaleOrdinal` color scheme, with tooltips revealing the exact values. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, scale axes, and render the SVG. Axis labels are styled via CSS classes, while the plot’s marks are drawn as SVG circles with a black stroke.

Jjahnavigummadi@my.unt.edu
85% match
Loading thumbnail…

Area Chart Question 2

This example displays an area chart that visualizes the rating proportions of different genres across multiple categories. The chart loads CSV data from a GitHub gist and uses D3 v6 to render the visualization as an SVG. It employs `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` to construct the areas, with axis labels and a legend showing each genre. The chart uses `d3.schemeCategory10` for color-coding the areas.

Vvankayalapatimounika2000@gmail.com
85% match
Loading thumbnail…

Activity7_Q2

This area chart visualizes total movie ratings aggregated by genre, using a dataset loaded from a GitHub-hosted CSV file via `d3.csv`. The chart displays each genre on the x-axis with a rotated-axis label and total ratings on the y-axis, rendered as a filled purple area path generated with `d3.area()`. Circles mark each data point and reveal a tooltip on mouseover. The visualization employs `d3.rollup` to sum ratings and `d3.scaleBand` and `d3.scaleLinear` for axes, with SVG rendering and animated tooltip transitions.

119n81a0581sunny@gmail.com
84% match