Skip to content

Simplify "Why Chartifact" example with table-driven pie chart and improved layout #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Simplify "Why Chartifact" example with table-driven pie chart and improved layout #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
000fa67
Initial plan
Copilot Sep 14, 2025
929aec6
Add pie chart and tabulator to why-chartifact example with Excel vs l…
Copilot Sep 14, 2025
cdff3a8
Simplify why-chartifact example per feedback - chart driven by table,…
Copilot Sep 14, 2025
1f7394d
Fix invalid group type elements and add schema validation to instruct…
Copilot Sep 14, 2025
6ef1e60
Fix Tabulator dataSourceName and variableId conflict in why-chartifac…
Copilot Sep 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .github/copilot-instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,10 @@ Chartifact consists of several interoperating modules:
- There is a sandboxed runtime that securely renders documents available at https://microsoft.github.io/chartifact/view
- The url above can accept a `load` parameter to specify the document to render, for example https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/562d086/packages/web-deploy/json/sales-dashboard.idoc.json
- **ALWAYS provide a preview link when creating or modifying examples** - include the preview link in PR comments and descriptions automatically so examples can be tested immediately without being asked.

## Schema Validation

- **IMPORTANT**: All JSON documents must validate against the JSON schema at `docs/schema/idoc_v1.json` or conform to the TypeScript declaration at `docs/schema/idoc_v1.d.ts`
- Valid `PageElement` types are only: strings (markdown) or specific interactive elements (`chart`, `checkbox`, `dropdown`, `image`, `mermaid`, `presets`, `slider`, `tabulator`, `textbox`)
- **NO** `"type": "group"` elements are allowed within `elements` arrays - only use `ElementGroup` at the top level in the `groups` array
- Test JSON validity before committing changes
145 changes: 143 additions & 2 deletions docs/assets/examples/markdown/why-chartifact.idoc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,53 @@
"name": "calculatedWorth",
"value": "1000",
"update": "format(interactiveValue, ',')"
},
{
"name": "formatCapabilities",
"update": "data('formatCapabilities')"
},
{
"name": "excelVsLiveData",
"update": "data('excelVsLiveData')"
}
],
"data": [
{
"name": "documentFormats",
"values": [
{"format": "PDF", "capability": "Portable", "score": 95, "interactive": false},
{"format": "PDF", "capability": "Human-editable", "score": 10, "interactive": false},
{"format": "PDF", "capability": "Interactive", "score": 5, "interactive": false},
{"format": "HTML", "capability": "Portable", "score": 40, "interactive": true},
{"format": "HTML", "capability": "Human-editable", "score": 30, "interactive": true},
{"format": "HTML", "capability": "Interactive", "score": 95, "interactive": true},
{"format": "Markdown", "capability": "Portable", "score": 70, "interactive": false},
{"format": "Markdown", "capability": "Human-editable", "score": 90, "interactive": false},
{"format": "Markdown", "capability": "Interactive", "score": 20, "interactive": false},
{"format": "Chartifact", "capability": "Portable", "score": 85, "interactive": true},
{"format": "Chartifact", "capability": "Human-editable", "score": 85, "interactive": true},
{"format": "Chartifact", "capability": "Interactive", "score": 90, "interactive": true}
]
},
{
"name": "formatCapabilities",
"source": "documentFormats",
"transform": [
{
"type": "aggregate",
"groupby": ["format"],
"ops": ["mean"],
"fields": ["score"],
"as": ["avgScore"]
}
]
},
{
"name": "excelVsLiveData",
"values": [
{"approach": "Excel Screenshot", "update_frequency": "Manual", "interactivity": "None", "data_freshness": "Stale", "effort_to_update": "High"},
{"approach": "Live Chart", "update_frequency": "Real-time", "interactivity": "Full", "data_freshness": "Current", "effort_to_update": "None"}
]
}
]
}
Expand All @@ -30,7 +77,7 @@ body { scroll-snap-type: y mandatory; }
#slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; }
#slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; }
#slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; }
#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; }
#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; min-width: 0; overflow: hidden; }
#slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; }
#slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; }
h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; }
Expand All @@ -39,6 +86,12 @@ h3 { font-size: 1.6em; margin: 0.5em 0; font-weight: 400; line-height: 1.2; }
p, li { font-size: 1.2em; line-height: 1.5; margin: 0.5em 0; }
ul, ol { margin: 0.5em 0; padding-left: 1.5em; }
li { margin: 0.3em 0; }
.tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; }
.tabulator .tabulator-table { min-width: fit-content; }
.tabulator .tabulator-header { background: rgba(255,255,255,0.9); color: #333; }
.tabulator .tabulator-cell { background: rgba(255,255,255,0.8); color: #333; }
.vega-embed { margin: 20px auto; }
.vega-embed .vega-actions { display: none; }
@media (max-width: 768px) { .group { padding: 2em 1em; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } p, li { font-size: 1em; line-height: 1.4; } ul, ol { padding-left: 1em; } }
@media (max-width: 480px) { .group { padding: 1.5em 0.8em; } h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } p, li { font-size: 0.9em; line-height: 1.3; } ul, ol { padding-left: 0.8em; } li { margin: 0.2em 0; } }
```
Expand Down Expand Up @@ -103,7 +156,9 @@ li { margin: 0.3em 0; }
:::
::: group {#slide6}

## 📊 Interactive Content is Exponentially More Valuable
## 📊 Stop Pasting Chart Images from Excel!
### Make them live charts from live data instead

### If a picture is worth 1,000 words...
# {{calculatedWorth}}
### Then an interactive is worth **{{calculatedWorth}}** words
Expand All @@ -119,6 +174,92 @@ step: 1000
```


### 📈 Document Format Capabilities


```json vega-lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": 300,
"height": 300,
"data": {
"name": "formatCapabilities"
},
"mark": {
"type": "arc",
"innerRadius": 50,
"stroke": "white",
"strokeWidth": 3
},
"encoding": {
"theta": {
"field": "avgScore",
"type": "quantitative",
"title": "Capability Score"
},
"color": {
"field": "format",
"type": "nominal",
"scale": {
"range": ["#e74c3c", "#f39c12", "#27ae60", "#3498db"]
},
"legend": {
"orient": "right",
"title": "Document Format"
}
},
"tooltip": [
{"field": "format", "type": "nominal", "title": "Format"},
{"field": "avgScore", "type": "quantitative", "title": "Average Score", "format": ".1f"}
]
}
}
```


### 🆚 Excel Screenshots vs Live Data


```json tabulator
{
"dataSourceName": "excelVsLiveData",
"variableId": "excelComparisonTable",
"editable": true,
"tabulatorOptions": {
"layout": "fitColumns",
"maxHeight": "200px",
"columns": [
{
"title": "Approach",
"field": "approach",
"editor": "input"
},
{
"title": "Updates",
"field": "update_frequency",
"editor": "input"
},
{
"title": "Interactive",
"field": "interactivity",
"editor": "input"
},
{
"title": "Data Freshness",
"field": "data_freshness",
"editor": "input"
},
{
"title": "Effort",
"field": "effort_to_update",
"editor": "input"
}
]
}
}
```


### ⚡ This slide proves the point - you just experienced it!
:::
::: group {#slide7}
Expand Down
135 changes: 110 additions & 25 deletions packages/web-deploy/json/why-chartifact.idoc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"#slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; }",
"#slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; }",
"#slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; }",
"#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; }",
"#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: flex-start; }",
"#slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; }",
"#slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; }",
"h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; }",
Expand All @@ -20,30 +20,81 @@
"p, li { font-size: 1.2em; line-height: 1.5; margin: 0.5em 0; }",
"ul, ol { margin: 0.5em 0; padding-left: 1.5em; }",
"li { margin: 0.3em 0; }",
".tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; min-width: 0; }",
".tabulator .tabulator-table { min-width: fit-content; }",
".tabulator .tabulator-header { background: rgba(255,255,255,0.9); color: #333; }",
".tabulator .tabulator-cell { background: rgba(255,255,255,0.8); color: #333; }",
".vega-embed { margin: 20px auto; }",
".vega-embed .vega-actions { display: none; }",
"@media (max-width: 768px) { .group { padding: 2em 1em; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } p, li { font-size: 1em; line-height: 1.4; } ul, ol { padding-left: 1em; } }",
"@media (max-width: 480px) { .group { padding: 1.5em 0.8em; } h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } p, li { font-size: 0.9em; line-height: 1.3; } ul, ol { padding-left: 0.8em; } li { margin: 0.2em 0; } }"
]
},
"variables": [
{
"variableId": "interactiveValue",
"type": "number",
"initialValue": 1000
},
"dataLoaders": [
{
"variableId": "calculatedWorth",
"type": "string",
"initialValue": "1000",
"calculation": {
"vegaExpression": "format(interactiveValue, ',')"
}
},
"dataSourceName": "chartData",
"type": "inline",
"format": "json",
"content": [
{"category": "Excel Screenshots", "value": 25},
{"category": "Live Charts", "value": 35},
{"category": "Static Images", "value": 20},
{"category": "Interactive Data", "value": 20}
]
}
],
"variables": [
{
"variableId": "currentYear",
"type": "number",
"initialValue": 2025
},
{
"variableId": "editableChartData",
"type": "object",
"isArray": true,
"initialValue": []
}
],
"resources": {
"charts": {
"dataVisualizationChart": {
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": 250,
"height": 250,
"data": {
"name": "editableChartData"
},
"mark": {
"type": "arc",
"innerRadius": 40,
"stroke": "white",
"strokeWidth": 2
},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "category",
"type": "nominal",
"scale": {
"range": ["#e74c3c", "#3498db", "#95a5a6", "#27ae60"]
},
"legend": {
"orient": "bottom",
"title": "Data Visualization Types"
}
},
"tooltip": [
{"field": "category", "type": "nominal", "title": "Type"},
{"field": "value", "type": "quantitative", "title": "Usage %"}
]
}
}
}
},
"groups": [
{
"groupId": "slide1",
Expand Down Expand Up @@ -115,19 +166,53 @@
{
"groupId": "slide6",
"elements": [
"## 📊 Interactive Content is Exponentially More Valuable",
"### If a picture is worth 1,000 words...",
"# {{calculatedWorth}}",
"### Then an interactive is worth **{{calculatedWorth}}** words",
"## 📊 Stop Pasting Chart Images from Excel!",
"### Make them live charts from live data instead",
"",
"**The Problem:**",
"- Screenshots become stale immediately",
"- No interaction or exploration",
"- Manual updates required",
"- Data context lost",
"",
"**The Solution:**",
"- Live data connections",
"- Interactive exploration",
"- Automatic updates",
"- Rich context preserved",
"",
"### ⚡ Experience the difference below:",
"",
"### 📈 Live Data Visualization",
{
"type": "slider",
"variableId": "interactiveValue",
"label": "Adjust the multiplier",
"min": 1000,
"max": 100000,
"step": 1000
"type": "chart",
"chartKey": "dataVisualizationChart"
},
"### ⚡ This slide proves the point - you just experienced it!"
"",
"### 📊 Editable Data Source",
"**Try editing the values in the table below and watch the chart update in real-time!**",
{
"type": "tabulator",
"variableId": "editableChartData",
"dataSourceName": "chartData",
"editable": true,
"tabulatorOptions": {
"layout": "fitColumns",
"maxHeight": "180px",
"columns": [
{
"title": "Category",
"field": "category",
"editor": "input"
},
{
"title": "Value",
"field": "value",
"editor": "number"
}
]
}
}
]
},
{
Expand Down