Skip to main content
SimilarExport ZIP
100%

Q1_piechart

✓ Published1🌍 Public
Sshaiksajidali
Last edited Apr 17, 2024
Created on Apr 17, 2024

This interactive pie chart visualizes the worldwide gross revenue of ten top-grossing movies, with each slice labeled by movie title and a hover tooltip displaying exact values. A color legend on the right highlights slices on mouseover by dimming non-matching arcs. The example uses d3.pie and d3.arc for chart construction, d3.select for SVG manipulation, and transitions to animate opacity changes. Data loads from a CSV file using d3.csvParse, with colors generated via HSL values.

AI-generated description
ISC Licensed

Similar vizzes

Loading thumbnail…

Q1_piechart

This pie chart visualizes the worldwide gross revenue of movies from a CSV dataset, with each slice representing a single film. Hovering over a slice reveals a tooltip showing the movie title and its exact box office earnings. The chart is built using D3.js v7, employing `d3.pie()` for the layout, `d3.arc()` for the slices, and `d3.scaleOrdinal` with a color scheme for differentiation. It also includes an interactive legend and axis labels, all rendered as SVG within an HTML page.

Sshaiksajidali
93% match
Loading thumbnail…

vyjuhub1

This interactive pie chart visualizes box office revenue for ten blockbuster movies, with each slice sized proportionally to earnings in billions. The chart renders in SVG with a color-coded legend positioned to the right. Users can hover over slices to reveal a tooltip displaying the movie’s year and revenue, using mouse events that toggle visibility and track cursor position. The code employs D3 v7 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with the `schemeCategory10` palette.

Vvyjayanthimamidipalli@gmail.com
83% match
Loading thumbnail…

Activity-7_Question-1

This D3.js pie chart visualizes box office earnings for a dataset of movies, with each slice sized by revenue and labeled with the film’s title and earnings in millions. Hovering over a slice reveals a tooltip with genre, release year, IMDB rating, and franchise details. The visualization uses `d3.pie`, `d3.arc` for slice geometry, and `d3.scaleOrdinal` for color mapping, with custom SVG text labels, connector polylines, and a legend listing each movie’s earnings. Data is loaded asynchronously from a CSV URL via `d3.csv`.

Hhoneyravuri.711@gmail.com
81% match
Loading thumbnail…

Pie Chart , ICE-7

A pie chart visualizes the net worth in billions for various movies, with each slice colored and labeled to show the corresponding value. The chart is rendered as an SVG using D3 v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and map colors. Data is loaded from a CSV file via `d3.csv`, and a legend on the right lists each movie title alongside its net worth. The visualization emphasizes clear labeling and color coding to compare budget figures across films.

Ggaddamthanmayeereddy759@gmail.com
80% match
Loading thumbnail…

Activity7-Q1

This interactive pie chart visualizes the distribution of total movie ratings by genre, sourced from a CSV file of movie ratings. A D3 v7 pie layout and arc generator create the slices, with an ordinal color scale distinguishing each genre. Hovering over an arc triggers a tooltip displaying the genre name and its aggregated rating. A legend on the right maps colors to genres, and the SVG chart uses static rendering with animation only for tooltip transitions.

119n81a0581sunny@gmail.com
79% match
Loading thumbnail…

Fork of Piechart of NYC Food Data

This pie chart visualizes the net worth of movies in billions, using a dataset of movies from a CSV file. The chart displays labeled segments and a legend with movie titles and their corresponding values, with colors assigned via a categorical scale. Built with D3 v5, it uses the `pie` and `arc` generators to create the chart, and `scaleOrdinal` for color mapping. The data is fetched from a GitHub-hosted CSV, and the visualization is rendered in SVG within an HTML page.

Ggaddamthanmayeereddy759@gmail.com
78% match
Loading thumbnail…

dataq1

This example displays six small pie charts, one for each movie genre, showing the proportion of ratings across five categories from "Below 5.0" to "Above 8.5." The charts are arranged vertically within a single SVG, with each genre’s chart positioned using a translated group. The code builds the visualization with D3.js v6, using `d3.pie()` to compute arc angles, `d3.arc()` to generate SVG path data, and `d3.scaleOrdinal()` with `d3.schemeCategory10` for coloring rating categories. A legend identifies the color mapping for each rating range.

Pp99vijaya@gmail.com
78% match
Loading thumbnail…

q1

This example shows how movie genres are distributed across rating categories using a pie chart, with each slice sized according to the percentage of movies in a particular genre. It loads D3 v7 via UNPKG and uses the `d3.pie` and `d3.arc` APIs to generate the chart, with `d3.scaleOrdinal` for color encoding and `d3.select` for DOM manipulation. Interactive tooltips appear on mouseover, displaying the genre name and percentage, while text labels inside each slice show the computed percentage values. A legend is built dynamically using D3's selection and data-binding methods.

Ppnamitha46@gmail.com
78% match