Skip to main content
SimilarExport ZIP
100%

activity7.1

✓ Published0🌍 Public
GGanesh Gundekarla
Last edited Apr 10, 2025
Created on Apr 10, 2025
Forked from HTML Starter

This example displays a donut chart depicting energy consumption by source in terawatt-hours, with an accompanying legend. The visualization uses D3.js v7 to load a CSV from a GitHub gist, then applies the `d3.pie()` layout and `d3.arc()` generator to render each segment as an SVG path. Each slice is labeled with its energy source, and a legend lists each source, its type, and consumption value in TWh. The chart uses `d3.scaleOrdinal` with the `d3.schemeSet3` color palette for categorical distinction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

activity9_Question1

This example displays a pie chart of net electricity consumption worldwide from 1980 to 2022, sourced from a CSV file via a GitHub gist. It uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10`. The SVG renders fifteen data slices, with a legend listing years and values formatted with a custom suffix. Data is sorted in descending order before rendering.

BBindumadhavi
80% match
Loading thumbnail…

activity7.1_q1

This pie chart shows the 2023 share of US electricity generation by energy source, using a color-coded slice for each source with percentage labels and a legend. Built with D3 v7, it loads data from a provided CSV and uses `d3.pie()` and `d3.arc()` to compute slice geometries, rendered as SVG paths with hover tooltips. A total of 560×540 pixels accommodates the pie on the left and a legend on the right, with decorative axis titles for context. The chart is responsive via a `viewBox` and uses `d3.scaleOrdinal` for categorical colors.

Mmohanalaharic@gmail.com
80% match
Loading thumbnail…

Assignment7 Pie Chart

This pie chart displays the distribution of energy use across five sources—Petroleum, Natural Gas, Renewables, Coal, and Nuclear—using data from the energy_use.csv file. The visualization loads data with `d3.csv`, calculates the arc paths using `d3.pie` and `d3.arc`, and renders each slice as a `path` element in SVG with an ordinal color scale. A legend on the right side, built with `selectAll` and `append`, maps each colored rectangle to its corresponding energy source.

445.saiful@gmail.com
79% match
Loading thumbnail…

activity9-task9

This pie chart visualizes net electricity consumption worldwide from 1982 to 2022, displaying the top 15 years by consumption value. The visualization uses D3 v5 within a React framework to render SVG arcs via `d3.arc` and `d3.pie`, with color encoding through `d3.scaleOrdinal` and `schemeCategory10`. A legend with rectangles and text labels shows each year and its corresponding consumption value using custom number formatting. Data is loaded from a CSV URL and sorted descending before rendering.

BBindumadhavi
79% match
Loading thumbnail…

Activity 7_question1

This example shows a donut chart of categorical sales data, with each slice labeled by category and a legend on the left. Hovering over a slice displays a tooltip with the percentage share of the total sales. The code uses D3 v7 with `d3.pie` and `d3.arc` to generate the pie geometry, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Data is loaded as CSV from a GitHub gist, and the SVG is rendered with a centered group and a 200-pixel right margin for the legend.

Vvenkatdinesh5010@gmail.com
79% match
Loading thumbnail…

Q2 Dinesh Pie chart D3.js!

This D3.js pie chart visualizes global energy consumption by source, displaying percentage shares for coal, natural gas, hydroelectric, nuclear, and renewables. It renders SVG slices using `d3.pie` and `d3.arc`, with `d3.scaleOrdinal` and `d3.schemeSet2` for color encoding. Labels positioned via `arc.centroid` show source names and percentages, while a legend on the right uses colored rectangles. Data comes from an external CSV file loaded with `d3.csv`.

Ddineshsingiri18@gmail.com
78% match
Loading thumbnail…

Activity7_Question1

A donut chart displays weekly app usage percentages, labeling each slice directly and through a legend that pairs app names with their numeric values. The visualization loads data from a remote CSV file, parses usage values as numbers, and uses a categorical color scheme. Built with D3 v7, it relies on the pie and arc generators to compute slice geometry, with SVG paths and text elements rendered inside a 600×400 canvas.

Eenochabraham97@gmail.com
78% match
Loading thumbnail…

Fork of Activity7.1_Qustn 1

This example shows an extended donut chart of social media platform usage, displaying the average hours per week spent on each platform as pie slices with labeled leader lines and a dynamic legend. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to generate the slices from CSV data loaded via `d3.csv`, with `d3.scaleOrdinal` assigning categorical colors. Outer arc centroid positions and a custom `midAngle` function compute label placement, while connector polylines and text elements are appended directly to an SVG canvas. The legend is built dynamically by iterating over the data, with each row containing a colored rectangle and platform label.

NNita
78% match