Hotel bookings dashboard example

examples/README.md

@@ -17,6 +17,12 @@
 
 [Source](./eia) · This dashboard visualizes electricity generation and demand across the U.S. electricity grid. The included data loaders demonstrate how to retrieve live data from the U.S. Energy Information Administration (EIA) API, while the dashboard demonstrates how to produce interactive maps, bar charts, and time-series charts with Observable Plot. A range input allows the user to rewind time to any point in the previous 24 hours, and a table shows details.
 
+### [`hotel-bookings`](https://observablehq.observablehq.cloud/framework-example-hotel-bookings) - Resort hotel bookings
+
+<a href="https://observablehq.observablehq.cloud/framework-example-hotel-bookings/"><img src="../docs/assets/hotel-bookings.webp" alt="Resort hotel bookings" width="312" height="237"></a>
+
+[Source](./hotel-bookings) · This dashboard visualizes hotel bookings by market segment for a Portuguese resort from 2015 to 2017. The dashboard demonstrates how to produce interactive charts with D3 and Observable Plot, either created as JavaScript components or directly within a markdown file. Donut charts, histograms, a bubble chart and a line chart reveal patterns in room bookings, prices, guest nationalities, and cancellations across different market segments and seasons.
+
 ### [`plot`](https://observablehq.observablehq.cloud/framework-example-plot/) - Observable Plot downloads
 
 <a href="https://observablehq.observablehq.cloud/framework-example-plot/"><img src="../docs/assets/plot.webp" alt="Observable Plot downloads" width="312" height="237"></a>

examples/hotel-bookings/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+/dist/
+node_modules/
+yarn-error.log

examples/hotel-bookings/README.md

@@ -0,0 +1,36 @@
+[Framework examples →](../)
+
+# Hotel bookings
+
+View live: <https://observablehq.observablehq.cloud/framework-example-hotel-bookings/>
+
+This dashboard explores reservation data for a resort in Portugal from Antonio _et al._ (2021), recorded between July 2015 and August 2017 to highlight differences in daily rates, visit seasons, guest nationality, and room type reserved for different booking types (_e.g._ corporate, direct, or online reservations).
+
+**Data source:** Antonio et al (2021). Hotel booking demand datasets. Data in Brief (22): 41-49. https://doi.org/10.1016/j.dib.2018.11.126
+
+## Implementation
+
+```
+.
+├── README.md
+├── observablehq.config.js
+├── package.json
+└── src
+    ├── components
+    │   ├── bigNumber.js
+    │   └── donutChart.js
+    ├── data
+    │   ├── hotelData.csv.js
+    │   └── hotels.csv
+    └── index.md
+```
+
+No dependencies other than Framework.
+
+### Data
+
+Data in `hotels.csv` was downloaded directly from Antonio _et al._ (2021), then pre-processed in the `hotelData.csv.js` data loader to emit the static `hotelData.csv` file used in the dashboard.
+
+### Components
+
+This example has two reusable components for building the visualizations: `bigNumber.js` and `donutChart.js`. The `bigNumber.js` component creates a simple big number box using [Observable Plot](https://observablehq.com/plot/). The `donutChart.js` component is made with [D3](https://d3js.org/).

examples/hotel-bookings/observablehq.config.js

@@ -0,0 +1,3 @@
+export default {
+  root: "src"
+};

examples/hotel-bookings/package.json

@@ -0,0 +1,22 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf src/.observablehq/cache",
+    "build": "rimraf dist && observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "latest",
+    "d3-dsv": "^3.0.1",
+    "d3-time-format": "^4.1.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/hotel-bookings/src/components/bigNumber.js

@@ -0,0 +1,11 @@
+import {html} from "npm:htl";
+
+export function bigNumber(metric, dateArray, value, compare, width) {
+  return html`
+  <h2>${metric}</h2>
+  <div style="font-size: ${width / 250}rem">
+  <h3><i>${dateArray[0]} to ${dateArray[1]}</i></h3>
+  <h1>${value}</h1>
+  <div>${compare}</div>
+  <div>`;
+}

examples/hotel-bookings/src/components/donutChart.js

@@ -0,0 +1,75 @@
+// Code adapted (barely) from Mike Bostock's Donut chart notebook (https://observablehq.com/@d3/donut-chart/2)
+
+import * as d3 from "npm:d3";
+
+export function DonutChart(data, {centerText, width, colorDomain, colorRange}) {
+  const height = width;
+  const radius = Math.min(width, height) / 2;
+  const arc = d3
+    .arc()
+    .innerRadius(radius * 0.6)
+    .outerRadius(radius - 1);
+
+  const pie = d3
+    .pie()
+    .padAngle(2 / radius)
+    .sort(null)
+    .value((d) => d.value);
+
+  const color = d3.scaleOrdinal().domain(colorDomain).range(colorRange);
+
+  const svg = d3
+    .create("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("viewBox", [-width / 2, -height / 2, width, height])
+    .attr("style", "max-width: 100%; height: auto;");
+
+  svg
+    .append("g")
+    .selectAll()
+    .data(pie(data))
+    .join("path")
+    .attr("fill", (d) => color(d.data.name))
+    .attr("d", arc);
+
+  svg
+    .append("g")
+    .attr("font-family", "sans-serif")
+    .attr("font-size", 10)
+    .attr("text-anchor", "middle")
+    .selectAll()
+    .data(pie(data))
+    .join("text")
+    .attr("transform", (d) => `translate(${arc.centroid(d)})`)
+    .call((text) =>
+      text
+        .append("tspan")
+        .filter((d) => d.endAngle - d.startAngle > 0.1)
+        .attr("y", "-0.3em")
+        .attr("font-weight", "bold")
+        .attr("fill", "white")
+        .text((d) => d.data.name)
+    )
+    .call((text) =>
+      text
+        .filter((d) => d.endAngle - d.startAngle > 0.15)
+        .append("tspan")
+        .attr("x", 0)
+        .attr("y", "0.8em")
+        .attr("fill", "white")
+        .attr("fill-opacity", 1)
+        .text((d) => d.data.value.toLocaleString("en-US"))
+    );
+
+  svg
+    .append("text")
+    .attr("text-anchor", "middle")
+    .attr("font-family", "sans-serif")
+    .attr("font-size", "0.9rem")
+    .attr("fill", "currentColor")
+    .attr("font-weight", 600)
+    .text(centerText);
+
+  return svg.node();
+}