Skip to main content
SimilarExport ZIP
100%

Hotel messenger traffic

✓ Published0🌍 Public
MMarcelo
Last edited May 9, 2021
Created on May 1, 2021

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.

AI-generated description

Messages traffic using javascript Classes instead of React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hotel occupation scatter Plot

This scatter plot shows hotel room occupation rates for six amenities (spa, pool, restaurant, bar, beach, gym) across user-selectable time zones or weekdays. The D3 v5 visualization loads CSV data and renders animated circles whose size reflects each amenity's capacity and whose color encodes the amenity type via `schemeCategory10`. A dropdown menu dynamically re-renders the scatter plot, switching between hourly and daily time domains using `scaleBand` and `scaleLinear` axes. Interactive tooltips display amenity and occupation percentage on mouseover, while the legend lists amenities sorted by capacity.

MMarcelo
74% match
Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph template in React visualizes hotel booking trends over time, with stacked streams colored by category using `d3-shape`’s `stack`, `area`, and `curveBasis`, and colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream highlights it by adjusting opacity and displays the category name in a tooltip. The SVG rendering is driven by React state and event handlers, while data loads as CSV through `d3-fetch`’s `csv` method.

Rrajasrilekkala
73% match
Loading thumbnail…

Hotel Reservation Tree

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.

0007ebey
72% 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
72% match
Loading thumbnail…

Line Chart Project

A line chart depicts high hotel booking rates over time. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for ticks, and a `line` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV via the `csv` function and parsed into dates and numbers before rendering.

Rrajasrilekkala
71% match
Loading thumbnail…

hotel booking

This interactive 3D scatter plot visualizes hotel booking data, comparing agents based on repeated guest status, previous cancellations, and prior non-canceled bookings. Two distinct traces plot these metrics as colored spheres—green for repeated guests against cancellations, and pink for cancellations against successful bookings—with opacity revealing data density. The visualization uses Plotly’s `scatter3d` type via the `Plotly.newPlot` API, loading CSV data through D3’s `d3.csv`. The chart is rendered inside a DIV element on a minimal HTML page, with a title indicating focus on agent performance. Marker size and green outline styling enhance point differentiation in the three-dimensional space.

Vvagdevi-369
70% match
Loading thumbnail…

Hawaii travel time data visualization

This interactive time-series visualization explores Hawaii tourism data from January 2018 to March 2022, sourced from the Hawaii tourism authority. Users select from twelve indicators—including visitor numbers, average party size, and accommodation preferences—via radio buttons, which re-render a React component that updates a D3 v5 SVG chart. The visualization combines scatterplot-style marks (SVG circles with tooltips) and a smooth line path using `d3.line()` with curve bundling, scaled by `scaleTime` and `scaleLinear`. The interface reveals how different metrics responded to the pandemic over varying durations, highlighting correlations between visitor volume, trip purpose, and lodging choices.

Yyigechen17
69% match
Loading thumbnail…

Fork of Area Chart for Hotel Booking - Project

This area chart visualizes hotel booking closure rates over time, with a pink background and blue filled area beneath a curved line. It uses D3 v5’s `csv` loader to import timestamp and hotel-close data from a GitHub gist, then employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth, filled path. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and custom labels, while the SVG canvas measures 960 by 500 pixels and is appended to by a single group with specified margins. The chart title appears above the plotting area.

Kkakumanusreya
69% match