Basic example

​

Introduction

This guide will walk you through creating a simple data app using Latitude. You’ll learn how to:

1. Create a new data app
2. Add a data source
3. Write your queries
4. Define the layout and visualizations
5. Next steps

​

Prerequisites

Before you begin, make sure you followed the installation guide to install Latitude.

​

1. Create a new data app

To create a new data app, run the following command in your terminal:

latitude start

Type in the name of your app and press enter. This will create a new directory with the name of your app and a basic structure for it.

After the app is created, navigate to the app’s directory and start the development server by running the following commands:

cd my-app
latitude dev

This will start the development server and open your app in your default browser.

​

2. Add a data source

To add a data source to your app, you’ll need to create a new file in the sources directory.

For this guide, we’ll use the CSV that comes with the sample project, but you can replace that with any other CSV or connect to a live database following these instructions.

Go ahead and download the sample CSV and save it in the queries directory as source.csv.

​

3. Write your queries

Now that you have a data source, you can write your first query. Create a new file named sample.sql in the queries directory and write the following query:

select id,
       title,
       release_year,
       type,
       runtime,
       imdb_score
from read_csv_auto('queries/source.csv')
order by release_year asc

This query will select all the rows from the source.csv file using the DuckDB adapter that’s configured by default in the source.yml file.

Next, let’s create a secondary query to aggregate some data. Create a new file named sample_agg.sql in the queries directory and write the following query:

select
  release_year,
  count(*) as total_titles,
from { ref('sample') }
group by 1
order by 1 asc

This query will count the number of titles released each year. The ref function is used to interpolate the sample.sql query, and use its results as the input for this query. Latitude allows you to chain queries together very easily, find out more about this in the queries reference.

To check that your queries are working as expected, you can run them locally using the latitude run command. For example:

latitude run sample_agg

This will run the /queries/sample_agg.sql query once and display the results in your terminal.

Learn more about latitude run in the CLI reference.

​

4. Define the layout and visualizations

Now that you have your queries, you can define the layout and visualizations for your app.

Open the index.html file in your text editor and replace the content with the following:

<View class="gap-8 p-8">
  <Row>
    <Text.H2 class="font-bold">Netflix titles released over time</Text.H2>
  </Row>
  <Row>
    <LineChart
      query="sample_agg"
      x="release_year"
      y="total_titles"
    />
  </Row>
  <Row>
    <Table query="sample" />
  </Row>
</View>

Open your browser and navigate to http://localhost:3000 and you should see a working data app with a line chart displaying the number of titles released over time and a table with the raw data.

​

5. Next steps

You’ve successfully created a simple data app using Latitude. You’ve learned how to create a new app, add a data source, write queries, and define the layout and visualizations. You can now build on this knowledge to create more complex data apps and explore the full capabilities of Latitude.