project-Pie chart

100%

project-Pie chart

✓ Published2🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

This pie chart visualizes the percentage of canceled hotel bookings across different countries, with each slice labeled and a corresponding legend. The chart is rendered as an SVG using D3 v5, leveraging `pie` for arc generation, `arc` for path geometry, and `scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV file via `d3.csv` from a GitHub Gist, and the total cancellation percentage is computed before rendering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of project-Pie chart

This pie chart shows the percentage of canceled hotel bookings by country, using a dataset loaded via d3.csv from a GitHub gist. It renders an SVG with a pie layout from d3.pie and d3.arc, coloring each slice with a scaleOrdinal mapping to a discrete palette. Labels display the percentage on each segment, and a legend lists countries alongside their values, all styled with CSS. The visualization relies on d3 v5, including d3.arc for concentric geometry and d3.format for axis text.

Kkakumanusreya

91% match

Loading thumbnail…

bhavya_piechart

This example visualizes the total number of hotel bookings per state using a pie chart, with each slice colored by a categorical scale and accompanied by a legend. Hovering over a slice reveals a tooltip showing the state and its booking total. The implementation uses D3.js v6, including `d3.rollup` to aggregate data from a CSV file, `d3.pie` for layout, and `d3.arc` for rendering SVG paths. The chart is built within a React-free HTML page, with smooth opacity transitions for the tooltip on mouse events.

Bbhavyapokuri123@gmail.com

77% match

Loading thumbnail…

pie chart of people visited

This pie chart visualizes the number of people who visited various countries, with each slice labeled with its corresponding value in thousands. The chart is rendered using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, drawing SVG paths for the segments and text labels at their centroids. A legend on the right maps each country to its slice color and displays the numeric value. The data is loaded from a remote CSV file via `d3.csv`, with slice colors assigned from a hardcoded array.

SSaikiran2029

76% match

Loading thumbnail…

PiechartProject

This visualization shows the distribution of COVID-19 deaths across continents using a pie chart. The chart displays each continent’s share as a percentage and absolute death count in thousands, with a color-coded legend. The code loads CSV data from a GitHub repository via `d3.csv`, then uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path segments. Color mapping is handled by `d3.scaleOrdinal()`, while `d3.format()` formats numeric labels. The SVG canvas is sized at 960×450 pixels, and all elements are rendered as standard SVG shapes.

SSushmaNamidi@my.unt.edu

76% match

Loading thumbnail…

Pie chart

This pie chart visualizes the top 10 countries by tourist visits, with each slice labeled with its value in thousands. The chart renders as an SVG using D3 v5, employing `d3.pie` to compute arc angles and `d3.arc` to generate the path segments. Slice colors come from a `scaleOrdinal` mapping, and a legend lists each country with its corresponding color and value. Data is fetched as CSV from a GitHub gist, with tourist counts formatted using `d3.format` for concise display.

Ssandeep-gollamudi

76% match

Loading thumbnail…

Pie chart

This pie chart visualizes shipping amounts across different cities during the Covid era, with each slice labeled by its value and a legend identifying city names. The code fetches CSV data from a GitHub gist using `d3.csv` and renders the chart with React and SVG. It employs `d3.pie` to compute arc segments, `d3.arc` to generate path geometries, and `d3.scaleOrdinal` for color mapping. Text labels are positioned via `arc.centroid`, and a custom legend displays colored rectangles and city names.

VVineela Reddy

75% match

Loading thumbnail…

Project

This pie chart shows the distribution of job applications across seven countries, displaying aggregated counts in thousands within each slice and a legend for country identification. The visualization is built with D3.js, using `d3-shape`'s pie layout for arc generation and `d3-scale`'s ordinal color scale with the category-10 palette. Data is loaded from a CSV file via `d3-fetch`, aggregated by country, and rendered as an SVG with labels positioned using the arc centroid method.

Aanjeevu@gmail.com

74% match

Loading thumbnail…

Bar Chart

This example presents a series of pie charts analyzing hotel booking data from a cleaned.csv file. The first chart displays the average price per year, while the second shows the count of bookings per year. Using D3 v6 with SVG rendering, the code applies d3.pie and d3.arc to generate pie slices, d3.scaleOrdinal with d3.schemeCategory10 for coloring, and d3.group for data aggregation. Hover interactions scale slices and change their fill color.

Kkakumanusreya

74% match