From c9e5377f292cd58b4545f247208003e4e9822902 Mon Sep 17 00:00:00 2001 From: jheer Date: Thu, 22 Feb 2024 21:24:46 -0800 Subject: [PATCH] feat: Minor revisions to content. --- docs/flight-delays.md | 13 +++++++++++++ docs/nyc-taxi-rides.md | 10 ++++++---- docs/observable-latency.md | 9 ++++----- observablehq.config.ts | 2 +- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/docs/flight-delays.md b/docs/flight-delays.md index 8d8533a..1229126 100644 --- a/docs/flight-delays.md +++ b/docs/flight-delays.md @@ -35,6 +35,8 @@ vg.vconcat( vg.intervalX({ as: $brush }), vg.xDomain(vg.Fixed), vg.yTickFormat("s"), + vg.xLabel("Delay (minutes)"), + vg.yLabel("Number of Flights"), vg.width(600), vg.height(150) ), @@ -46,6 +48,8 @@ vg.vconcat( vg.intervalX({ as: $brush }), vg.xDomain(vg.Fixed), vg.yTickFormat("s"), + vg.xLabel("Time (hour of day)"), + vg.yLabel("Number of Flights"), vg.width(600), vg.height(150) ), @@ -57,6 +61,8 @@ vg.vconcat( vg.intervalX({ as: $brush }), vg.xDomain(vg.Fixed), vg.yTickFormat("s"), + vg.xLabel("Distance (miles)"), + vg.yLabel("Number of Flights"), vg.width(600), vg.height(150) ) @@ -98,6 +104,7 @@ vg.vconcat( vg.xAxis("top"), vg.yAxis(null), vg.xLabelAnchor("center"), + vg.xLabel("Time (hour of day)"), vg.width(605), vg.height(70) ), @@ -131,6 +138,7 @@ vg.vconcat( vg.xAxis(null), vg.yAxis("right"), vg.yLabelAnchor("center"), + vg.yLabel("Delay (minutes)"), vg.width(80), vg.height(455) ) @@ -161,6 +169,8 @@ vg.hconcat( vg.colorScheme("blues"), vg.colorScale("symlog"), vg.xZero(true), + vg.xLabel("Time (hour of day)"), + vg.yLabel("Delay (minutes)"), vg.xyDomain(vg.Fixed), vg.width(315), vg.height(300) @@ -174,6 +184,9 @@ vg.hconcat( vg.intervalX({ as: $filter, brush: {fill: "none", stroke: "#888"} }), vg.colorScheme("blues"), vg.colorScale("symlog"), + vg.xScale("log"), + vg.xLabel("Distance (miles, log scale)"), + vg.yLabel("Delay (minutes)"), vg.xyDomain(vg.Fixed), vg.width(315), vg.height(300) diff --git a/docs/nyc-taxi-rides.md b/docs/nyc-taxi-rides.md index 392fff9..85800b0 100644 --- a/docs/nyc-taxi-rides.md +++ b/docs/nyc-taxi-rides.md @@ -11,7 +11,8 @@ const vg = vgplot(vg => [ vg.loadParquet("trips", url(trips)) ]); # NYC Taxi Rides ## Pickup and dropoff points for 1M NYC taxi rides on Jan 1-3, 2010. -In the data loader, we ingest a remote file into DuckDB and project [_longitude_, _latitude_] coordinates (in the database!) to spatial positions with units of 12 inch feet. +In a data loader, we ingest a remote file into DuckDB and project [_longitude_, _latitude_] coordinates (in the database!) to spatial positions with units of 12 inch feet. +We then load the prepared data to visualize taxi pickup and dropoff locations, as well as the volume of rides by the time of day. _Please wait a few seconds for the dataset to load._ @@ -83,11 +84,12 @@ vg.plot( ), vg.intervalX({ as: $filter }), vg.yTickFormat('s'), - vg.xLabel('Pickup Hour →'), + vg.xLabel('Pickup Hour'), + vg.yLabel('Number of Rides'), vg.width(680), vg.height(100) ) ``` -Select an interval in a plot to filter the maps. -What spatial patterns can you find? +_Select an interval in a plot to filter the maps. +What spatial patterns can you find?_ diff --git a/docs/observable-latency.md b/docs/observable-latency.md index 9d8bc5c..2fb0840 100644 --- a/docs/observable-latency.md +++ b/docs/observable-latency.md @@ -11,8 +11,7 @@ const vg = vgplot(vg => [ vg.loadParquet("latency", url(latency)) ]); # Observable Web Latency ## Recreating a custom graphic using Mosaic vgplot -The Observable Framework documentation includes a wonderful example about [Analyzing web logs](https://observablehq.com/framework/examples/api/), which looks at the latency (response time) of various routes on the Observable.com site. - +The Observable Framework documentation includes a wonderful example about [analyzing web logs](https://observablehq.com/framework/examples/api/), visualizing the latency (response time) of various routes on the Observable.com site. The marquee graphic is a pixel-level heatmap of over 7 million requests to Observable servers over the course of a week. The chart plots time vs. latency, where each pixel is colored according to the most common route (URL pattern) in that time and latency bin. @@ -20,10 +19,10 @@ That said, a lot is going on in the original [custom heatmap component](https:// - The data is pre-binned and aggregated for fast loading - Observable Plot and HTML Canvas code are intermixed in non-trivial ways -- Frame-based animation is used to progressively render the graphic +- Frame-based animation is used to progressively render the graphic, presumably to combat sluggish rendering -Below we re-implement this graphic using [Mosaic vgplot](https://uwdata.github.io/mosaic/what-is-mosaic/), using a simple, standalone specification. -We also leverage Mosaic's facilities for scalable filtering and cross-chart linking. +Here we re-create this graphic with [Mosaic vgplot](https://uwdata.github.io/mosaic/what-is-mosaic/), using a standalone specification. +We also leverage Mosaic's support for cross-chart linking and scalable filtering. ```js const $filter = vg.Selection.intersect(); diff --git a/observablehq.config.ts b/observablehq.config.ts index 9e7a334..afa114b 100644 --- a/observablehq.config.ts +++ b/observablehq.config.ts @@ -29,7 +29,7 @@ export default { // header: "", // what to show in the header (HTML) footer: `Interactive Data Lab, University of Washington`, toc: true, // whether to show the table of contents - pager: false, // whether to show previous & next links in the footer + pager: true, // whether to show previous & next links in the footer // root: "docs", // path to the source root for preview // output: "dist", // path to the output root for build };