Hotel bookings dashboard example (#1337)

* update chart colors, add bubble, move reusables to components

* tooltips, chart color updates

* remove displays for troubleshooting

* edits

* save edits

* save changes

* format date in line chart

* reorder seasons in faceted histogram

* move data prep to loader

* minor data loader updates

* update readme and config file

* reorg code and add comments

* Move table prep to Inputs.table options

* line chart tooltip

* tooltip and chart tweaks

* spelling

* Update examples/hotel-bookings/README.md

Co-authored-by: Philippe Rivière <[email protected]>

* Update examples/hotel-bookings/observablehq.config.js

Co-authored-by: Philippe Rivière <[email protected]>

* update DonutChart API

* add to readme, config to match other examples, minor updates to dashboard

* examples readme

* add .webp assets

* remove duplicate input-2d in readme

* updates donut color and config file

* update line chart tip format

* testing text stroke in donuts

* update big number to html from Plot

* clean up donutChart component

* replace bubble grid with faceted bar chart room type

* update webp images to new version

* remove cruft

* no dot

* rename variables

* nicer

* variable color line (reflecting season)

* force the complete facet domain
ref. observablehq/plot#2014

* removes data loader, use static simplified file

* Clean up tooltip labels

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

Co-authored-by: Philippe Rivière <[email protected]>

* updated webp thumbnails

* updates README

* resize dark thumbnail

* fix the color line when getting into empty bins.

Author: allisonhorst

docs/assets/hotel-bookings-dark.webp

@@ -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>

docs/assets/hotel-bookings.webp

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

examples/README.md

@@ -0,0 +1,35 @@
+[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. Charts 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
+    └── index.md
+```
+
+No dependencies other than Framework.
+
+### Data
+
+Data was downloaded directly from Antonio _et al._ (2021), with minor data wrangling to produce the simplified data (`hotelData.csv`) 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. The `donutChart.js` component is made with [D3](https://d3js.org/).

examples/hotel-bookings/.gitignore

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

examples/hotel-bookings/README.md

@@ -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/observablehq.config.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/package.json

@@ -0,0 +1,75 @@
+// 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();
+}