diff --git a/README.md b/README.md index d67597c..0b22c0f 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,11 @@ -# Mosaic Framework Examples +# Mosaic + Framework Examples -This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run: +This site shares examples of integrating [Mosaic](https://uwdata.github.io/mosaic) and DuckDB into [Observable Framework](https://observablehq.com/framework). -``` -npm run dev -``` +**[View the deployed examples](https://uwdata.github.io/mosaic-framework-example)** -Then visit to preview your project. +The examples demonstrate: -For more, see . - -## Project structure - -A typical Framework project looks like this: - -```ini -. -├─ docs -│ ├─ components -│ │ └─ timeline.js # an importable module -│ ├─ data -│ │ ├─ launches.csv.js # a data loader -│ │ └─ events.json # a static data file -│ ├─ example-dashboard.md # a page -│ ├─ example-report.md # another page -│ └─ index.md # the home page -├─ .gitignore -├─ observablehq.config.ts # the project config file -├─ package.json -└─ README.md -``` - -**`docs`** - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses [file-based routing](https://observablehq.com/framework/routing), which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages. - -**`docs/index.md`** - This is the home page for your site. You can have as many additional pages as you’d like, but you should always have a home page, too. - -**`docs/data`** - You can put [data loaders](https://observablehq.com/framework/loaders) or static data files anywhere in your source root, but we recommend putting them here. - -**`docs/components`** - You can put shared [JavaScript modules](https://observablehq.com/framework/javascript/imports) anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications. - -**`observablehq.config.ts`** - This is the [project configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the project’s title. - -## Command reference - -| Command | Description | -| ----------------- | -------------------------------------------------------- | -| `npm install` | Install or reinstall dependencies | -| `npm run dev` | Start local preview server | -| `npm run build` | Build your static site, generating `./dist` | -| `npm run deploy` | Deploy your project to Observable | -| `npm run clean` | Clear the local data loader cache | -| `npm run observable` | Run commands like `observable help` | +- Visualization and real-time interaction with massive data sets +- Using Mosaic and DuckDB-WASM within Framework pages +- Using DuckDB within a data loader and configuring GitHub Actions diff --git a/docs/index.md b/docs/index.md index 46776cb..55ea0f8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -11,7 +11,13 @@ const weather = await FileAttachment("data/seattle-weather.parquet").url(); const vg = vgplot(vg => [ vg.loadParquet("weather", url(weather)) ]); ``` -This site shares examples of integrating Mosaic and DuckDB data loaders into Observable Framework. All source markup and code is available at . +This site shares examples of integrating Mosaic and DuckDB into Observable Framework. The examples demonstrate: + +- Visualization and real-time interaction with massive data sets +- Using Mosaic and DuckDB-WASM within Framework pages +- Using DuckDB in a data loader and in GitHub Actions + +All source markup and code is available at . [Mosaic](https://uwdata.github.io/mosaic) is a system for linking data visualizations, tables, and input widgets, all leveraging a database ([DuckDB](https://duckdb.org/)) for scalable processing. With Mosaic, you can interactively visualize and explore millions and even billions of data points. @@ -72,8 +78,6 @@ vg.vconcat( ) ``` -A key idea is that interface elements (Mosaic _clients_) publish their data needs as queries that are managed by a central _coordinator_. The coordinator may further optimize queries before issuing them to a backing _data source_ like DuckDB. - ## Example Articles - [Flight Delays](flight-delays) - explore over 200,000 flight records