TL;DR

This article will walk you through all the information you need about embedded analytics and Latitude, including how to use Latitude to visualize your data, with a detailed guide.

Overview of Embedded Analytics

At this point, you may want to know what embedded analytics is. It refers to integrating data visualization into software or a web application. Instead of viewing data as numbers or as disorganized, there are different ways to display data in an organized way and embed it in an application.

Modern technologies like charting libraries, web components, APIs, and SDKs have made data visualization seamless. An alternative to visualizing your data could be using an underlying technology, but it could be challenging to achieve compared to emerging technologies such as the ones mentioned earlier.

Modern charting tools provide users with pre-built components that make them easy to work with. While using these tools, you only need to provide raw data to work with in most cases. This makes it easy to include your data visualization in your application.

ICYMI: We published an article a couple of weeks ago on the best chart libraries to use in 2024. It's best to read that article if you are looking for a chart library to work with. I've included in the article comprehensive details about the best charting libraries to work with according to your needs.

By the way, I'm a part of Latitude's team, and it would mean a lot if you could check out our open-source framework for embedded analytics and give us a star on GitHub.

We're working to provide a better developer experience, and all support is appreciated!

Star Latitude on GitHub ⭐️

Okay, now - let's get back at it! 😉

Key Concepts of Embedded Analytics

Real-time data access: Embedded analytics often provide access to real-time data. This lets users view analytics based on the most current data available. While doing this, you must know that this is a dynamic way of rendering analytics.
Customization: Most embedded analytics tools come with various pre-built components. You can customize the analytics tailored to your needs with the help of pre-built themes or custom styling. These tools also let you include features you want in your analytics. With the help of customization, you can display your analytics with the features or style you want to embed.
Integration with databases and host applications: Embedded analytics tools let you work directly with databases and host applications as data sources. While data could be rendered dynamically, many of these tools render data differently, just as various technologies are used for database management.
Focus on User Experience: This is the primary purpose of embedded analytics; it focuses on how data can be visualized in the best way for users. Providing great functionality in analytics helps users understand the context of the analysis.

There are tons of things embedded analytics could be used for. Embedding analytics works in hands with your data, but you may be wondering what its purpose is. For instance, you see a dashboard that displays the usage stats in an application as a chart—an example of embedded analytics integrated into that application. Different tools for visualizing data have various methods of sourcing data.

Getting Started with Latitude

There are different tools available for embedding analytics into your application. One option is Latitude, an open-source framework that allows you to build and embed interactive analytics based on your database or data warehouse.

With Latitude, you only need to write composable SQL queries with custom parameters to pull data and transform it into analytics on your front end. The framework works with Svelte for the front end; with the pre-built components Latitude provides, you can include your components as attributes to display your analytics.

How Latitude Works

Latitude works with two major things: your database or data warehouse and your front end, with the help of the created database. Additionally, data can be displayed statically using CSV files. By doing this, there's no need to worry about anything apart from creating SQL queries.

Latitude isn't limited to using Svelte alone for the front end; you can also integrate Latitude into your React application. All you need to do after configuring the parameters is include them in the components for the data you have to display.

With Latitude, you're on the right path to embedding your analytics into your application.

Prerequisites for getting started with Latitude

Basic knowledge of SQL.
npm >= 8.5.5 or higher installed on your local development machine.
Vast knowledge of React or Svelte.
Basic knowledge of CSS frameworks such as Tailwind for styling.

Away from the hype, Latitude is one tool you will love to try out because of its accessibility! To start with Latitude, you must install Latitude's CLI on your local machine. The command below will install Latitude's CLI globally on your local machine.

npm install -g @latitude-data/cli

After installing the CLI, you need to create your Latitude project. You can only configure your queries and views by creating a project in Latitude. Use the command below to create a Latitude project.

latitude start

This is where your actual journey of building with Latitude begins. When you run the command, you should input the project name when requested and select the type of project, whether a prebuilt project (DuckDB + CSV demo) or an empty project from scratch.

By doing that, you have your project created locally. Afterward, cd into the project name. After doing this, you can execute the code . command to work on the project from your IDE. From here, you need to understand Latitude's project structure.

Project structure

Before working on any project, you need to understand its structure, the functionalities of each path, and the file in every path.

In Latitude, there are two significant directories: queries and views. But before going into that, here is the project structure of a Latitude project:

project-name/
├── queries/
├── views/

These are the only two paths to work with. In these paths, you will find files. The queries directory contains a configuration file, source.yml, and SQL queries. Although, when you create a project from scratch, you won't find any query files. You will have to create your query files.

Also, you can add your CSV file to the queries directory if you like. In this context, fundamental knowledge of SQL or other query languages is best. queries in Latitude can be regarded as the data source displayed in the embedded analytics.

For the views path, it controls the entire front end. You will find an HTML file in that directory that works with Svelte. In that file, you interact with your queries using parameters configured in your queries.

Now, we need to start working on queries. I will use this CSV file, Top 50 Spotify Music from 2010 to 2019, as the data source in this guide. You could download the file and keep it on your query path.

The next thing to do is set up your queries. This is where your SQL knowledge will be beneficial. Create a file in the same queries directory to capture your data source. You can use the query snippet below:

select title,
       artist,
       genre,
       music_year,
       BeatsPerMinute,
from read_csv_auto('queries/spotify.csv')
order by music_year asc

The code snippet above shows that the only fields to extract data are the title, artist, genre, music_year, and BeatsPerMinute fields from the CSV file. Toward the end of the snippet, the sixth line specifies the CSV file from which to pull data.

After doing this, you need another query to sum up your data. To do this, you can give the file a suitable name for an aggregated query file. In this case, I’ll name the query file firstcomp.sql.

select
  music_year,
  count(*) as all_titles,
from { ref('first') }
group by 1
order by 1 asc

In the query above, the music_year field from the CSV file was selected, and then the primary query file, first.sql , was referenced first. It indicates that data should be grouped differently and in ascending order.

To verify if your data was extracted correctly, you will have to run the query above using Latitude's CLI with this command:

latitude run second_filename

By doing that, this should be your result:

If you get something like this, you're on the right path. After verifying your queries and data source, the next thing to do is work on how the data should be displayed.

Now, let's navigate to the views/ directory to set the front end for the analytics we want to display.

Unlike the queries/ path, where we have to work with multiple files, we will work with index.html alone. You can add this snippet to your HTML code:

<svelte:head>
  <title>Demo project</title>
</svelte:head>
<View class="gap-8 p-8">
  <Row>
    <Text.H2 class="font-bold">Top 50 Spotify music dataset (2010 to 2019)</Text.H2>
  </Row>
  <Row>
    <LineChart
      query="firstagg"
      x="music_year"
      y="title"
    />
  </Row>
  <Row>
    <Table query="first" />
  </Row>
</View>

As you can see in the code above, it works with Svelte. Now, we aim to display analytics with the components available. The LineChart component was used because we wanted to display our data as a line chart. Afterward, we added values to the components to work with the parameters in the query files. I also added a table to work with the primary query file.

When you have that code in your index.html file, you can now run the project using this command:

latitude dev

By doing this, you'll be redirected to localhost:3000 from your terminal. Then, you should have this view on your browser displaying your data analytics.

You can embed your analytics into any website using React or HTML. If you are familiar with React, this documentation will guide you on embedding your analytics application with React.

To embed this in any application, you must ensure your Latitude application is deployed on Latitude Cloud.

To deploy your application, you need to sign up for Latitude Cloud.

latitude signup

If you have an existing Latitude Cloud account, you can log in to access it.

latitude login

After doing this, you can deploy your application by running the command below.

latitude deploy

Congratulations! You have your Latitude application deployed. 🎉

Now that we have our Latitude application deployed, the last thing to do is embed the analytics in our Latitude into another website. You can use the iframe embedding technique if you're not using React.

This could be done in three ways, depending on what you want to achieve by embedding. It could be embedded directly using parameters in the iframe's value or passing signed parameters.

To embed your analytics directly, you can put this iframe in your code:

<iframe src="https://app-url.latitude.so/" width="100%" height="400"></iframe>

In this context, you need to replace the source, https://app-url.latitude.so/, with the actual URL of your deployed application. The iframe code above helps embed your entire analytics into your web application.

That is the easiest way to embed analytics into your application, literally. You can learn about the other methods; passing parameters and passing signed parameters.

As much as there are tons of tools for visualizing data and embedding analytics into your application, Latitude makes this look very easy. It's not false hype, but the developer experience of Latitude is what makes it a great tool to use. Imagine connecting your data to your front end to integrate analytics into your application seamlessly - it's something you want to try out.

You can learn more about Latitude by going through Latitude's documentation. There are a series of guides that can walk you through everything about Latitude.

Conclusion

This article transitioned from embedded analytics to how you can get started with it easily using Latitude. If you don't understand how to use any embedded analytics tool, Latitude is one you can try out because of its seamlessness and developer experience.

Note that Latitude can be used with React or Svelte. Either way, they’re both great ways to use Latitude.

Support us 🙏 ⭐️

Latitude is open-source; you can contribute to the project as we want to make it more seamless for developers. If you love the project, you can go ahead and give it a star; we appreciate it!