Skip to content

Commit

Permalink
docs: fix images (#74)
Browse files Browse the repository at this point in the history
Co-authored-by: Fabiana Clemente <[email protected]>
  • Loading branch information
fabclmnt and Fabiana Clemente authored Nov 30, 2023
1 parent 9599037 commit 852f27d
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 18 deletions.
18 changes: 10 additions & 8 deletions docs/get-started/create_lab.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,47 @@ To create your first **Lab**, you can use the **“Create Lab”** from Fabric
module by selecting it on the left side menu, and clicking the **“Create Lab”** button.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/create_lab.webp" alt="Select create a lab from Home" style="width: 75%;">
<p>
<img src="/assets/quickstart/create_lab/create_lab.webp" alt="Select create a lab from Home" style="width: 75%;">
</p>
</div>

Next, a menu with different IDEs will be shown. As a quickstart select *Jupyter Lab*. As labs are development environments
you will be also asked what language you would prefer your environment to support: *R* or *Python*. Select Python.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/select_ide.webp" alt="Select an IDE" style="width: 50%;">
<img src="../assets/quickstart/create_lab/select_language.webp" alt="Python or R" style="width: 50%;">
<img src="/assets/quickstart/create_lab/select_ide.webp" alt="Select an IDE" style="width: 50%;">
<img src="/assets/quickstart/create_lab/select_language.webp" alt="Python or R" style="width: 50%;">
</div>

Bundles are environments with pre-installed packages. Select YData bundle, so we can leverage some other Fabric features
such as Data Profiling, Synthetic Data and Pipelines.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/select_bundle.webp" alt="Select the bundle for development" style="width: 75%;">
<img src="/assets/quickstart/create_lab/select_bundle.webp" alt="Select the bundle for development" style="width: 75%;">
</div>

As a last step, you will be asked to configure the infrastructure resources for this new environment as well as giving it
a *Display Name*. We will keep the defaults,
but you have flexibility to select GPU acceleration or whether you need more computational resources for your developments.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/select_infrastructure.webp" alt="Select the computational resources" style="width: 75%;">
<img src="/assets/quickstart/create_lab/select_infrastructure.webp" alt="Select the computational resources" style="width: 75%;">
</div>

Finally, your Lab will be created and added to the "Labs" list, as per the image below. The status of the lab will be
🟡 while preparing, and this process takes a few minutes, as the infrastructure is being allocated to your development environment.
As soon as the status changes to 🟢, you can open your lab by clicking in the button as shown below:

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/open_lab.webp" alt="Open your lab environment" style="width: 75%;">
<img src="/assets/quickstart/create_lab/open_lab.webp" alt="Open your lab environment" style="width: 75%;">
</div>

Create a new notebook in the JupyterLab and give it a name. You are now ready to start your developments!

<div style="display: flex; justify-content: center;align-items: center;">
<img src="../assets/quickstart/create_lab/notebook_creation.webp" alt="Create a new notebook" style="width: 50%;">
<img src="../assets/quickstart/create_lab/notebook_created.webp" alt="Notebook created" style="width: 50%;">
<img src="/assets/quickstart/create_lab/notebook_creation.webp" alt="Create a new notebook" style="width: 50%;">
<img src="/assets/quickstart/create_lab/notebook_created.webp" alt="Notebook created" style="width: 50%;">
</div>

**Congrats!** 🚀 You have now successfully created your first **Lab** a code environment, so you can benefit from the most
Expand Down
18 changes: 10 additions & 8 deletions docs/get-started/upload_csv.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@ To create your first dataset in the **Data Catalog**, you can start by clicking
Or click to **Data Catalog** (on the left side menu) and click **“Add Dataset”**.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/welcome_add_dataset.png" alt="Add dataset from Home" style="width: 75%;">
<img src="assets/quickstart/upload_csv/welcome_add_dataset.png" alt="Add dataset from Home" style="width: 75%;">
</div>

After that the below modal will be shown. You will need to select a connector. To upload a CSV file, we need to select **“Upload CSV”**.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/data_catalog_connectors.png" alt="Select connectors to storage" style="width: 45%;">
<img src="assets/quickstart/upload_csv/data_catalog_connectors.png" alt="Select connectors to storage" style="width: 45%;">
</div>

Once you've selected the **“Upload CSV”** connector, a new screen will appear, enabling you to upload your file and designate a name for your connector.
This file upload connector will subsequently empower you to create one or more datasets from the same file at a later stage.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/loading_area.png" alt="Upload file area" style="width: 45%;">
<img src="/assets/quickstart/upload_csv/load_csv_file.png" alt="Upload CSV file" style="width: 45%;">
<img src="assets/quickstart/upload_csv/loading_area.png" alt="Upload file area" style="width: 45%;">
<img src="assets/quickstart/upload_csv/load_csv_file.png" alt="Upload CSV file" style="width: 45%;">
</div>

With the *Connector* created, you'll be able to add a dataset and specify its properties:
Expand All @@ -31,29 +31,31 @@ With the *Connector* created, you'll be able to add a dataset and specify its pr
- **Data Type:** Whether your dataset contains tabular or time-series (i.e., containing temporal dependency) data.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/add_dataset_details.png" alt="Upload file area" style="width: 45%;">
<img src="assets/quickstart/upload_csv/add_dataset_details.png" alt="Upload file area" style="width: 45%;">
</div>

Your created Connector *(“Census File”)* and Dataset *(“Census”)* will be added to the Data Catalog.
As soon as the status is green, you can navigate your Dataset. Click in **Open Dataset** as per the image below.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/open_dataset.png" alt="Upload file area" style="width: 75%;">
<img src="assets/quickstart/upload_csv/open_dataset.png" alt="Upload file area" style="width: 75%;">
</div>

Within the **Dataset** details, you can gain valuable insights through our automated data quality profiling.
This includes comprehensive metadata and an overview of your data, encompassing details like row count, identification
of duplicates, and insights into the overall quality of your dataset.

<p align="center"><img src="assets/overview/data_centric_approach.png" alt="Data-Centric AI Approach" width="900"></p>

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/dataset_overview.png" alt="Upload file area" style="width: 75%;">
<img src="assets/quickstart/upload_csv/dataset_overview.png" alt="Upload file area" style="width: 75%;">
</div>

Or perhaps, you want to further explore through visualization, the profile of your data with both univariate
and multivariate of your data.

<div style="display: flex; justify-content: center;align-items: center;">
<img src="/assets/quickstart/upload_csv/dataset_profiling.png" alt="Upload file area" style="width: 75%;">
<img src="assets/quickstart/upload_csv/dataset_profiling.png" alt="Upload file area" style="width: 75%;">
</div>

**Congrats!** 🚀 You have now successfully created your first **Connector** and **Dataset** in Fabric’s Data Catalog.
Expand Down
2 changes: 0 additions & 2 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,9 @@ acceleration to empower data science, analytics, and data engineering teams.

<p align="center"><img src="assets/overview/data_centric_approach.png" alt="Data-Centric AI Approach" width="900"></p>


### Try Fabric
- <a href="get-started/fabric_community/"><u>Get started with Fabric Community</u></a>


## Why adopt YData Fabric?

With Fabric, you can standardize the understanding of your data, quickly identify data quality issues, streamline and
Expand Down

0 comments on commit 852f27d

Please sign in to comment.