bhavya_piechart

100%

bhavya_piechart

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

bhavya

This visualization shows the total number of hotel bookings aggregated by state, displayed as a bar chart with a categorical color legend. It uses d3.csv to load data from a GitHub-hosted CSV file, then d3.rollup to sum bookings per state. The chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for bar colors, with axes rendered using d3.axisBottom and d3.axisLeft.

Bbhavyapokuri123@gmail.com

85% match

Loading thumbnail…

bhavya_ice6

This scatter plot visualizes yearly hotel bookings across different states, with years on the x-axis and booking counts on the y-axis. The D3 v6 code employs `d3.csv` to load remote data, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes. Blue circles represent data points, and mouseover interactions reveal a CSS-styled tooltip showing state, year, and booking count. The SVG render fills the browser window dynamically via `window.innerWidth` and `window.innerHeight`.

Bbhavyapokuri123@gmail.com

84% match

Loading thumbnail…

Fork of Pie Chart

This example visualizes state sales data as a pie chart, with each slice colored by total sales value and a corresponding legend listing state names alongside their formatted dollar amounts. The top ten states by sales are shown, sorted in descending order. Built with React and D3 v5, it uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths, while d3.csv loads the external dataset from a GitHub gist. Mouseover events log slice data to the console, and all rendering occurs within an SVG container.

NNeeharikaGali

78% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across states. Hovering over a bar highlights the corresponding state’s frequency distribution in the pie chart, while moving the mouse away resets the view. The visualization uses d3.v3 with SVG rendering and animated transitions, updating both charts and a legend on mouseover. The bar chart uses ordinal and linear scales, while the pie chart is driven by the same data, with colors assigned per frequency segment.

Hhireign

77% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical frequency data across states. Hovering over a bar updates the adjacent pie chart and legend to display the breakdown of that state’s frequency by three categories (low, mid, high), with smooth transitions between states. Built with React and D3.js v3, the visualization uses SVG paths for the pie slices and rects for the bars, with mouseover and mouseout handlers triggering `pC.update()` and `leg.update()` to synchronize the views. The bar chart’s y-axis rescales dynamically as the pie selection changes the underlying data.

AAbirKhan96

77% 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

77% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard synchronizes a bar chart and a pie chart to explore categorical frequency distributions across multiple states. Hovering over a bar updates the pie chart and legend to show the breakdown of the selected state’s data into low, mid, and high segments, while moving the mouse away restores the overall totals. Built with React and D3.js v3, the visualization uses SVG for rendering and animated transitions to smoothly update the bar heights, colors, and labels, as well as the pie chart slices. The bar chart uses an ordinal scale for the x-axis, and the pie chart’s updates are driven by calling its `update` function with new data.

Ssowbalas

77% match

Loading thumbnail…

project-Pie chart

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.

Rrajasrilekkala

77% match