#!/usr/bin/env python # coding: utf-8 # In[ ]: flex_subtitle = "built using jupyter-flex" flex_source_link = "https://github.com/danielfrg/jupyter-flex/blob/master/examples/layouts/card-complete.ipynb" flex_include_source = True # # A card with all the items # ### Card header # This is a markdown cell, **all** *regular* syntax ~~should~~ works. # This is another markdown cell, you can have multiple text cells and the main chart is expanded. # In[ ]: import plotly import plotly.express as px # In[ ]: df = px.data.iris() # In[ ]: fig = px.scatter(df, x="sepal_width", y="sepal_length") fig.show() # This is more markdown below the main content # Click on the help button in the corner to open the help modal. # This is a MD cell on the footer, we can use [regular md](https://google.com) an even show code, for example: # In[ ]: "plotly version: " + plotly.__version__ # This is the help modal, the title above ^^ is the same card header and this is just a regular markdown cell. # In[ ]: "This is code output" # You can have also have plots here # In[ ]: fig = px.scatter(df, x="sepal_width", y="sepal_length") fig.show() # # Another card # ### A card with a lot of help # This is empty but click on the help button to see a lot of stuff # # This is the title # # Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over). # # There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. # # There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. # # > There should be no margin above this first sentence. # > # > Blockquotes should be a lighter gray with a gray border along the left side. # > # > There should be no margin below this final sentence. # # # Header 1 # # This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. # # ## Header 2 # # > This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. # # ### Header 3 # # ``` # This is a code block following a header. # ``` # # #### Header 4 # # * This is an unordered list following a header. # * This is an unordered list following a header. # * This is an unordered list following a header. # # ##### Header 5 # # 1. This is an ordered list following a header. # 2. This is an ordered list following a header. # 3. This is an ordered list following a header. # # ###### Header 6 # # | What | Follows | # |-----------|-----------------| # | A table | A header | # | A table | A header | # | A table | A header | # # ---------------- # # There's a horizontal rule above and below this. # # ---------------- # # Here is an unordered list: # # * Salt-n-Pepa # * Bel Biv DeVoe # * Kid 'N Play # # And an ordered list: # # 1. Michael Jackson # 2. Michael Bolton # 3. Michael Bublé # # And an unordered task list: # # - [x] Create a sample markdown document # - [x] Add task lists to it # - [ ] Take a vacation # # And a "mixed" task list: # # - [ ] Steal underpants # - ? # - [ ] Profit! # # And a nested list: # # * Jackson 5 # * Michael # * Tito # * Jackie # * Marlon # * Jermaine # * TMNT # * Leonardo # * Michelangelo # * Donatello # * Raphael # # Definition lists can be used with HTML syntax. Definition terms are bold and italic. # #