docs: added documentation for charts (#165)

2026-07-22 05:12:18 +00:00 · 2025-06-04 17:16:56 +02:00 · 2025-06-04 17:16:56 +02:00 · c70ec3553d
commit c70ec3553d
parent c8e2c8321f
30 changed files with 1445 additions and 961 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1 +1,2 @@
-ko_fi: hypersphere
+ko_fi: hypersphere
+patreon: hypersphere
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@ -24,6 +24,7 @@ export default defineConfig({

    sidebar: [
      {
+        collapsed: true,
        text: 'Documentation',
        items: [
          { text: 'Quick Start', link: '/quick-start' },
@ -45,6 +46,7 @@ export default defineConfig({
      },
      {
        text: 'Data Sources',
+        collapsed: true,
        items: [
          { text: 'Vault Data', link: '/data-sources/vault-data' },
          { text: 'CSV', link: '/data-sources/csv' },
@ -54,6 +56,7 @@ export default defineConfig({
      },
      {
        text: 'Renderers',
+        collapsed: true,
        items: [
          { text: 'Grid', link: '/renderers/grid' },
          { text: 'HTML', link: '/renderers/html' },
@ -62,8 +65,31 @@ export default defineConfig({
          { text: 'Markdown', link: '/renderers/markdown' },
        ]
      },
+      {
+        text: 'Charts',
+        collapsed: true,
+        items: [
+          { text: 'Charts introduction', link: '/charts/introduction' },
+          { text: 'Basics', link: '/charts/basics' },
+          { text: 'Chart Types', items: [
+            { text: 'Bar Chart', link: '/charts/types/bar-chart', docFooterText: 'Chart Types: Bar Chart' },
+            { text: 'Line Chart', link: '/charts/types/line-chart', docFooterText: 'Chart Types: Line Chart' },
+            { text: 'Pie Chart', link: '/charts/types/pie-chart', docFooterText: 'Chart Types: Pie Chart' },
+            { text: 'Scatter Plot', link: '/charts/types/scatter-plot', docFooterText: 'Chart Types: Scatter Plot' },
+            { text: 'Candlestick', link: '/charts/types/candlestick', docFooterText: 'Chart Types: Candlestick' },
+            { text: 'Radar', link: '/charts/types/radar', docFooterText: 'Chart Types: Radar' },
+            { text: 'Sunburst', link: '/charts/types/sunburst', docFooterText: 'Chart Types: Sunburst' },
+            { text: 'Mixed Charts', link: '/charts/types/mixed-charts' }
+
+          ]},
+          { text: 'Advanced Mode', link: '/charts/advanced-mode' },
+          { text: 'Regression', link: '/charts/regression' },
+          { text: 'Clustering', link: '/charts/clustering' }
+        ]
+      },
      {
        text: 'FAQ',
+        collapsed: true,
        items: [
          { text: 'Comparison with Dataview', link: '/faq/comparison-with-dataview' },
          { text: 'SQLSeal with Obsidian Sync', link: '/faq/obsidian-sync' },
@ -72,6 +98,7 @@ export default defineConfig({
        ]
      },
      {
+        collapsed: true,
        text: 'Contributing',
        items: [
          { text: 'Contributing', link: '/contributing/get-started' },
@ -89,7 +116,10 @@ export default defineConfig({
    socialLinks: [
      { icon: 'github', link: 'https://github.com/h-sphere/sql-seal' },
      { icon: 'discord', link: 'https://discord.gg/ZMRnFeAWXb' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/hypersphereblog.bsky.social' }
+      { icon: 'bluesky', link: 'https://bsky.app/profile/hypersphereblog.bsky.social' },
+      { icon: 'kofi', link: 'https://ko-fi.com/hypersphere' },
+      { icon: 'patreon', link: 'https://www.patreon.com/c/hypersphere' },
+
    ],
    footer: {
      message: '',
--- a/docs/.vitepress/theme/components/Stats.vue
+++ b/docs/.vitepress/theme/components/Stats.vue
@ -1,22 +1,22 @@
 <script setup>
 const stats = [
  {
-    number: '3K+',
+    number: '7K+',
    label: 'Downloads',
    icon: '📥'
  },
  {
-    number: '54+',
+    number: '65+',
    label: 'Releases',
    icon: '📦'
  },
  {
-    number: '88+',
+    number: '110+',
    label: 'GitHub Stars',
    icon: '⭐'
  },
  {
-    number: '99+',
+    number: '130+',
    label: 'Discord Members',
    icon: '🤝'
  }
--- a/docs/charts/advanced-mode.md
+++ b/docs/charts/advanced-mode.md
@ -0,0 +1,4 @@
+# Advanced Mode
+You can specify `Advaced Mode` flag to enable full JavaScript capabilities. In this mode you can write any JavaScript code that will get executed. This allows you to process data in custom way. The function should return configuration object.
+
+Check the following guides on regression and clustering for more details.
--- a/docs/charts/basics-pie.png
+++ b/docs/charts/basics-pie.png
--- a/docs/charts/basics.md
+++ b/docs/charts/basics.md
@ -0,0 +1,39 @@
+# Basics
+Let's start with creating pie chart using data from our vault.
+> [!NOTE] Note on data
+> To make examples easier to reproduce, we will use markdown table located in the same file. In real vault you can use any data source like properties from your files, CSV data files, etc.
+
+
+## Basic Piechart
+
+| Category      | Amount |
+| ------------- | ------ |
+| Rent          | 500    |
+| Groceries     | 350    |
+| Entertainment | 1050   |
+| Repairs       | 1200   |
+| Utilities     | 300    |
+
+```
+TABLE finances = table(0)
+
+CHART {
+	series: [{
+		type: 'pie'
+	}]
+}
+SELECT * FROM finances
+```
+
+![Pie Chart](basics-pie.png)
+
+## Attribution and thanks
+This project uses Apache ECharts under the hood. This is an amazing library with plenty of capabilities beyond the one presented in this documentation. Majority of functionality presented in their documentation should be also possible to achieve in SQLSeal Charts. For basic use-cases this documentation should be sufficient but if you're looking to dive deeper into advanced, interactive charts, [check out thier documentation too](https://echarts.apache.org/en/option.html).
+
+## Contribute
+If you implemented interesting chart or have an idea of visualising something but don't know how to approach it, [join our Discord and share your thoughts](https://discord.gg/ZMRnFeAWXb)!
+
+
+## Syntax highlighting
+> [!NOTE] Syntax Highlighting
+> Syntax Highlighting for Charts works perfectly fine in Obsidian. It's not been yet implemented in this documentation
--- a/docs/charts/clustering.md
+++ b/docs/charts/clustering.md
@ -0,0 +1,147 @@
+# Advanced: Clustering
+
+You can cluster the data into separate buckets to find some underlying complexity.
+
+# Example
+
+| x         | y         |
+| --------- | --------- |
+| 3.275154  | 2.957587  |
+| -3.344465 | 2.603513  |
+| 0.355083  | -3.376585 |
+| 1.852435  | 3.547351  |
+| -2.078973 | 2.552013  |
+| -0.993756 | -0.884433 |
+| 2.682252  | 4.007573  |
+| -3.087776 | 2.878713  |
+| -1.565978 | -1.256985 |
+| 2.441611  | 0.444826  |
+| -0.659487 | 3.111284  |
+| -0.459601 | -2.618005 |
+| 2.17768   | 2.387793  |
+| -2.920969 | 2.917485  |
+| -0.028814 | -4.168078 |
+| 3.625746  | 2.119041  |
+| -3.912363 | 1.325108  |
+| -0.551694 | -2.814223 |
+| 2.855808  | 3.483301  |
+| -3.594448 | 2.856651  |
+| 0.421993  | -2.372646 |
+| 1.650821  | 3.407572  |
+| -2.082902 | 3.384412  |
+| -0.718809 | -2.492514 |
+| 4.513623  | 3.841029  |
+| -4.822011 | 4.607049  |
+| -0.656297 | -1.449872 |
+| 1.919901  | 4.439368  |
+| -3.287749 | 3.918836  |
+| -1.576936 | -2.977622 |
+| 3.598143  | 1.97597   |
+| -3.977329 | 4.900932  |
+| -1.79108  | -2.184517 |
+| 3.914654  | 3.559303  |
+| -1.910108 | 4.166946  |
+| -1.226597 | -3.317889 |
+| 1.148946  | 3.345138  |
+| -2.113864 | 3.548172  |
+| 0.845762  | -3.589788 |
+| 2.629062  | 3.535831  |
+| -1.640717 | 2.990517  |
+| -1.881012 | -2.485405 |
+| 4.606999  | 3.510312  |
+| -4.366462 | 4.023316  |
+| 0.765015  | -3.00127  |
+| 3.121904  | 2.173988  |
+| -4.025139 | 4.65231   |
+| -0.559558 | -3.840539 |
+| 4.376754  | 4.863579  |
+| -1.874308 | 4.032237  |
+| -0.089337 | -3.026809 |
+| 3.997787  | 2.518662  |
+| -3.082978 | 2.884822  |
+| 0.845235  | -3.454465 |
+| 1.327224  | 3.358778  |
+| -2.889949 | 3.596178  |
+| -0.966018 | -2.839827 |
+| 2.960769  | 3.079555  |
+| -3.275518 | 1.577068  |
+| 0.639276  | -3.41284  |
+
+
+```sqlseal
+TABLE clustering = table(0)
+ADVANCED MODE
+CHART
+
+const datasetArray = data.map(d => ([d.x, d.y]))
+
+var CLUSTER_COUNT = 6;
+var DIENSIION_CLUSTER_INDEX = 2;
+var COLOR_ALL = [
+  '#37A2DA',
+  '#e06343',
+  '#37a354',
+  '#b55dba',
+  '#b5bd48',
+  '#8378EA',
+  '#96BFFF'
+];
+var pieces = [];
+for (var i = 0; i < CLUSTER_COUNT; i++) {
+  pieces.push({
+    value: i,
+    label: 'cluster ' + i,
+    color: COLOR_ALL[i]
+  });
+}
+return {
+  dataset: [
+  {
+      source: datasetArray,
+      id: 'data'
+    },
+    {
+      transform: {
+        type: 'ecStat:clustering',
+        print: true,
+        config: {
+          clusterCount: CLUSTER_COUNT,
+          outputType: 'single',
+          outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
+        }
+      }
+    }
+  ],
+  tooltip: {
+    position: 'top'
+  },
+  visualMap: {
+    type: 'piecewise',
+    top: 'middle',
+    min: 0,
+    max: CLUSTER_COUNT,
+    left: 10,
+    splitNumber: CLUSTER_COUNT,
+    dimension: DIENSIION_CLUSTER_INDEX,
+    pieces: pieces
+  },
+  grid: {
+    left: 120
+  },
+  xAxis: {},
+  yAxis: {},
+  series: {
+    type: 'scatter',
+    encode: { tooltip: [0, 1] },
+    symbolSize: 15,
+    itemStyle: {
+      borderColor: '#555'
+    },
+    datasetIndex: 1
+  }
+};
+
+SELECT * FROM clustering
+```
+
+![clustering](clustering.png)
--- a/docs/charts/clustering.png
+++ b/docs/charts/clustering.png
--- a/docs/charts/introduction.md
+++ b/docs/charts/introduction.md
@ -0,0 +1,7 @@
+# SQLSeal Charts - Introduction
+You can extend SQLSeal with Charts functionality by installing additional SQLSeal Charts package. It's packed with features like:
+- basic and advanced charts including line charts, bar charts, pie charts, scatter plots and much more
+- seamless integration with your already existing queries - use your query results as input data for your charts
+
+# Installation
+To install SQLSeal Charts, download it from Community Plugins. You can click the following link to load it in your Obsidian: [SQLSeal Charts in Community Plugins](https://obsidian.md/plugins?id=sqlseal-charts)
--- a/docs/charts/regression.md
+++ b/docs/charts/regression.md
@ -0,0 +1,96 @@
+# Advanced: Regression
+You can compute regression using SQLSeal Charts.
+
+| x   | y       |
+| --- | ------- |
+| 1   | 4862.4  |
+| 2   | 5294.7  |
+| 3   | 5934.5  |
+| 4   | 7171    |
+| 5   | 8964.4  |
+| 6   | 10202.2 |
+| 7   | 11962.5 |
+| 8   | 14928.3 |
+| 9   | 16909.2 |
+| 10  | 18547.9 |
+| 11  | 21617.8 |
+| 12  | 26638.1 |
+| 13  | 34634.4 |
+| 14  | 46759.4 |
+| 15  | 58478.1 |
+| 16  | 67884.6 |
+| 17  | 74462.6 |
+| 18  | 79395.7 |
+
+```sqlseal
+TABLE regression = table(0)
+ADVANCED MODE
+CHART
+const dataArray = data.map(d => ([d.x, d.y]))
+
+return {
+  dataset: [
+    {
+	  id: 'data',
+      source: dataArray
+    },
+    {
+      transform: {
+        type: 'ecStat:regression',
+        config: {
+          method: 'exponential'
+          // 'end' by default
+          // formulaOn: 'start'
+        }
+      }
+    }
+  ],
+  title: {
+    text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
+    subtext: 'By ecStat.regression',
+    sublink: 'https://github.com/ecomfe/echarts-stat',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  xAxis: {
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  yAxis: {
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: 'scatter',
+      type: 'scatter',
+      datasetIndex: 0
+    },
+    {
+      name: 'line',
+      type: 'line',
+      smooth: true,
+      datasetIndex: 1,
+      symbolSize: 0.1,
+      symbol: 'circle',
+      label: { show: true, fontSize: 16 },
+      labelLayout: { dx: -20 },
+      encode: { label: 2, tooltip: 1 }
+    }
+  ]
+}
+SELECT * FROM regression
+```
+
+![regression](regression.png)
--- a/docs/charts/regression.png
+++ b/docs/charts/regression.png
--- a/docs/charts/types/bar-chart-multi.png
+++ b/docs/charts/types/bar-chart-multi.png
--- a/docs/charts/types/bar-chart.md
+++ b/docs/charts/types/bar-chart.md
@ -0,0 +1,65 @@
+# Bar Chart
+You can present your data as a Bar Chart
+
+## Basic use
+
+| Date       | Distance |
+| ---------- | -------- |
+| 2025-05-01 | 40.4     |
+| 2025-05-02 | 34.43    |
+| 2025-05-03 | 43.53    |
+| 2025-05-04 | 50.23    |
+
+```sqlseal
+TABLE t = table(0)
+CHART {
+	xAxis: {
+		type: 'category'
+	},
+	yAxis: {},
+	series: [
+		{ type: 'bar' }
+	]
+}
+SELECT * FROM t
+```
+
+![bar chart example](bar-chart.png)
+
+## Multiple series
+You can show multiple series on the same chart. To do that you need to specify multiple series and define which column name corresponds to the `y` axis (values). We can also include interactive legend:
+
+
+
+| Date       | Distance |
+| ---------- | -------- |
+| 2025-05-01 | 40.4     |
+| 2025-05-02 | 34.43    |
+| 2025-05-03 | 43.53    |
+| 2025-05-04 | 50.23    |
+
+```sqlseal
+TABLE t = table(0)
+CHART {
+	xAxis: {
+		type: 'category'
+	},
+	yAxis: {},
+	legend: { show: true },
+	series: [
+		{
+			type: 'bar', 
+			encode: { y: 'walked' },
+			name: 'Walked'
+		},
+		{
+			type: 'bar', 
+			encode: { y: 'biked' },
+			name: 'Biked'
+		}
+	]
+}
+SELECT * FROM t
+```
+
+![bar chart multi](bar-chart-multi.png)
--- a/docs/charts/types/bar-chart.png
+++ b/docs/charts/types/bar-chart.png
--- a/docs/charts/types/candlestick.md
+++ b/docs/charts/types/candlestick.md
@ -0,0 +1,26 @@
+# Candlestick
+
+# Basic
+
+| date       | open | close | low | high |
+| ---------- | ---- | ----- | --- | ---- |
+| 2025-01-01 | 2    | 19    | 20  | 5    |
+| 2025-01-02 | 19   | 55    | 10  | 90   |
+| 2025-01-03 | 55   | 4     | 1   | 59   |
+
+```sqlseal
+TABLE t = table(0)
+
+CHART {
+	xAxis: { type: 'category' },
+	yAxis: { },
+	series: [
+	{
+		type: 'candlestick',
+	}
+	]
+}
+SELECT * FROM t
+```
+
+![candlestick chart](candlestick.png)
--- a/docs/charts/types/candlestick.png
+++ b/docs/charts/types/candlestick.png
--- a/docs/charts/types/line-chart.md
+++ b/docs/charts/types/line-chart.md
@ -0,0 +1,24 @@
+# Line Chart
+You can present your data as a linechart:
+
+
+| Date | s1  | s2  |
+| ---- | --- | --- |
+| 2024 | 200 | 150 |
+| 2025 | 300 | 200 |
+| 2026 | 400 | 340 |
+| 2027 | 150 | 405 |
+| 2028 | 305 | 300 |
+
+```sqlseal
+TABLE data = table(0)
+CHART 
+{
+	xAxis: { type: 'category' },
+	yAxis: { },
+    legend: { show: true }, 
+	series: [{ type: 'line' }, { type: 'line' }]
+}
+SELECT * FROM data
+```
+![line chart](line-chart.png)
--- a/docs/charts/types/line-chart.png
+++ b/docs/charts/types/line-chart.png
--- a/docs/charts/types/mixed-chart.png
+++ b/docs/charts/types/mixed-chart.png
--- a/docs/charts/types/mixed-charts.md
+++ b/docs/charts/types/mixed-charts.md
@ -0,0 +1,76 @@
+# Mixed Charts
+You can mix and match charts together. If both chart types are drawn on the XY axis, you can display different dataseries next to each other.
+
+## Basic Example
+Below we display precipitation (as bar chart) and temperature (as a line chart) together. We also add interactive crosshair to inspect data in more details:
+
+
+| Month     | max_temp | min_temp | Sunshine | Rainfall |
+| --------- | -------- | -------- | -------- | -------- |
+| January   | 8.47     | 3.36     | 44.42    | 43.93    |
+| February  | 9.21     | 3.22     | 66.11    | 39.85    |
+| March     | 12.07    | 4.66     | 109.71   | 36.52    |
+| April     | 15.35    | 6.02     | 152.85   | 38.63    |
+| May       | 18.59    | 9.06     | 198.68   | 43.99    |
+| June      | 21.37    | 12.04    | 198.55   | 49.34    |
+| July      | 23.75    | 13.93    | 209.24   | 36.30    |
+| August    | 23.31    | 14.08    | 198.02   | 53.02    |
+| September | 20.29    | 11.57    | 140.58   | 52.38    |
+| October   | 15.83    | 8.99     | 99.66    | 58.34    |
+| November  | 11.55    | 6.09     | 58.50    | 59.85    |
+| December  | 8.85     | 3.77     | 50.09    | 50.71    |
+
+Source: [Met Office](https://www.metoffice.gov.uk/research/climate/maps-and-data/location-specific-long-term-averages/gcpuzgp72). London, Greenwich avg for 1991-2020. Temperatures in °C, rainfall in mm. sunshine in hours.
+
+```sqlseal
+TABLE t = table(0)
+
+CHART {
+	xAxis: { type: 'category' },
+	yAxis: [
+		{
+	      type: 'value',
+	      name: 'Temperature',
+	      min: 0,
+	      max: 25,
+	      position: 'left',
+	      axisLabel: {
+	        formatter: '{value} °C'
+	      }
+	    },
+	    {
+		    type: 'value',
+		      name: 'Rainfall',
+		      min: 0,
+		      max: 180,
+		      position: 'right',
+		      axisLabel: {
+		        formatter: '{value} mm'
+		      }
+	    }
+	],
+	series: [
+		{
+	      name: 'Temperature',
+	      type: 'line',
+	      smooth: true,
+	      yAxisIndex: 0,
+	    },
+	    {
+	      name: 'Rainfall',
+	      type: 'bar',
+	      yAxisIndex: 1,
+	      encode: { y: 'rainfall' },
+      }
+	    
+	],
+	tooltip: {
+	    trigger: 'axis',
+	    axisPointer: { type: 'cross' }
+  },
+  legend: {},
+}
+SELECT month, max_temp, rainfall FROM t
+```
+
+![mixed charts](mixed-chart.png)
--- a/docs/charts/types/pie-chart-doughnut.png
+++ b/docs/charts/types/pie-chart-doughnut.png
--- a/docs/charts/types/pie-chart-nightingale.png
+++ b/docs/charts/types/pie-chart-nightingale.png
--- a/docs/charts/types/pie-chart.md
+++ b/docs/charts/types/pie-chart.md
@ -0,0 +1,59 @@
+# Pie Chart
+You can use pie chart to show how certain data splits into different buckets
+
+## Basic
+
+| Category      | Amount |
+| ------------- | ------ |
+| Rent          | 500    |
+| Groceries     | 350    |
+| Entertainment | 1050   |
+| Repairs       | 1200   |
+| Utilities     | 300    |
+```sqlseal
+TABLE finances = table(0)
+
+CHART {
+	series: [{
+		type: 'pie'
+	}]
+}
+SELECT * FROM finances
+```
+
+![pie chart](pie-chart.png)
+
+## Ring Style (Doughnut)
+You can make doughnut style charts (remove the middle) by specifying inner and outer radii:
+
+```sqlseal
+TABLE finances = table(0)
+
+CHART {
+	series: [{
+		type: 'pie',
+        radius: ['40%', '70%']
+	}]
+}
+SELECT * FROM finances
+```
+
+![doughnut](pie-chart-doughnut.png)
+
+## Nightingale Chart (Rose Chart)
+You can present your data as a Nightingale chart. You can achieve them by adding `roseType: 'area'`:
+
+
+```sqlseal
+TABLE finances = table(0)
+
+CHART {
+	series: [{
+		type: 'pie',
+        roseType: 'area'
+	}]
+}
+SELECT * FROM finances
+```
+
+![nightingale charts](pie-chart-nightingale.png)
--- a/docs/charts/types/pie-chart.png
+++ b/docs/charts/types/pie-chart.png
--- a/docs/charts/types/radar.md
+++ b/docs/charts/types/radar.md
@ -0,0 +1,38 @@
+# Radar
+Radar chart allows to show related data as a polygon spanning on the radar. You can use multiple datapoints to compare different values.
+
+# Example
+Below is the example of tracking your daily routines accross multiple days:
+
+
+| Sleepquality | Productivity | Exercise | Nutrition | Mood | Socialconnection |
+| ------------ | ------------ | -------- | --------- | ---- | ---------------- |
+| 50           | 20           | 30       | 30        | 44   | 40               |
+| 30           | 55           | 20       | 49        | 40   | 100              |
+| 40           | 43           | 100      | 40        | 50   | 5                |
+
+
+```sqlseal
+TABLE data = table(0)
+CHART {
+  radar: {
+    indicator: [
+		{ name: 'Sleep quality', max: 100 },
+		{ name: 'Productivity', max: 100 },
+		{ name: 'Excercise', max: 100 },
+		{ name: 'Nutrition', max: 100 },
+		{ name: 'Mood', max: 100 },
+		{ name: 'Social Connections', max: 100 },
+    ],
+    shape: 'polygon',
+    splitNumber: 6,
+    },
+    series: [{
+		type: 'radar',
+		areaStyle: { opacity: 0.2 }
+    }]
+}
+SELECT * FROM data
+```
+
+[radar chart](radar.md)
--- a/docs/charts/types/radar.png
+++ b/docs/charts/types/radar.png
--- a/docs/charts/types/scatter-plot.md
+++ b/docs/charts/types/scatter-plot.md
@ -0,0 +1,57 @@
+# Scatter Plot
+You can use scatterplot
+
+## Basics
+Example below renders scatterplot comparing book wordcount and it's rating. It also adds interactive labels on hover so you know which book title point corresponds to.
+We also set minimum for y axis to 1 (as this is minimal rating book can get) and x axis to log2 scale.
+
+| Title                              | Wordcount | Rating |
+| ---------------------------------- | --------- | ------ |
+| War and Peace                      | 587000    | 4.1    |
+| Don Quixote                        | 345000    | 4.2    |
+| Les Misérables                     | 531000    | 4.4    |
+| The Count of Monte Cristo          | 375000    | 4.6    |
+| Anna Karenina                      | 349000    | 4.3    |
+| Crime and Punishment               | 211000    | 4.2    |
+| Pride and Prejudice                | 122000    | 4.5    |
+| Moby Dick                          | 206000    | 3.9    |
+| Great Expectations                 | 183000    | 4.0    |
+| Jane Eyre                          | 183000    | 4.4    |
+| The Brothers Karamazov             | 364000    | 4.3    |
+| Middlemarch                        | 316000    | 4.0    |
+| The Great Gatsby                   | 47000     | 4.2    |
+| Wuthering Heights                  | 107000    | 4.1    |
+| One Hundred Years of Solitude      | 144000    | 4.3    |
+| To Kill a Mockingbird              | 100000    | 4.6    |
+| The Odyssey                        | 123000    | 4.0    |
+| The Divine Comedy                  | 112000    | 4.1    |
+| The Picture of Dorian Gray         | 78000     | 4.2    |
+
+```sqlseal
+TABLE d = table(0)
+CHART {
+	xAxis: {
+		type: 'log',
+		logBase: '2'
+	},
+	yAxis: {
+		min: 1
+	},
+	tooltip: { },
+	series: [{
+		type: 'scatter',
+		symbolSize: 5,
+		encode: {
+			x: 'wordcount',
+			y: 'rating',
+			tooltip: 'title'
+		}
+	}]
+}
+SELECT * FROM d
+```
+
+![scatter plot](scatter-plot.png)
+
+> [!NOTE] Advanced Functionality
+> With scatter plot you can perform even more advanced functionality like drawing regression line or running clustering algorithms. Check out advanced section of the documentation for more details on that.
--- a/docs/charts/types/scatter-plot.png
+++ b/docs/charts/types/scatter-plot.png
--- a/package.json
+++ b/package.json
@ -30,15 +30,15 @@
    "@types/esprima": "^4.0.6",
    "@types/estraverse": "^5.1.7",
    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.18",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.29",
    "@types/papaparse": "^5.3.16",
    "@types/sql.js": "^1.4.9",
-    "@typescript-eslint/eslint-plugin": "8.32.1",
-    "@typescript-eslint/parser": "8.32.1",
+    "@typescript-eslint/eslint-plugin": "8.33.1",
+    "@typescript-eslint/parser": "8.33.1",
    "builtin-modules": "5.0.0",
    "electron-rebuild": "^3.2.9",
-    "esbuild": "0.25.4",
+    "esbuild": "0.25.5",
    "esbuild-plugin-replace": "^1.4.0",
    "esbuild-sass-plugin": "^3.3.1",
    "jest": "^29.7.0",
@ -47,20 +47,20 @@
    "ts-jest": "^29.3.4",
    "tslib": "2.8.1",
    "typescript": "5.8.3",
-    "vitepress": "^1.6.3",
-    "vue": "^3.5.14"
+    "vitepress": "2.0.0-alpha.5",
+    "vue": "^3.5.16"
  },
  "dependencies": {
    "@ag-grid-community/theming": "^32.3.5",
-    "@codemirror/language": "^6.11.0",
+    "@codemirror/language": "^6.11.1",
    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.8",
+    "@codemirror/view": "^6.37.1",
    "@hypersphere/omnibus": "^0.1.6",
    "@jlongster/sql.js": "^1.6.7",
    "@types/jsonpath": "^0.2.4",
    "@vanakat/plugin-api": "^0.2.1",
    "absurd-sql": "^0.0.54",
-    "ag-grid-community": "^33.3.0",
+    "ag-grid-community": "^33.3.2",
    "comlink": "^4.4.2",
    "esbuild-plugin-polyfill-node": "^0.3.0",
    "esprima": "^4.0.1",
@ -71,7 +71,7 @@
    "lodash": "^4.17.21",
    "markdown-table-ts": "^1.0.3",
    "ohm-js": "^17.1.0",
-    "papaparse": "^5.5.2",
+    "papaparse": "^5.5.3",
    "sql-parser-cst": "^0.33.1",
    "unidecode": "^1.1.0",
    "util": "^0.12.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml