Skip to content

Commit

Permalink
Merge branch 'docs/tidy-html-file' into docs/README_wording_update
Browse files Browse the repository at this point in the history
  • Loading branch information
@huong-li-nguyen
huong-li-nguyen committed Dec 11, 2024
2 parents e027186 + f0cc40b commit 93ab400
Showing 1 changed file with 36 additions and 82 deletions.
118 changes: 36 additions & 82 deletions vizro-core/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,27 @@
<br/><br/>
<br><br>

<div align="center">

<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Light_Mode.png">
<img alt="Vizro logo" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png" width="250">
</picture>
</p>
<br/>

<div align="center">
<font size="+1">
Vizro is a low-code toolkit for building high-quality data visualization apps
</font>
</div>

<div align="center" markdown="1">
#### Vizro is a low-code toolkit for building high-quality data visualization apps

[![Python version](https://img.shields.io/badge/python-3.9%20%7C%203.10%20%7C%203.11%20%7C%203.12%20%7C%203.13-blue.svg)](https://pypi.org/project/vizro/) [![PyPI version](https://badge.fury.io/py/vizro.svg)](https://badge.fury.io/py/vizro) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/mckinsey/vizro/blob/main/LICENSE.md) [![Documentation](https://readthedocs.org/projects/vizro/badge/?version=stable)](https://vizro.readthedocs.io/) [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/7858/badge)](https://www.bestpractices.dev/projects/7858)

</div>

<div align="center" markdown="1">

<a href="https://vizro.readthedocs.io/en/stable/" target="_blank">Documentation </a> | <a href="https://vizro.readthedocs.io/en/stable/pages/tutorials/first_dashboard/" target="_blank">Get Started </a> | <a href="http://vizro.mckinsey.com/" target="_blank">Vizro examples gallery</a>

</div>
[Documentation](https://vizro.readthedocs.io/en/stable/) | [Get Started](https://vizro.readthedocs.io/en/stable/pages/tutorials/first_dashboard/) | [Vizro examples gallery](http://vizro.mckinsey.com/)

---
<hr>

<p align="center">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser.gif" width="600"/>
</p>

<p align="center">
<br>
<br>
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/logo_watermarks.svg" width="300">
</p>
</div>


## What is Vizro?

Expand All @@ -45,22 +31,22 @@ Use it to build beautiful and powerful data visualization apps quickly and easil

Then customize and deploy your app to production at scale.

<p align="center">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/code_dashboard.png" width="1300"/>
<font size="-1">
Use a few lines of simple low-code configuration, with in-built visual design best practices, to assemble high-quality multi-page prototypes.
</font>
</p>

<div align="center">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/code_dashboard.png" width="100%"/>
Use a few lines of simple low-code configuration, with in-built visual design best practices, to assemble high-quality
multi-page prototypes.
</div>
<br>

The benefits of the Vizro toolkit include:

<p align="center">
<div align="center">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/infographic.svg" width="800"/>
</p>
</div>
<br>

Visit our ["How-to guides"](https://vizro.readthedocs.io/en/stable/pages/user-guides/install/) for a more detailed explanation of Vizro features.

Visit ["How-to guides"](https://vizro.readthedocs.io/en/stable/pages/user-guides/install/) for a more detailed explanation of Vizro features.

## Why use Vizro?

Expand Down Expand Up @@ -98,79 +84,47 @@ Use Vizro when you need to combine the speed and ease of low-code Python tools,

## How to use Vizro?

<div style="display: flex; align-items: center; ">

<div style="flex: 1; ">
<h3> <a href="https://vizro.readthedocs.io/en/stable/">Vizro framework</a> </h3>
### [Vizro framework](https://vizro.readthedocs.io/en/stable/)

<p> <b>Low-code framework for building dashboards.</b>
**Low-code framework for building dashboards**

The Vizro framework underpins the entire Vizro toolkit. It is a Python package (called `vizro`).

Visit the <a href="https://vizro.readthedocs.io/en/stable/">documentation</a> for more details.
Visit the [documentation](https://vizro.readthedocs.io/en/stable/) for more details.

</p>
</div>

<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_framework.svg" alt="" style="width: 400px; margin-left: 20px;">
</div>

<br>
<br>

<div style="display: flex; align-items: center;">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_visual_vocabulary.png" alt="" style="width: 500px; margin-right: 20px;">
<div style="flex: 1;">
<h3> <a href="https://vizro-demo-visual-vocabulary.hf.space/">Visual vocabulary</a> </h3>
### [Visual vocabulary](https://vizro-demo-visual-vocabulary.hf.space/)

<p style="flex: 1;">
<b> Chart examples. </b>
**Chart examples**

The visual vocabulary helps you to decide which chart type to use for your requirements, and offers sample code to create these charts with Plotly or embed them into a Vizro dashboard.

Visit the <a href="https://vizro-demo-visual-vocabulary.hf.space/">visual vocabulary</a> to search for charts or get inspiration.
Visit the [visual vocabulary](https://vizro-demo-visual-vocabulary.hf.space/) to search for charts or get inspiration.

</p>
</div>
</div>
<img width="600" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_visual_vocabulary.png">

<br>
<br>

<div style="display: flex; align-items: center;">
<div style="flex: 1;">
<h3> <a href="https://vizro.mckinsey.com/">Vizro examples gallery</a> </h3>
### [Vizro examples gallery](https://vizro.mckinsey.com/)

<p style="flex: 1;">
<b> Dashboard examples. </b>
**Dashboard examples**

The dashboard examples gallery enables you to explore Vizro in action by viewing interactive example apps. You can copy the code to use as a template or starter for your next dashboard.

Visit the <a href="https://vizro.mckinsey.com/">dashboard examples gallery</a> to see the dashboards in action.
Visit the [dashboard examples gallery](https://vizro.mckinsey.com/) to see the dashboards in action.

</p>
</div>
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_dashboard_examples.png" alt="" style="width: 500px; margin-left: 20px;">
</div>
<img width="600" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_dashboard_examples.png">

<br>
<br>

<div style="display: flex; align-items: center;">
<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif" alt="" style="width: 500px; margin-right: 20px;">
<div style="flex: 1;">
<h3> <a href="https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.3.2/">Vizro-AI</a> </h3>
### [Vizro-AI](https://vizro.readthedocs.io/projects/vizro-ai)

<p style="flex: 1;">
<b> LLM generated charts and dashboards. </b>
**LLM generated charts and dashboards**

Vizro-AI is a separate package (called `vizro_ai`) that extends Vizro to incorporate LLMs. Use it to build interactive Vizro charts and dashboards, by simply describing what you need in plain English or other languages.

Visit the <a href="https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.3.2/">Vizro-AI documentation</a> for more details.
Visit the [Vizro-AI documentation](https://vizro.readthedocs.io/projects/vizro-ai/) for more details.

<img width="600" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">

</p>
</div>
</div>

## Installation and first steps

Expand Down

0 comments on commit 93ab400

Please sign in to comment.