Screenshots and demo links for widgets, closes #96

simonw · May 16, 2021 · 5157d88 · 5157d88
1 parent e31e954
commit 5157d88
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 1 deletion.
diff --git a/docs/bar_label-bar_quantity.png b/docs/bar_label-bar_quantity.png
diff --git a/docs/big_number-label.png b/docs/big_number-label.png
diff --git a/docs/completed_count-total_count.png b/docs/completed_count-total_count.png
diff --git a/docs/widgets.md b/docs/widgets.md
@@ -6,7 +6,11 @@ SQL queries default to displaying as a table. Other forms of display - called wi
 
 A query that returns columns called `bar_label` and `bar_quantity` will be rendered as a simple bar chart, using [Vega-Lite](https://vega.github.io/vega-lite/).
 
-For example:
+![A bar chart produced by this widget](bar_label-bar_quantity.png)
+
+Bar chart live demo: [simonwillison.net/dashboard/by-month/](https://simonwillison.net/dashboard/by-month/)
+
+SQL example:
 
 ```sql
 select
@@ -34,6 +38,10 @@ If you want to display the results as a big number accompanied by a label, you c
 select 'Number of states' as label, count(*) as big_number from states;
 ```
 
+![Output of the big number widget](big_number-label.png)
+
+Big number live demo: [simonwillison.net/dashboard/big-numbers-demo/](https://simonwillison.net/dashboard/big-numbers-demo/)
+
 ## Progress bar: total_count, completed_count
 
 To display a progress bar, return columns `total_count` and `completed_count`.
@@ -42,6 +50,10 @@ To display a progress bar, return columns `total_count` and `completed_count`.
 select 1203 as total_count, 755 as completed_count;
 ```
 
+![Output of the progress bar widget](completed_count-total_count.png)
+
+Progress bar live demo: [simonwillison.net/dashboard/progress-bar-demo/](https://simonwillison.net/dashboard/progress-bar-demo/)
+
 ## Word cloud: wordcloud_word, wordcloud_count
 
 To display a word cloud, return a column `wordcloud_word` containing words with a corresponding `wordcloud_count` column with the frequency of those words.
@@ -89,6 +101,10 @@ order by
   count(*) desc
 ```
 
+![Output of the word cloud widget](wordcloud_count-wordcloud_word.png)
+
+Word cloud live demo: [simonwillison.net/dashboard/tag-cloud/](https://simonwillison.net/dashboard/tag-cloud/)
+
 ## markdown
 
 Return a single column called `markdown` to render the contents as Markdown, for example:

diff --git a/docs/wordcloud_count-wordcloud_word.png b/docs/wordcloud_count-wordcloud_word.png