Hotel checkin and checkout by Cities

100%

Hotel checkin and checkout by Cities

✓ Published0🌍 Public

Last edited May 8, 2021

Created on Apr 24, 2021

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.

AI-generated description

Checkin and Checkout simulation using React library. Marcelo Rocha

MIT Licensed

Similar vizzes

Loading thumbnail…

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Zzach b.

72% match

Loading thumbnail…

points on world map

A world map displays cities as brown circles, with circle size proportional to each city’s population using a square-root scale. A dropdown menu lets users select the number of cities shown, from a radius setting to top 10, 50, or 200 cities. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projections, d3.scaleSqrt for sizing, and React for the interface. City data comes from the Data Canvas Sense Your City dataset, loaded via d3.csv.

AAnkit5ingh

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

71% match

Loading thumbnail…

World Map with Cities

This visualization displays a world map with cities, where each city is represented by a circle scaled proportionally to its population. Using D3’s geoNaturalEarth1 projection and geoPath, the map renders landmasses, graticules, and country interiors from TopoJSON data, while city locations are projected from latitude and longitude coordinates. The React component employs the useWorldAtlas and useCities custom hooks to load data via d3.json and d3.csv, with d3.scaleSqrt mapping population to circle radius sizes.

JJohn Huang

71% match

Loading thumbnail…

world map w/ cities

This example presents a world map visualization of cities with populations exceeding 50,000. It uses a React framework with SVG rendering, employing d3-geo-projection’s geoNaturalEarth1 projection and d3-geo’s geoPath to draw landmasses, country boundaries, graticules, and geographic lines. City locations are plotted as circles from Simplemaps’ World Cities Database, while country and land data come from World Atlas TopoJSON. The visualization includes hover tooltips showing country names, with styling applied through CSS.

Zzach b.

71% match

Loading thumbnail…

Map Collab

This visualization overlays hotel data from a JSON file on an interactive Google Map of Western Europe, with a separate layer of city markers. Clicking a city marker zooms the map to that city at a predefined level. Hotel markers become visible only at higher zoom levels, while city labels disappear when zoomed in, managing clutter. The map utilizes the Google Maps JavaScript API for rendering, and D3.js (v3) is used to draw SVG circles for hotel locations and handle the data-driven overlay layer.

Aandy

71% match

Loading thumbnail…

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

CCarlos Caballero

70% match