svelteplot · gka · May 22, 2025 · May 22, 2025
diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
@@ -4,7 +4,7 @@
     their data and channels and computes the shared scales.
 
     The Plot component is split into two parts. This is the outer Plot which 
-    provides convenient defaults and automatically adds axes etc to the grapihcs.
+    provides convenient defaults and automatically adds axes etc to the graphics.
     The downside is that it adds a bunch of imports that you may not be using.
     To help with this you can use the core/Plot component directly for a more
     low-level Plot wrapper.

diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
@@ -321,7 +321,7 @@ function getScaleRange(
                     : name === 'r'
                         ? [0, 10]
                         : name === 'symbol'
-                            ? // Plot is smart enough to pick different default shapes depending on wether
+                            ? // Plot is smart enough to pick different default shapes depending on whether
                             // or not there are filled dot marks in the plot, so we have to pass this
                             // information all the way here
                             plotHasFilledDotMarks

diff --git a/src/lib/helpers/callWithProps.ts b/src/lib/helpers/callWithProps.ts
@@ -4,7 +4,7 @@ type Setter = (v: any) => void;
 
 /**
  * Helper function to call a D3 "function class" while also calling
- * porperty setter functions on the result.
+ * property setter functions on the result.
  */
 export default function (
     d3func: () => Record<string, Setter>,

diff --git a/src/lib/helpers/group.test.ts b/src/lib/helpers/group.test.ts
@@ -27,7 +27,7 @@ describe('groupFacetsAndZ', () => {
         expect(result).toEqual([2, 1, 1, 1]);
     });
 
-    it('implicitely groups by fill and stroke if z is not present', () => {
+    it('implicitly groups by fill and stroke if z is not present', () => {
         const items = [
             { color: 'red', value: 10 },
             { color: 'red', value: 15 },

diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
@@ -402,9 +402,9 @@ const scaledChannelNames: ScaledChannelName[] = [
 ];
 
 /**
- * Mark channels can explicitely or implicitely be exempt from being
+ * Mark channels can explicitly or implicitly be exempt from being
  * mapped to a scale, so everywhere where values are being mapped to
- * scales, we need to check if the the scale is supposed to be used
+ * scales, we need to check if the scale is supposed to be used
  * not. That's what this function is used for.
  */
 export function getUsedScales(
@@ -450,7 +450,7 @@ export function projectXY(
 ): [number, number] {
     if (scales.projection) {
         // TODO: pretty sure this is not how projection streams are supposed to be used
-        // efficiantly, in observable plot, all data points of a mark are projected using
+        // efficiently, in observable plot, all data points of a mark are projected using
         // the same stream
         let x_, y_;
         const stream = scales.projection.stream({

diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
@@ -7,12 +7,12 @@
     import { testFilter } from '$lib/helpers/index.js';
     import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
-    type GrixXMarkProps = BaseMarkProps & {
+    type GridXMarkProps = BaseMarkProps & {
         data?: RawValue[];
         automatic?: boolean;
     };
 
-    let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
+    let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -88,7 +88,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);

diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -70,7 +70,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);

diff --git a/src/lib/marks/helpers/MarkerPath.svelte b/src/lib/marks/helpers/MarkerPath.svelte
@@ -25,7 +25,7 @@
         datum: DataRecord;
         /**
          * the marker shape to use at the start of the path, defaults to
-         * cirlce
+         * circle
          */
         markerStart?: boolean | MarkerShape;
         /**

diff --git a/src/lib/transforms/bin.test.ts b/src/lib/transforms/bin.test.ts
@@ -73,7 +73,7 @@ describe('binX', () => {
         y: d
     }));
 
-    it('bins dailys into weekly data', () => {
+    it('bins daily into weekly data', () => {
         const { data, ...channels } = binX(
             {
                 data: dailyData,
@@ -119,7 +119,7 @@ describe('binX', () => {
         expect(binDuration).toBeLessThanOrEqual(7 * 24 * 60 * 60 * 1000);
     });
 
-    // it.only('bins dailys into weekly data', () => {
+    // it.only('bins daily into weekly data', () => {
     //     const { data, ...channels } = binX(
     //         {
     //             data: dailyData,

diff --git a/src/lib/transforms/bin.ts b/src/lib/transforms/bin.ts
@@ -159,7 +159,7 @@ export function binY<T>(
 }
 
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export function bin<T>(
     { data, ...channels }: TransformArg<T, DataRecord>,

diff --git a/src/routes/features/plot/+page.md b/src/routes/features/plot/+page.md
@@ -336,7 +336,7 @@ to add events and scoped styles.
 
 ## Core plot
 
-SveltePlot provides a lot of convenience features with the unfortunate side-effect of blowing up the bundle size a bit. In situations where this is a concern, you may use a more light-weight version of the Plot component. Note that you need to explicitely include all marks that you want, such as grids or axis marks.
+SveltePlot provides a lot of convenience features with the unfortunate side-effect of blowing up the bundle size a bit. In situations where this is a concern, you may use a more light-weight version of the Plot component. Note that you need to explicitly include all marks that you want, such as grids or axis marks.
 
 ```svelte live
 <script>

diff --git a/src/routes/features/scales/+page.md b/src/routes/features/scales/+page.md
@@ -194,7 +194,7 @@ SveltePlot will automatically detect a scale type, but you can also set it expli
 
 ### Bi-symmetrical log scales
 
-For input domains ranging multiple magnitudes above and below zero, the bi-symmertrical log scale may be useful. It can be controlled using the `constant` option.
+For input domains ranging multiple magnitudes above and below zero, the bi-symmetrical log scale may be useful. It can be controlled using the `constant` option.
 
 ```svelte live
 <script>
@@ -246,7 +246,7 @@ For input domains ranging multiple magnitudes above and below zero, the bi-symme
 
 ### Point scale
 
-Point scales map a discrete input domain to single coordinates in your plot. SveltePlot automatically choses a point scale if you're mapping categorical data to an extent-less mark, like the [dot](/marks/dot) mark. In the following example, the car manufactors are categorical data so the plot uses a point scale for the x scale.
+Point scales map a discrete input domain to single coordinates in your plot. SveltePlot automatically chooses a point scale if you're mapping categorical data to an extent-less mark, like the [dot](/marks/dot) mark. In the following example, the car manufacturers are categorical data so the plot uses a point scale for the x scale.
 
 ```svelte live
 <script>
@@ -1085,7 +1085,7 @@ If you also pass the `n` option to set a different number of output values, Svel
 
 ### Quantile (discrete)
 
-Similiar to the `quantile` scale. Not to be confused with the continuous [quantile](<#Quantile-(continuous)>) scale.
+Similar to the `quantile` scale. Not to be confused with the continuous [quantile](<#Quantile-(continuous)>) scale.
 
 ```svelte live
 <script>

diff --git a/src/routes/getting-started/+page.md b/src/routes/getting-started/+page.md
@@ -9,7 +9,7 @@ Welcome! SveltePlot is still in an alpha stage, and its API may change. The docu
 
 ## Try SveltePlot online
 
-You can use SveltePlot inside any platform that supports Svelte 5, such as [StackBlitz](https://stackblitz.com/edit/vitejs-vite-mh9ogv?file=src%2FApp.svelte&terminal=dev). You can click the "Fork" button next to all examples in the SveltePlot documenation to edit them in the **Svelte playground**.
+You can use SveltePlot inside any platform that supports Svelte 5, such as [StackBlitz](https://stackblitz.com/edit/vitejs-vite-mh9ogv?file=src%2FApp.svelte&terminal=dev). You can click the "Fork" button next to all examples in the SveltePlot documentation to edit them in the **Svelte playground**.
 
 ```svelte live
 <script>

diff --git a/src/routes/introduction/+page.md b/src/routes/introduction/+page.md
@@ -51,7 +51,7 @@ If we want to plot a line showing the closing price over time, all we have to wr
 [Fork](https://svelte.dev/playground/ec67a8a48dce45c29373781a6b68491a)
 
 :::info
-Noticed how SveltePlot added **axes automatically**? That's because it assumes that most plots will benefit from axes and it adds them implicitely. (You can disable this by passing `axes={false}` to the Plot component).
+Noticed how SveltePlot added **axes automatically**? That's because it assumes that most plots will benefit from axes and it adds them implicitly. (You can disable this by passing `axes={false}` to the Plot component).
 :::
 
 Let's say we also want to add a grid and a horizontal rule at zero. To activate the implicit grids we set the `grid` flag. Then we add the `RuleY` mark with `y` set to zero.
@@ -278,7 +278,7 @@ Also, somehow, these axes already know the extent of our data! This is possible
 </Plot>
 ```
 
-Similarily you can enable the implicit grids by setting `grid` to `true`:
+Similarly, you can enable the implicit grids by setting `grid` to `true`:
 
 ```svelte
 <Plot grid>

diff --git a/src/routes/marks/dot/+page.md b/src/routes/marks/dot/+page.md
@@ -73,7 +73,7 @@ When showing plots with a lot of dots, you can switch to canvas rendering to imp
 </Plot>
 ```
 
-dsdsd sd sd sdsd sd
+This example uses stroke color and mark shape/symbol to redundantly encode a categorical variable:
 
 ```svelte live
 <script>

diff --git a/src/routes/marks/frame/+page.md b/src/routes/marks/frame/+page.md
@@ -23,7 +23,7 @@ easiest way to add a frame is to set the <b>frame</b> option of the Plot element
 </Plot>
 ```
 
-If you need more customization options, you can add the frame manually by explicitely adding the <b
+If you need more customization options, you can add the frame manually by explicitly adding the <b
         >Frame</b
     > mark to your plot:
 

diff --git a/src/routes/marks/line/+page.md b/src/routes/marks/line/+page.md
@@ -626,7 +626,7 @@ Lines can show a text label along the path:
 
 ### Stacking
 
-Line charts do not support implicit stacking, but you can use the [stack](/transforms/stack) transform explicitely. Here we're adding the baselines and toplines for each area in a stacked area chart:
+Line charts do not support implicit stacking, but you can use the [stack](/transforms/stack) transform explicitly. Here we're adding the baselines and toplines for each area in a stacked area chart:
 
 ```svelte live
 <script lang="ts">

diff --git a/src/routes/marks/text/+page.md b/src/routes/marks/text/+page.md
@@ -129,7 +129,7 @@ The following channels are required:
 - **lineAnchor** - `top`, `bottom` or `middle`
 - **frameAnchor** - if no x or y is given, the text can be positioned relative to the plot frame - `bottom`, `top`, `left`, `right`, `top-left`, `bottom-left`, `top-right`, `bottom-right`
 - **class** - CSS class name to applied to the `<g>` around all texts
-- **textClass** - CSS class to be applied to each `<text>` element, can be a funciton of data
+- **textClass** - CSS class to be applied to each `<text>` element, can be a function of data
 
 ### Frame anchor
 

diff --git a/src/routes/marks/vector/+page.md b/src/routes/marks/vector/+page.md
@@ -32,7 +32,7 @@ The vector mark lets you place shapes (like arrows) on your plot. If you want to
 
 ## Vector options:
 
-- **x** - the horizontal postion (or longitude)
+- **x** - the horizontal position (or longitude)
 - **y** - the vertical position (or latitude)
 - **length**
 - **rotate**