Skip to main content
SimilarExport ZIP
100%

activity_10

✓ Published0🌍 Public
Rrajkodavati7@gmail.com
Last edited Apr 29, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This example displays a pie chart of travel expenses aggregated by traveler gender, using data loaded from a CSV file via a GitHub gist. It shows the proportion of total accommodation and transportation costs attributed to male and female travelers, with a legend and percentage labels for each segment. The visualization is built with D3.js v7, using `d3.csv` for data fetching, `d3.pie` and `d3.arc` for the chart geometry, and a `d3.scaleOrdinal` for color encoding. Text annotations and a legend are rendered directly in SVG.

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…

Hello

This pie chart visualizes the gender distribution of customers from a CSV dataset, using D3.js to load and process the data. It groups the data by gender with `d3.group`, generates the chart with `d3.pie()` and `d3.arc()`, and renders the paths as SVG elements. A color scale (`d3.scaleOrdinal`) and a legend are also included. The code loads the data via `d3.csv` from a raw GitHub URL.

Mmaheshchowdaryponnaganti@my.unt.edu
79% match
Loading thumbnail…

Activity 7.1

This pie chart visualizes the distribution of total counts across different travel modes from a CSV dataset. The data is loaded via `d3.csv` and aggregated by the 'Mode' column, with each slice's size proportional to its 'Total' value. The chart uses `d3.pie` and `d3.arc` to generate the arcs, which are rendered as SVG paths with a categorical color scale from `d3.scaleOrdinal`. A legend, built with the same color mapping, displays each mode and its corresponding total value alongside the chart.

SSuneelKalva@my.unt.edu
79% match
Loading thumbnail…

Activity7_Que1

This pie chart visualizes the fares of the first ten passengers from a Titanic dataset, labeling each slice with its dollar amount and listing passenger names in a color-coded legend. Built with D3 v6, it loads CSV data via `d3.csv`, converts fares to numbers, and uses `d3.pie` and `d3.arc` to generate SVG paths. A sequential `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while labels and legends are positioned using arc centroids and SVG text elements.

MMannava Priyanka Chowdary
78% match
Loading thumbnail…

activity7_QUE1

This interactive pie chart visualizes tourism revenue distribution by country, with each slice labeled with its corresponding value in billions of dollars and a color-coded legend. The chart is built using D3.js v7 with SVG rendering, employing the `d3.pie` layout, `d3.arc` for path generation, and `d3.scaleOrdinal(d3.schemeCategory10)` for categorical colors. Data is loaded as CSV from a GitHub Gist and aggregated using `d3.rollup` and `d3.sum`. Text labels are positioned using `arc.centroid` with an offset factor.

Ggouthamigongidi2457@gmail.com
78% match
Loading thumbnail…

Activity 6

This pie chart visualization displays the proportional breakdown of categorical data loaded from a remote CSV file. Constructed with D3.js v7, the SVG graphic uses `d3.pie` to compute arc segments and `d3.arc` for path geometry, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing categorical colors. A legend, including color swatches and labels, is positioned on the left side, while the chart title appears above. The code loads data via `d3.csv` and renders all elements as SVG paths and text nodes.

AAP19110020041-Pavan Kumar
78% match
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes travel expenses by category, displaying each expense segment with its corresponding price label and an aligned legend that pairs color swatches with specification names and values. The chart uses D3 v5 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` to compute the pie geometry and color mapping, with data loaded asynchronously from a remote CSV via `d3.csv()`. Rendered as an SVG, the chart positions segments and legend elements through D3’s selection and attribute methods, with text formatting applied via `d3.format()`.

Nneeharika2023@gmail.com
78% match
Loading thumbnail…

Activity 7 Q1

This pie chart visualizes spending categories by percentage, with each slice colored via a categorical color scale and labeled through an interactive legend. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to compute and render the arcs, while `d3.csv` loads the dataset from a GitHub repository. SVG rendering displays the chart, with legend items and axis labels positioned manually. The color scale employs `d3.scaleOrdinal` with `d3.schemeSet2`, and slice strokes are styled white for separation, though axis labels are placeholders rather than computed scales.

Aanisha.peddireddy@gmail.com
77% match
Loading thumbnail…

Activity 7

A pie chart visualizes the distribution of housing data by ocean proximity, with each slice colored and labeled to show the count of homes in each category. The chart includes a title and a legend displaying category names with their corresponding counts. Built with D3.js (v6), the visualization loads CSV data from a GitHub repository, uses `d3.pie` and `d3.arc` to generate the pie slices, and applies `d3.scaleOrdinal` with `schemeCategory10` for colors. The SVG rendering includes slice labels positioned via `arc.centroid` and interactive hover-free styling.

Pperamranji
77% match