Skip to main content
SimilarExport ZIP
100%

Fork of

✓ Published0🌍 Public
NNaveed945
Last edited Jul 3, 2022
Created on Jul 3, 2022
Forked from ICE-7 PIE CHART

A donut chart displays box office collections for the film Bahubali across Indian cities, with each slice representing a city's revenue in crores. The visualization uses D3.js v4 to generate SVG paths via `d3.arc` and `d3.pie`, with a `d3.scaleOrdinal` color scheme. Interactive hover effects highlight slices and show tooltips with city names and values, while a separate legend lists all cities.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Pie Chart ICE 7

This chart displays the top 10 Tollywood heroes by movie count, with each slice of the donut proportional to the number of films and labeled with a formatted value. A legend on the right pairs each hero's name with a color swatch and the same numeric count. Built with D3 v5, the visualization fetches CSV data from a GitHub Gist and uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the SVG paths and color mapping, while custom text elements render the labels and legend.

AArv1228
74% match
Loading thumbnail…

Fork of HTML Starter

This visualization summarizes South Indian movie data, displaying total count, average IMDB rating, and average box office earnings in a text summary, alongside a full data table and a bar chart of box office collections. The bar chart uses d3.scaleBand and d3.scaleLinear to map movie titles and revenue, with axes generated via d3.axisBottom and d3.axisLeft. The code loads a CSV dataset with d3.csv, cleans the data, and renders the SVG chart with blue rectangles, rotated x-axis labels, and custom title text.

Ddeepthinaidu2001@gmail.com
71% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays movie details for three films—Baahubali 2, The Godfather, and Jersey—in static SVG cards, each showing a title, a placeholder image, and a release date. It demonstrates how to load and summarize a CSV dataset using D3.js v7, fetching a remote file with `d3.csv` and computing basic statistics about the data’s rows, columns, and memory footprint, which are then printed in a `<pre>` block. The visualization pairs hand-coded SVG markup with a dynamic data-metadata readout, all styled with CSS on a purple background.

NNanditha Reddy
71% match
Loading thumbnail…

Fork of Pooja's Pie Chart

This fork of a pie chart visualizes movie ratings for recent Indian films. The visualization uses a D3.js v5 pie layout with a categorical color scale to differentiate movie titles. A legend displays each movie name alongside its corresponding rating value in points. Data is loaded from a remote CSV file via the `d3.csv` method, and the chart is rendered as an SVG with `d3.arc` for the pie segments and `d3.scaleOrdinal` for color assignment.

PPoojaThandra
71% match
Loading thumbnail…

Fork of Circles with D3

This example displays three static movie posters for *Baahubali 2: The Conclusion*, *The Godfather*, and *Jersey*, each rendered inside its own SVG element with a dark background and white text. It shows how D3.js loads a CSV dataset containing 165 movie records, then presents the title and release date for each film in a minimal card layout. The visualization uses `d3.csv` to fetch the remote data and logs a summary of the dataset structure (rows, columns, memory usage) to the browser console. No interactive behavior or dynamic data binding occurs; the SVGs are hand-coded with fixed text and placeholder rectangles.

NNanditha Reddy
70% match
Loading thumbnail…

Fork of Fork Rahul

This D3.js (v7) visualization presents the distribution of flower species as a pie chart, with each slice colored and labeled with its count, alongside a legend showing species names and totals. The chart is rendered as SVG within a single container, using `d3.pie` and `d3.arc` to generate the slices, while `d3.rollup` aggregates the dataset to count occurrences per species. The code also adds a title, axis labels, and a legend, with data loaded via `d3.csv` from a remote Gist.

Ssairahulreddy.bapuram2001@gmail.com
70% match
Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B
70% match
Loading thumbnail…

Activity 7_Q1

This visualization shows the box office collections of Prabhas films as a pie chart, with each slice labeled with its collection amount in millions and a legend listing film names. The dataset is loaded from a GitHub Gist using `d3.csv`. The chart is rendered with SVG paths generated by `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` assigns colors from a predefined array. Labels and legend text are positioned using `arc.centroid` and fixed translations, with D3 v5 used throughout.

Aanish6005@gmail.com
69% match