Hotel Reservation Tree

100%

Hotel Reservation Tree

✓ Published2🌍 Public

Last edited Apr 8, 2020

Created on Feb 27, 2020

Forked from Lesson 2

This visualization shows the total lead time for each reserved room type across Resort hotels worldwide, organized hierarchically by hotel and country. The data comes from a World Bank CSV file and is processed using D3 v5’s `nest` and `tree` functions to build a stratified tree layout. Each leaf node is a colored circle, where color maps the aggregate lead-time value via `scaleLinear` from green to red, and horizontal links are drawn with `linkHorizontal`. Text labels display hotel, country, and room type names, with font sizes adjusted by depth. The SVG canvas supports interactive zooming through the `zoom` event.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Tree Map

This tree map visualizes hotel booking lead times aggregated by country, with each country’s total lead time represented as a rectangular area. The code uses D3 v5’s `nest()` and `rollup()` to sum lead times per country, then builds a hierarchy with `d3.hierarchy()` and lays it out with `d3.treemap()`. Data comes from a local `population.csv` file, rendered as an SVG canvas sized to the browser viewport. The example is built with React and D3, though the visible rendering relies solely on SVG and D3’s treemap layout.

0007ebey

85% match

Loading thumbnail…

Hotel messenger traffic

This visualization shows hotel messenger traffic across five service categories (Superhost, Restaurant, Bar, Beach, Room Service) over one week, with lines and circles representing daily message volumes. The chart uses D3.js v5 classes including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to build axes, while `d3.line` with `d3.curveMonotoneX` renders the paths. Interactive tooltips appear on mouseover, and circles are colored red or green based on incident versus resolve counts. The legend uses `d3.nest` to group categories, and the data is procedurally generated in `useData.js` for this React-based example.

MMarcelo

72% match

Loading thumbnail…

Hotel reservation demand

This example displays raw hotel reservation data from a Kaggle dataset, showing each booking record as structured JSON with fields like lead time, number of guests, and cancellation status. The visualization initially fetches the CSV file using `fetch()` and parses it with `d3.csvParse`, then renders the parsed array of objects as text in a `<pre>` element via D3’s selection and data join. A simple state management pattern tracks the loading status and updates the display asynchronously once the data arrives.

GGauri Jare

71% match

Loading thumbnail…

Hotel checkin and checkout by Cities

A world map displays simulated hotel check-ins and checkouts across multiple cities, with circles sized by guest counts and colored to indicate business versus leisure travel. A time-brushing histogram below filters the map data by date range. Built with React and D3, the visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleSqrt` for mapping and scaling, while `d3.brushX` enables interactive temporal selection. Data is generated procedurally, simulating guest arrivals and departures over 20 days.

MMarcelo

71% match

Loading thumbnail…

Fork of Data Visualization - Project 1

This bar chart displays hotel booking rates by country, ranking the top 100 countries based on the percentage of bookings they receive. The visualization uses D3.js v5 within a React component to render an SVG, with customized axes and red-styled gridlines and tick labels. Data is loaded from an external CSV via `d3.csv`, while `scaleBand` and `scaleLinear` map the categorical and numerical values to coordinates.

Rrajasrilekkala

71% match

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of Airbnb listings in New York City, organized by room type, borough, and neighborhood, with node labels sized by depth. It uses d3.tree and d3.hierarchy to compute the layout, d3.linkHorizontal for curved link paths, and d3.zoom for panning and scaling the SVG. The data comes from a JSON file containing house counts and average prices. Text shadows and a serif font improve readability, while node positions reflect the tree structure rather than geographic location.

SSourav Sarker

71% match

Loading thumbnail…

Fork of World Hotel Booking rate in different countries

This interactive 3D scatter plot visualizes hotel booking rates across different countries, encoding data attributes like agent, children, and babies along the x, y, and z axes. The visualization uses Plotly.js, with data loaded via D3's `d3.csv` function from a remote GitHub dataset. Three distinct traces, each with its own color and marker style, represent the different booking-related variables, while axis titles clarify the metrics being compared. The chart is rendered inside a pink-themed HTML page with a centralized heading and a full-height plot area.

Kkakumanusreya

70% match

Loading thumbnail…

Hotel booking demand

This visualization displays hotel booking demand data loaded from a CSV file and rendered as raw JSON text. It uses D3 v7’s `csvParse` to parse the dataset, converting numeric fields such as petal length and width to numbers. The code fetches data from a remote gist URL and updates the display via a state management pattern, showing the parsed contents in a `<pre>` element. The visualization demonstrates basic data loading and rendering without additional graphical encodings.

GGauri Jare

70% match