malloy-demo-fiddle: A TypeScript repository from malloydata

NOTE: This demo is no longer actively maintained. To try Malloy in your browser, visit the Try Malloy Repo

Malloy duckdb-wasm Demo (Malloy Fiddle)

The Malloy duckdb-wasm demo is a self-contained web application that allows people to test out the functionality of Malloy without having to download any code or set up any database connections, and to demonstrate how Malloy and DuckDB can be combined for interactive data exploration in a browser. duckdb-wasm is a web assembly version of the DuckDB database that is supported by Malloy.

There is a live version of this demo on our documentation website here.

Building the Demo

Install Dependencies

npm install to install dependencies

Building and Running the Demo

You can then build or run the demo.

npm run build

will create all the files needed for the standalone demo in the docs directory.

Additionally,

npm start

will start up a development web server on port 8888 that will allow you to use the demo at http://your-hostname:8888

Running against a local version of Malloy

In your local Malloy repository, run npm link -ws. That will make your development packages locally available for development.
In your VS Code extension repository, run npm run malloy-link to use your local Malloy packages.
If you make changes to Malloy that are required by the extension, merges those into main, and that will trigger an automatic developer release of Malloy.
Once that release completes, run npm run malloy-update to update dependencies to that release. This will break the link to your local version of Malloy, so if you want to resume local development, re-run npm run malloy-link
To manually unlink without updating, you may run npm run malloy-unlink

Deploying the demo

If you wish to create your own demo website, after you have completed npm run build, you can copy the contents of the docs directory to an available web server. There are no additional dependencies.

About the Sample Malloy files

All the samples used in the demo are stored in the docs directory. Each sample consists of a sample Parquet or CSV data file, a model file, and a query file. They are indexed in docs/sample.json.

The sample.json File

The main index of samples is stored in docs/sample.json. The format of the sample file is an array of sample entry. Each sample entry looks like this:

  {
    "name": "Airports",
    "dataTables": ["airports.parquet"],
    "modelPath": "./airports.malloy",
    "queryPath": "./airports-queries.malloy"
  },

name is the display name that appears in the "Data Set" dropdown menu. dataTables is an array of data files, either Parquet or CVS that are used with this sample. modelPath is the path to the Malloy model file that is to be used with the sample queries. queryPath is the path to the set of Malloy queries that is used with the sample.

The Model File

The model file should contain the Malloy model that your sample queries are based on. Typically this means creating a data source from your sample data, and defining the dimensions, measures and other model features. You can define multiple sources if you have including multiple data tables.

source: airports is table('duckdb:airports.parquet') {
  measure:
    airport_count is count()
    percent_of_all_airports is airport_count/all(airport_count)*100
    avg_elevation is elevation.avg()
    heliport_count is airport_count {? fac_type = 'HELIPORT'}

  query: by_state is {
    where: state != null
    group_by: state
    aggregate: airport_count
  }

  query: by_facility_type is {
    group_by: fac_type
    aggregate:
      airport_count
      avg_elevation
  }
}

The Query File

The query file has the following format:

import "./airports.malloy"

// --
// Name: Show all Data
// The Equivqalent of a SELECT * in SQL.

query: airports -> {
  project: *
}

// --
// Name: Filtering Data
//  New York City District Airports

query: airports -> {
  where: faa_dist = 'NYC'
  project: *
}

The first part, import "./flights.malloy", imports the model file. Following the the import are the set of sample queries. Each query is separated by a // -- comment. The next line should be the display name of the query that is to appear in the "Query" dropdown menu. This syntax is designed to allow the file to be directly edited in the Malloy VSCode extension.

Following that is a Malloy query that will be run. There can also be Malloy modeling code, but it is recommended that modeling is kept in the model file. If there is more than one query, only the last one will be run.

The Data Files

The data files can be Parquet files, CSV files or a combination of both. Because of browser memory constraints, some data sets may be too large for in browser use, or for complex queries. Hosting your data sets o

malloydata/malloy-demo-fiddle