From 558d3ad42aade427d2770e44d0c5cafe08bba91d Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 14 Jan 2025 08:08:01 +0100
Subject: [PATCH] feat(gdocs): narrative charts component (#4295)

---
 adminSiteClient/AdminSidebar.tsx              |  13 +-
 adminSiteClient/ChartEditor.ts                |  26 +-
 adminSiteClient/ChartViewEditor.ts            |  12 +-
 adminSiteClient/ChartViewEditorPage.tsx       |  19 +-
 adminSiteClient/ChartViewIndexPage.tsx        |   6 +-
 adminSiteClient/EditorReferencesTab.tsx       |  28 +-
 adminSiteClient/EditorTextTab.tsx             |  33 +-
 adminSiteClient/NarrativeChartNameModal.tsx   |  64 ++++
 adminSiteClient/SaveButtons.tsx               |  67 ++--
 adminSiteServer/apiRouter.ts                  |  12 +-
 adminSiteServer/apiRoutes/chartViews.ts       |  83 ++++-
 adminSiteServer/apiRoutes/charts.ts           |   2 +-
 baker/SiteBaker.tsx                           |  23 +-
 baker/siteRenderers.tsx                       |   1 +
 ...4454799588-PostsGdocsLinksAddChartViews.ts |  17 ++
 db/model/ChartView.ts                         |  34 +++
 db/model/Gdoc/GdocBase.ts                     |  26 +-
 db/model/Gdoc/enrichedToMarkdown.ts           |  11 +
 db/model/Gdoc/enrichedToRaw.ts                |  15 +
 db/model/Gdoc/exampleEnrichedBlocks.ts        |  10 +
 db/model/Gdoc/extractGdocComponentInfo.ts     |   5 +-
 db/model/Gdoc/gdocUtils.ts                    |   1 +
 db/model/Gdoc/rawToArchie.ts                  |  20 ++
 db/model/Gdoc/rawToEnriched.ts                |  64 ++++
 db/model/Link.ts                              |  50 ++-
 .../grapher/src/controls/ActionButtons.scss   |  31 +-
 .../grapher/src/controls/ActionButtons.tsx    |   2 +-
 .../grapher/src/core/Grapher.tsx              |  50 ++-
 .../grapher/src/core/GrapherAnalytics.ts      |  46 ++-
 .../grapher/src/core/GrapherConstants.ts      |   3 +
 packages/@ourworldindata/grapher/src/index.ts |   1 +
 .../types/src/gdocTypes/ArchieMlComponents.ts |  27 ++
 .../types/src/gdocTypes/Gdoc.ts               |  11 +
 packages/@ourworldindata/types/src/index.ts   |   3 +
 packages/@ourworldindata/utils/src/Util.ts    |   1 +
 site/gdocs/AttachmentsContext.tsx             |   3 +
 site/gdocs/OwidGdoc.tsx                       |   1 +
 site/gdocs/components/ArticleBlock.tsx        |  10 +
 site/gdocs/components/NarrativeChart.tsx      |  98 ++++++
 site/gdocs/utils.ts                           |   5 +
 site/multiembedder/MultiEmbedder.tsx          | 288 +++++++++++-------
 41 files changed, 997 insertions(+), 225 deletions(-)
 create mode 100644 adminSiteClient/NarrativeChartNameModal.tsx
 create mode 100644 db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts
 create mode 100644 db/model/ChartView.ts
 create mode 100644 site/gdocs/components/NarrativeChart.tsx

diff --git a/adminSiteClient/AdminSidebar.tsx b/adminSiteClient/AdminSidebar.tsx
index 3b7ad4c2d0c..7b21ab70e40 100644
--- a/adminSiteClient/AdminSidebar.tsx
+++ b/adminSiteClient/AdminSidebar.tsx
@@ -23,7 +23,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons"
 
 import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
-import { chartViewsFeatureEnabled } from "./ChartViewEditor.js"
 
 export const AdminSidebar = (): React.ReactElement => (
     <aside className="AdminSidebar">
@@ -34,13 +33,11 @@ export const AdminSidebar = (): React.ReactElement => (
                     <FontAwesomeIcon icon={faChartBar} /> Charts
                 </Link>
             </li>
-            {chartViewsFeatureEnabled && (
-                <li>
-                    <Link to="/chartViews">
-                        <FontAwesomeIcon icon={faPanorama} /> Narrative views
-                    </Link>
-                </li>
-            )}
+            <li>
+                <Link to="/chartViews">
+                    <FontAwesomeIcon icon={faPanorama} /> Narrative charts
+                </Link>
+            </li>
             <li>
                 <Link to="/posts">
                     <FontAwesomeIcon icon={faFile} /> Posts
diff --git a/adminSiteClient/ChartEditor.ts b/adminSiteClient/ChartEditor.ts
index 1a4747fbb39..839efe0794a 100644
--- a/adminSiteClient/ChartEditor.ts
+++ b/adminSiteClient/ChartEditor.ts
@@ -13,7 +13,6 @@ import {
     getParentVariableIdFromChartConfig,
     mergeGrapherConfigs,
     isEmpty,
-    slugify,
     omit,
     CHART_VIEW_PROPS_TO_OMIT,
 } from "@ourworldindata/utils"
@@ -200,23 +199,13 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             )
     }
 
-    async saveAsNarrativeView(): Promise<void> {
+    async saveAsChartView(
+        name: string
+    ): Promise<{ success: boolean; errorMsg?: string }> {
         const { patchConfig, grapher } = this
 
         const chartJson = omit(patchConfig, CHART_VIEW_PROPS_TO_OMIT)
 
-        const suggestedName = grapher.title ? slugify(grapher.title) : undefined
-
-        const name = prompt(
-            "Please enter a programmatic name for the narrative view. Note that this name cannot be changed later.",
-            suggestedName
-        )
-
-        if (name === null) return
-
-        // Need to open intermediary tab before AJAX to avoid popup blockers
-        const w = window.open("/", "_blank") as Window
-
         const body = {
             name,
             parentChartId: grapher.id,
@@ -228,11 +217,14 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             body,
             "POST"
         )
-
-        if (json.success)
-            w.location.assign(
+        if (json.success) {
+            window.open(
                 this.manager.admin.url(`chartViews/${json.chartViewId}/edit`)
             )
+            return { success: true }
+        } else {
+            return { success: false, errorMsg: json.errorMsg }
+        }
     }
 
     publishGrapher(): void {
diff --git a/adminSiteClient/ChartViewEditor.ts b/adminSiteClient/ChartViewEditor.ts
index 982f967b83a..03d93fb7bfd 100644
--- a/adminSiteClient/ChartViewEditor.ts
+++ b/adminSiteClient/ChartViewEditor.ts
@@ -5,7 +5,6 @@ import {
     References,
     type EditorTab,
 } from "./AbstractChartEditor.js"
-import { ENV } from "../settings/clientSettings.js"
 import {
     CHART_VIEW_PROPS_TO_OMIT,
     CHART_VIEW_PROPS_TO_PERSIST,
@@ -13,11 +12,6 @@ import {
 } from "@ourworldindata/types"
 import { diffGrapherConfigs, omit, pick } from "@ourworldindata/utils"
 
-// Don't yet show chart views in the admin interface
-// This is low-stakes - if it shows up anyhow (e.g. on staging servers), it's not a big deal.
-// TODO: Remove this flag once we're launching this feature
-export const chartViewsFeatureEnabled = ENV === "development"
-
 export interface Chart {
     id: number
     title?: string
@@ -28,6 +22,7 @@ export interface Chart {
 export interface ChartViewEditorManager extends AbstractChartEditorManager {
     chartViewId: number
     parentChartId: number
+    references: References | undefined
 }
 
 export class ChartViewEditor extends AbstractChartEditor<ChartViewEditorManager> {
@@ -47,9 +42,8 @@ export class ChartViewEditor extends AbstractChartEditor<ChartViewEditorManager>
         return tabs
     }
 
-    @computed get references(): References | undefined {
-        // Not yet implemented for chart views
-        return undefined
+    @computed get references() {
+        return this.manager.references
     }
 
     @computed override get patchConfig(): GrapherInterface {
diff --git a/adminSiteClient/ChartViewEditorPage.tsx b/adminSiteClient/ChartViewEditorPage.tsx
index 46ed7ea330c..6e07f5a7bcb 100644
--- a/adminSiteClient/ChartViewEditorPage.tsx
+++ b/adminSiteClient/ChartViewEditorPage.tsx
@@ -1,11 +1,12 @@
 import React from "react"
 import { observer } from "mobx-react"
-import { computed, action } from "mobx"
+import { computed, action, runInAction, observable } from "mobx"
 import { GrapherInterface } from "@ourworldindata/types"
 import { Admin } from "./Admin.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { ChartEditorView, ChartEditorViewManager } from "./ChartEditorView.js"
 import { ChartViewEditor, ChartViewEditorManager } from "./ChartViewEditor.js"
+import { References } from "./AbstractChartEditor.js"
 
 @observer
 export class ChartViewEditorPage
@@ -26,9 +27,11 @@ export class ChartViewEditorPage
 
     isInheritanceEnabled: boolean | undefined = true
 
+    @observable references: References | undefined = undefined
+
     async fetchChartViewData(): Promise<void> {
         const data = await this.context.admin.getJSON(
-            `/api/chartViews/${this.chartViewId}`
+            `/api/chartViews/${this.chartViewId}.config.json`
         )
 
         this.idAndName = { id: data.id, name: data.name }
@@ -50,8 +53,20 @@ export class ChartViewEditorPage
         return new ChartViewEditor({ manager: this })
     }
 
+    async fetchRefs(): Promise<void> {
+        const { admin } = this.context
+        const json =
+            this.chartViewId === undefined
+                ? {}
+                : await admin.getJSON(
+                      `/api/chartViews/${this.chartViewId}.references.json`
+                  )
+        runInAction(() => (this.references = json.references))
+    }
+
     @action.bound refresh(): void {
         void this.fetchChartViewData()
+        void this.fetchRefs()
     }
 
     componentDidMount(): void {
diff --git a/adminSiteClient/ChartViewIndexPage.tsx b/adminSiteClient/ChartViewIndexPage.tsx
index 4211ba1d15b..c0b5d64d3b1 100644
--- a/adminSiteClient/ChartViewIndexPage.tsx
+++ b/adminSiteClient/ChartViewIndexPage.tsx
@@ -7,7 +7,7 @@ import { AdminAppContext } from "./AdminAppContext.js"
 import { Timeago } from "./Forms.js"
 import { ColumnsType } from "antd/es/table/InternalTable.js"
 import { ApiChartViewOverview } from "../adminShared/AdminTypes.js"
-import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
+import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
 import { Link } from "./Link.js"
 import {
     buildSearchWordsFromSearchString,
@@ -28,7 +28,7 @@ function createColumns(
             width: 200,
             render: (chartConfigId) => (
                 <img
-                    src={`${BAKED_GRAPHER_URL}/by-uuid/${chartConfigId}.svg`}
+                    src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${chartConfigId}.svg`}
                     style={{ maxWidth: 200, maxHeight: 200 }}
                 />
             ),
@@ -135,7 +135,7 @@ export function ChartViewIndexPage() {
     }, [admin])
 
     return (
-        <AdminLayout title="Narrative views">
+        <AdminLayout title="Narrative charts">
             <main className="ChartViewIndexPage">
                 <Flex justify="space-between">
                     <Input
diff --git a/adminSiteClient/EditorReferencesTab.tsx b/adminSiteClient/EditorReferencesTab.tsx
index 5e91f173003..8c35a8db006 100644
--- a/adminSiteClient/EditorReferencesTab.tsx
+++ b/adminSiteClient/EditorReferencesTab.tsx
@@ -22,6 +22,10 @@ import {
     isIndicatorChartEditorInstance,
 } from "./IndicatorChartEditor.js"
 import { Section } from "./Forms.js"
+import {
+    ChartViewEditor,
+    isChartViewEditorInstance,
+} from "./ChartViewEditor.js"
 
 const BASE_URL = BAKED_GRAPHER_URL.replace(/^https?:\/\//, "")
 
@@ -37,6 +41,8 @@ export class EditorReferencesTab<
             return <EditorReferencesTabForChart editor={editor} />
         else if (isIndicatorChartEditorInstance(editor))
             return <EditorReferencesTabForIndicator editor={editor} />
+        else if (isChartViewEditorInstance(editor))
+            return <EditorReferencesTabForChartView editor={editor} />
         else return null
     }
 }
@@ -81,7 +87,7 @@ export const ReferencesSection = (props: {
                         </a>{" "}
                         (
                         <a
-                            href={`/admin/gdocs/${post.id}`}
+                            href={`/admin/gdocs/${post.id}/preview`}
                             target="_blank"
                             rel="noopener"
                         >
@@ -127,7 +133,7 @@ export const ReferencesSection = (props: {
 
     const chartViews = !!props.references?.chartViews?.length && (
         <>
-            <p>Narrative views based on this chart</p>
+            <p>Narrative charts based on this chart</p>
             <ul className="list-group">
                 {props.references.chartViews.map((chartView) => (
                     <li key={chartView.id} className="list-group-item">
@@ -268,6 +274,24 @@ export class EditorReferencesTabForChart extends Component<{
     }
 }
 
+export class EditorReferencesTabForChartView extends Component<{
+    editor: ChartViewEditor
+}> {
+    @computed get references() {
+        return this.props.editor.references
+    }
+
+    render() {
+        return (
+            <div>
+                <section>
+                    <ReferencesSection references={this.references} />
+                </section>
+            </div>
+        )
+    }
+}
+
 @observer
 class AddRedirectForm<Editor extends AbstractChartEditor> extends Component<{
     editor: Editor
diff --git a/adminSiteClient/EditorTextTab.tsx b/adminSiteClient/EditorTextTab.tsx
index b259827bdd7..a8106b6e962 100644
--- a/adminSiteClient/EditorTextTab.tsx
+++ b/adminSiteClient/EditorTextTab.tsx
@@ -19,6 +19,7 @@ import {
 } from "./Forms.js"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
 import { ErrorMessages } from "./ChartEditorTypes.js"
+import { isChartViewEditorInstance } from "./ChartViewEditor.js"
 
 @observer
 export class EditorTextTab<
@@ -74,6 +75,10 @@ export class EditorTextTab<
         return this.props.errorMessages
     }
 
+    @computed get showChartSlug() {
+        return !isChartViewEditorInstance(this.props.editor)
+    }
+
     @computed get showAnyAnnotationFieldInTitleToggle() {
         const { features } = this.props.editor
         return (
@@ -139,19 +144,21 @@ export class EditorTextTab<
                         />
                     )}
                     {this.showAnyAnnotationFieldInTitleToggle && <hr />}
-                    <AutoTextField
-                        label="/grapher"
-                        value={grapher.displaySlug}
-                        onValue={this.onSlug}
-                        isAuto={grapher.slug === undefined}
-                        onToggleAuto={() =>
-                            (grapher.slug =
-                                grapher.slug === undefined
-                                    ? grapher.displaySlug
-                                    : undefined)
-                        }
-                        helpText="Human-friendly URL for this chart"
-                    />
+                    {this.showChartSlug && (
+                        <AutoTextField
+                            label="/grapher"
+                            value={grapher.displaySlug}
+                            onValue={this.onSlug}
+                            isAuto={grapher.slug === undefined}
+                            onToggleAuto={() =>
+                                (grapher.slug =
+                                    grapher.slug === undefined
+                                        ? grapher.displaySlug
+                                        : undefined)
+                            }
+                            helpText="Human-friendly URL for this chart"
+                        />
+                    )}
                     <BindAutoStringExt
                         label="Subtitle"
                         readFn={(grapher) => grapher.currentSubtitle}
diff --git a/adminSiteClient/NarrativeChartNameModal.tsx b/adminSiteClient/NarrativeChartNameModal.tsx
new file mode 100644
index 00000000000..81d61c02bd8
--- /dev/null
+++ b/adminSiteClient/NarrativeChartNameModal.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Form, Input, InputRef, Modal, Spin } from "antd"
+
+export const NarrativeChartNameModal = (props: {
+    initialName: string
+    open: "open" | "open-loading" | "closed"
+    errorMsg?: string
+    onSubmit: (name: string) => void
+    onCancel?: () => void
+}) => {
+    const [name, setName] = useState<string>(props.initialName)
+    const inputField = useRef<InputRef>(null)
+    const isLoading = useMemo(() => props.open === "open-loading", [props.open])
+    const isOpen = useMemo(() => props.open !== "closed", [props.open])
+
+    useEffect(() => setName(props.initialName), [props.initialName])
+
+    useEffect(() => {
+        if (isOpen) {
+            inputField.current?.focus({ cursor: "all" })
+        }
+    }, [isOpen])
+
+    return (
+        <Modal
+            title="Save as narrative chart"
+            open={isOpen}
+            onOk={() => props.onSubmit(name)}
+            onCancel={props.onCancel}
+            onClose={props.onCancel}
+            okButtonProps={{ disabled: !name || isLoading }}
+            cancelButtonProps={{ disabled: isLoading }}
+        >
+            <div>
+                <p>
+                    This will create a new narrative chart that is linked to
+                    this chart. Any currently pending changes will be applied to
+                    the narrative chart.
+                </p>
+                <p>
+                    Please enter a programmatic name for the narrative chart.{" "}
+                    <i>Note that this name cannot be changed later.</i>
+                </p>
+                <Form.Item label="Name">
+                    <Input
+                        ref={inputField}
+                        onChange={(e) => setName(e.target.value)}
+                        value={name}
+                        disabled={isLoading}
+                    />
+                </Form.Item>
+                {isLoading && <Spin />}
+                {props.errorMsg && (
+                    <div
+                        className="alert alert-danger"
+                        style={{ whiteSpace: "pre-wrap" }}
+                    >
+                        {props.errorMsg}
+                    </div>
+                )}
+            </div>
+        </Modal>
+    )
+}
diff --git a/adminSiteClient/SaveButtons.tsx b/adminSiteClient/SaveButtons.tsx
index ce63127a917..2aad9ca4a2e 100644
--- a/adminSiteClient/SaveButtons.tsx
+++ b/adminSiteClient/SaveButtons.tsx
@@ -1,8 +1,8 @@
 import { Component } from "react"
 import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
-import { action, computed } from "mobx"
+import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
-import { excludeUndefined, omit } from "@ourworldindata/utils"
+import { excludeUndefined, omit, slugify } from "@ourworldindata/utils"
 import {
     IndicatorChartEditor,
     isIndicatorChartEditorInstance,
@@ -14,9 +14,9 @@ import {
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
 import {
     ChartViewEditor,
-    chartViewsFeatureEnabled,
     isChartViewEditorInstance,
 } from "./ChartViewEditor.js"
+import { NarrativeChartNameModal } from "./NarrativeChartNameModal.js"
 
 @observer
 export class SaveButtons<Editor extends AbstractChartEditor> extends Component<{
@@ -61,10 +61,6 @@ class SaveButtonsForChart extends Component<{
         void this.props.editor.saveAsNewGrapher()
     }
 
-    @action.bound onSaveAsNarrativeView() {
-        void this.props.editor.saveAsNarrativeView()
-    }
-
     @action.bound onPublishToggle() {
         if (this.props.editor.grapher.isPublished)
             this.props.editor.unpublishGrapher()
@@ -79,6 +75,29 @@ class SaveButtonsForChart extends Component<{
         ])
     }
 
+    @computed get initialNarrativeChartName(): string {
+        return slugify(this.props.editor.grapher.title ?? "")
+    }
+
+    @observable narrativeChartNameModalOpen:
+        | "open"
+        | "open-loading"
+        | "closed" = "closed"
+    @observable narrativeChartNameModalError: string | undefined = undefined
+
+    @action.bound async onSubmitNarrativeChartButton(name: string) {
+        const { editor } = this.props
+
+        this.narrativeChartNameModalOpen = "open-loading"
+        const res = await editor.saveAsChartView(name)
+        if (res.success) {
+            this.narrativeChartNameModalOpen = "closed"
+        } else {
+            this.narrativeChartNameModalOpen = "open"
+            this.narrativeChartNameModalError = res.errorMsg
+        }
+    }
+
     render() {
         const { editingErrors } = this
         const { editor } = this.props
@@ -116,17 +135,27 @@ class SaveButtonsForChart extends Component<{
                         {grapher.isPublished ? "Unpublish" : "Publish"}
                     </button>
                 </div>
-                {chartViewsFeatureEnabled && (
-                    <div className="mt-2">
-                        <button
-                            className="btn btn-primary"
-                            onClick={this.onSaveAsNarrativeView}
-                            disabled={isSavingDisabled}
-                        >
-                            Save as narrative view
-                        </button>
-                    </div>
-                )}
+                <div className="mt-2">
+                    <button
+                        className="btn btn-primary"
+                        onClick={() => {
+                            this.narrativeChartNameModalOpen = "open"
+                            this.narrativeChartNameModalError = undefined
+                        }}
+                        disabled={isSavingDisabled}
+                    >
+                        Save as narrative chart
+                    </button>
+                </div>
+                <NarrativeChartNameModal
+                    open={this.narrativeChartNameModalOpen}
+                    initialName={this.initialNarrativeChartName}
+                    errorMsg={this.narrativeChartNameModalError}
+                    onSubmit={this.onSubmitNarrativeChartButton}
+                    onCancel={() =>
+                        (this.narrativeChartNameModalOpen = "closed")
+                    }
+                />
                 {editingErrors.map((error, i) => (
                     <div key={i} className="alert alert-danger mt-2">
                         {error}
@@ -219,7 +248,7 @@ class SaveButtonsForChartView extends Component<{
                     onClick={this.onSaveChart}
                     disabled={isSavingDisabled}
                 >
-                    Save chart view
+                    Save narrative chart
                 </button>{" "}
                 <a
                     className="btn btn-secondary"
diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
index 90afc087987..7a57a01899c 100644
--- a/adminSiteServer/apiRouter.ts
+++ b/adminSiteServer/apiRouter.ts
@@ -14,6 +14,7 @@ import {
     createChartView,
     updateChartView,
     deleteChartView,
+    getChartViewReferences,
 } from "./apiRoutes/chartViews.js"
 import {
     getDatasets,
@@ -193,10 +194,19 @@ deleteRouteWithRWTransaction(apiRouter, "/charts/:chartId", deleteChart)
 
 // Chart view routes
 getRouteWithROTransaction(apiRouter, "/chartViews", getChartViews)
-getRouteWithROTransaction(apiRouter, "/chartViews/:id", getChartViewById)
+getRouteWithROTransaction(
+    apiRouter,
+    "/chartViews/:id.config.json",
+    getChartViewById
+)
 postRouteWithRWTransaction(apiRouter, "/chartViews", createChartView)
 putRouteWithRWTransaction(apiRouter, "/chartViews/:id", updateChartView)
 deleteRouteWithRWTransaction(apiRouter, "/chartViews/:id", deleteChartView)
+getRouteWithROTransaction(
+    apiRouter,
+    "/chartViews/:id.references.json",
+    getChartViewReferences
+)
 
 // Dataset routes
 getRouteWithROTransaction(apiRouter, "/datasets.json", getDatasets)
diff --git a/adminSiteServer/apiRoutes/chartViews.ts b/adminSiteServer/apiRoutes/chartViews.ts
index 1bb86557bd4..8dd6224384f 100644
--- a/adminSiteServer/apiRoutes/chartViews.ts
+++ b/adminSiteServer/apiRoutes/chartViews.ts
@@ -14,8 +14,13 @@ import {
     ChartViewsTableName,
     Base64String,
     ChartConfigsTableName,
+    OwidGdocLinkType,
 } from "@ourworldindata/types"
-import { diffGrapherConfigs, mergeGrapherConfigs } from "@ourworldindata/utils"
+import {
+    diffGrapherConfigs,
+    mergeGrapherConfigs,
+    uniqBy,
+} from "@ourworldindata/utils"
 import { omit, pick } from "lodash"
 import { ApiChartViewOverview } from "../../adminShared/AdminTypes.js"
 import { expectInt } from "../../serverUtils/serverUtil.js"
@@ -29,6 +34,7 @@ import * as db from "../../db/db.js"
 import { expectChartById } from "./charts.js"
 import { Request } from "../authentication.js"
 import e from "express"
+import { getPublishedLinksTo } from "../../db/model/Link.js"
 const createPatchConfigAndQueryParamsForChartView = async (
     knex: db.KnexReadonlyTransaction,
     parentChartId: number,
@@ -54,7 +60,7 @@ const createPatchConfigAndQueryParamsForChartView = async (
         ...pick(fullConfigIncludingDefaults, CHART_VIEW_PROPS_TO_PERSIST),
     }
 
-    const queryParams = grapherConfigToQueryParams(config)
+    const queryParams = grapherConfigToQueryParams(patchConfigToSave)
 
     const fullConfig = mergeGrapherConfigs(parentChartConfig, patchConfigToSave)
     return { patchConfig: patchConfigToSave, fullConfig, queryParams }
@@ -180,6 +186,18 @@ export async function createChartView(
         throw new JsonError("Invalid request", 400)
     }
 
+    const chartViewWithName = await trx
+        .table(ChartViewsTableName)
+        .where({ name })
+        .first()
+
+    if (chartViewWithName) {
+        return {
+            success: false,
+            errorMsg: `Narrative chart with name "${name}" already exists`,
+        }
+    }
+
     const { patchConfig, fullConfig, queryParams } =
         await createPatchConfigAndQueryParamsForChartView(
             trx,
@@ -263,16 +281,35 @@ export async function deleteChartView(
 ) {
     const id = expectInt(req.params.id)
 
-    const chartConfigId: string | undefined = await trx(ChartViewsTableName)
-        .select("chartConfigId")
-        .where({ id })
-        .first()
-        .then((row) => row?.chartConfigId)
-
-    if (!chartConfigId) {
+    const {
+        name,
+        chartConfigId,
+    }: { name: string | undefined; chartConfigId: string | undefined } =
+        await trx(ChartViewsTableName)
+            .select("name", "chartConfigId")
+            .where({ id })
+            .first()
+            .then((row) => row ?? {})
+
+    if (!chartConfigId || !name) {
         throw new JsonError(`No chart view found for id ${id}`, 404)
     }
 
+    const references = await getPublishedLinksTo(
+        trx,
+        [name],
+        OwidGdocLinkType.ChartView
+    )
+
+    if (references.length) {
+        throw new JsonError(
+            `Cannot delete chart view "${name}" because it is referenced by the following posts: ${references
+                .map((r) => r.slug)
+                .join(", ")}`,
+            400
+        )
+    }
+
     await trx.table(ChartViewsTableName).where({ id }).delete()
 
     await deleteGrapherConfigFromR2ByUUID(chartConfigId)
@@ -281,3 +318,31 @@ export async function deleteChartView(
 
     return { success: true }
 }
+
+export async function getChartViewReferences(
+    req: Request,
+    _res: e.Response<any, Record<string, any>>,
+    trx: db.KnexReadonlyTransaction
+) {
+    const id = expectInt(req.params.id)
+    const name: string | undefined = await trx(ChartViewsTableName)
+        .select("name")
+        .where({ id })
+        .first()
+        .then((row) => row?.name)
+
+    if (!name) {
+        throw new JsonError(`No chart view found for id ${id}`, 404)
+    }
+
+    const references = {
+        references: {
+            postsGdocs: await getPublishedLinksTo(
+                trx,
+                [name],
+                OwidGdocLinkType.ChartView
+            ).then((refs) => uniqBy(refs, "slug")),
+        },
+    }
+    return references
+}
diff --git a/adminSiteServer/apiRoutes/charts.ts b/adminSiteServer/apiRoutes/charts.ts
index 2b19a204a8a..cc5a1f17c6b 100644
--- a/adminSiteServer/apiRoutes/charts.ts
+++ b/adminSiteServer/apiRoutes/charts.ts
@@ -764,7 +764,7 @@ export async function deleteChart(
     if (chart.slug) {
         const links = await getPublishedLinksTo(trx, [chart.slug])
         if (links.length) {
-            const sources = links.map((link) => link.sourceSlug).join(", ")
+            const sources = links.map((link) => link.slug).join(", ")
             throw new Error(
                 `Cannot delete chart in-use in the following published documents: ${sources}`
             )
diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index c422adcaa4e..52f9b4cb51a 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -56,6 +56,7 @@ import {
     grabMetadataForGdocLinkedIndicator,
     TombstonePageData,
     gdocUrlRegex,
+    ChartViewInfo,
 } from "@ourworldindata/utils"
 import { execWrapper } from "../db/execWrapper.js"
 import { countryProfileSpecs } from "../site/countryProfileProjects.js"
@@ -109,6 +110,7 @@ import { getTombstones } from "../db/model/GdocTombstone.js"
 import { bakeAllMultiDimDataPages } from "./MultiDimBaker.js"
 import { getAllLinkedPublishedMultiDimDataPages } from "../db/model/MultiDimDataPage.js"
 import { getPublicDonorNames } from "../db/model/Donor.js"
+import { getChartViewsInfo } from "../db/model/ChartView.js"
 
 type PrefetchedAttachments = {
     donors: string[]
@@ -120,6 +122,7 @@ type PrefetchedAttachments = {
         explorers: Record<string, LinkedChart>
     }
     linkedIndicators: Record<number, LinkedIndicator>
+    linkedChartViews: Record<string, ChartViewInfo>
 }
 
 // These aren't all "wordpress" steps
@@ -176,7 +179,7 @@ function getProgressBarTotal(bakeSteps: BakeStepConfig): number {
         bakeSteps.has("dataInsights") ||
         bakeSteps.has("authors")
     ) {
-        total += 8
+        total += 9
     }
     return total
 }
@@ -345,7 +348,7 @@ export class SiteBaker {
     _prefetchedAttachmentsCache: PrefetchedAttachments | undefined = undefined
     private async getPrefetchedGdocAttachments(
         knex: db.KnexReadonlyTransaction,
-        picks?: [string[], string[], string[], string[], string[]]
+        picks?: [string[], string[], string[], string[], string[], string[]]
     ): Promise<PrefetchedAttachments> {
         if (!this._prefetchedAttachmentsCache) {
             console.log("Prefetching attachments...")
@@ -459,6 +462,12 @@ export class SiteBaker {
                 name: `✅ Prefetched ${publishedAuthors.length} authors`,
             })
 
+            const chartViewsInfo = await getChartViewsInfo(knex)
+            const chartViewsInfoByName = keyBy(chartViewsInfo, "name")
+            this.progressBar.tick({
+                name: `✅ Prefetched ${chartViewsInfo.length} chart views`,
+            })
+
             const prefetchedAttachments = {
                 donors,
                 linkedAuthors: publishedAuthors,
@@ -469,6 +478,7 @@ export class SiteBaker {
                     graphers: publishedChartsBySlug,
                 },
                 linkedIndicators: datapageIndicatorsById,
+                linkedChartViews: chartViewsInfoByName,
             }
             this.progressBar.tick({ name: "✅ Prefetched attachments" })
             this._prefetchedAttachmentsCache = prefetchedAttachments
@@ -480,6 +490,7 @@ export class SiteBaker {
                 imageFilenames,
                 linkedGrapherSlugs,
                 linkedExplorerSlugs,
+                linkedChartViewNames,
             ] = picks
             const linkedDocuments = pick(
                 this._prefetchedAttachmentsCache.linkedDocuments,
@@ -528,6 +539,10 @@ export class SiteBaker {
                     this._prefetchedAttachmentsCache.linkedAuthors.filter(
                         (author) => authorNames.includes(author.name)
                     ),
+                linkedChartViews: pick(
+                    this._prefetchedAttachmentsCache.linkedChartViews,
+                    linkedChartViewNames
+                ),
             }
         }
         return this._prefetchedAttachmentsCache
@@ -619,6 +634,7 @@ export class SiteBaker {
                 publishedGdoc.linkedImageFilenames,
                 publishedGdoc.linkedChartSlugs.grapher,
                 publishedGdoc.linkedChartSlugs.explorer,
+                publishedGdoc.linkedChartViewNames,
             ])
             publishedGdoc.donors = attachments.donors
             publishedGdoc.linkedAuthors = attachments.linkedAuthors
@@ -629,6 +645,7 @@ export class SiteBaker {
                 ...attachments.linkedCharts.explorers,
             }
             publishedGdoc.linkedIndicators = attachments.linkedIndicators
+            publishedGdoc.linkedChartViews = attachments.linkedChartViews
 
             // this is a no-op if the gdoc doesn't have an all-chart block
             if ("loadRelatedCharts" in publishedGdoc) {
@@ -876,6 +893,7 @@ export class SiteBaker {
                 dataInsight.linkedImageFilenames,
                 dataInsight.linkedChartSlugs.grapher,
                 dataInsight.linkedChartSlugs.explorer,
+                dataInsight.linkedChartViewNames,
             ])
             dataInsight.linkedDocuments = attachments.linkedDocuments
             dataInsight.imageMetadata = {
@@ -949,6 +967,7 @@ export class SiteBaker {
                 publishedAuthor.linkedImageFilenames,
                 publishedAuthor.linkedChartSlugs.grapher,
                 publishedAuthor.linkedChartSlugs.explorer,
+                publishedAuthor.linkedChartViewNames,
             ])
 
             // We don't need these to be attached to the gdoc in the current
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index e53a9e3e521..e64743f9324 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -441,6 +441,7 @@ ${dataInsights
                     latestDataInsights: get(post, "latestDataInsights", []),
                     homepageMetadata: get(post, "homepageMetadata", {}),
                     latestWorkLinks: get(post, "latestWorkLinks", []),
+                    linkedChartViews: get(post, "linkedChartViews", {}),
                 }}
             >
                 <AtomArticleBlocks blocks={post.content.body} />
diff --git a/db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts b/db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts
new file mode 100644
index 00000000000..06596eea89b
--- /dev/null
+++ b/db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts
@@ -0,0 +1,17 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class PostsGdocsLinksAddChartViews1734454799588
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            ALTER TABLE posts_gdocs_links
+            MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer', 'chart-view') NULL`)
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            ALTER TABLE posts_gdocs_links
+            MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer') NULL`)
+    }
+}
diff --git a/db/model/ChartView.ts b/db/model/ChartView.ts
new file mode 100644
index 00000000000..2bfd5ad8ed3
--- /dev/null
+++ b/db/model/ChartView.ts
@@ -0,0 +1,34 @@
+import { ChartViewInfo, JsonString } from "@ourworldindata/types"
+import * as db from "../db.js"
+
+export const getChartViewsInfo = async (
+    knex: db.KnexReadonlyTransaction,
+    names?: string[]
+): Promise<ChartViewInfo[]> => {
+    type RawRow = Omit<ChartViewInfo, "queryParamsForParentChart"> & {
+        queryParamsForParentChart: JsonString
+    }
+    let rows: RawRow[]
+
+    const query = `-- sql
+SELECT cv.name,
+       cc.full ->> "$.title" as title,
+       chartConfigId,
+       pcc.slug as parentChartSlug,
+       cv.queryParamsForParentChart
+FROM chart_views cv
+JOIN chart_configs cc on cc.id = cv.chartConfigId
+JOIN charts pc on cv.parentChartId = pc.id
+JOIN chart_configs pcc on pc.configId = pcc.id
+        `
+
+    if (names) {
+        if (names.length === 0) return []
+        rows = await db.knexRaw(knex, `${query} WHERE cv.name IN (?)`, [names])
+    } else rows = await db.knexRaw(knex, query)
+
+    return rows.map((row) => ({
+        ...row,
+        queryParamsForParentChart: JSON.parse(row.queryParamsForParentChart),
+    }))
+}
diff --git a/db/model/Gdoc/GdocBase.ts b/db/model/Gdoc/GdocBase.ts
index 754471c247a..173fd06e6fb 100644
--- a/db/model/Gdoc/GdocBase.ts
+++ b/db/model/Gdoc/GdocBase.ts
@@ -48,7 +48,7 @@ import {
     getVariableMetadata,
     getVariableOfDatapageIfApplicable,
 } from "../Variable.js"
-import { createLinkFromUrl } from "../Link.js"
+import { createLinkForChartView, createLinkFromUrl } from "../Link.js"
 import {
     getMultiDimDataPageBySlug,
     isMultiDimDataPagePublished,
@@ -56,6 +56,7 @@ import {
 import {
     ARCHVED_THUMBNAIL_FILENAME,
     ChartConfigType,
+    ChartViewInfo,
     DEFAULT_THUMBNAIL_FILENAME,
     GrapherInterface,
     LatestDataInsight,
@@ -66,6 +67,7 @@ import {
     OwidGdocLinkType,
     OwidGdocType,
 } from "@ourworldindata/types"
+import { getChartViewsInfo } from "../ChartView.js"
 
 export class GdocBase implements OwidGdocBaseInterface {
     id!: string
@@ -89,6 +91,7 @@ export class GdocBase implements OwidGdocBaseInterface {
     linkedIndicators: Record<number, LinkedIndicator> = {}
     linkedDocuments: Record<string, OwidGdocMinimalPostInterface> = {}
     latestDataInsights: LatestDataInsight[] = []
+    linkedChartViews?: Record<string, ChartViewInfo> = {}
     _omittableFields: string[] = []
 
     constructor(id?: string) {
@@ -292,6 +295,14 @@ export class GdocBase implements OwidGdocBaseInterface {
         return { grapher: [...grapher], explorer: [...explorer] }
     }
 
+    get linkedChartViewNames(): string[] {
+        const filteredLinks = this.links
+            .filter((link) => link.linkType === OwidGdocLinkType.ChartView)
+            .map((link) => link.target)
+
+        return filteredLinks
+    }
+
     get hasAllChartsBlock(): boolean {
         let hasAllChartsBlock = false
         for (const enrichedBlockSource of this.enrichedBlockSources) {
@@ -349,6 +360,13 @@ export class GdocBase implements OwidGdocBaseInterface {
                     componentType: block.type,
                 }),
             ])
+            .with({ type: "narrative-chart" }, (block) => [
+                createLinkForChartView({
+                    name: block.name,
+                    source: this,
+                    componentType: block.type,
+                }),
+            ])
             .with({ type: "all-charts" }, (block) =>
                 block.top.map((item) =>
                     createLinkFromUrl({
@@ -710,6 +728,11 @@ export class GdocBase implements OwidGdocBaseInterface {
         }
     }
 
+    async loadChartViewsInfo(knex: db.KnexReadonlyTransaction): Promise<void> {
+        const result = await getChartViewsInfo(knex, this.linkedChartViewNames)
+        this.linkedChartViews = keyBy(result, "name")
+    }
+
     async fetchAndEnrichGdoc(): Promise<void> {
         const docsClient = google.docs({
             version: "v1",
@@ -855,6 +878,7 @@ export class GdocBase implements OwidGdocBaseInterface {
         await this.loadImageMetadataFromDB(knex)
         await this.loadLinkedCharts(knex)
         await this.loadLinkedIndicators() // depends on linked charts
+        await this.loadChartViewsInfo(knex)
         await this._loadSubclassAttachments(knex)
         await this.validate(knex)
     }
diff --git a/db/model/Gdoc/enrichedToMarkdown.ts b/db/model/Gdoc/enrichedToMarkdown.ts
index 2556f74ef2b..794700f30a3 100644
--- a/db/model/Gdoc/enrichedToMarkdown.ts
+++ b/db/model/Gdoc/enrichedToMarkdown.ts
@@ -127,6 +127,17 @@ ${items}
                 exportComponents
             )
         )
+        .with({ type: "narrative-chart" }, (b): string | undefined =>
+            markdownComponent(
+                "NarrativeChart",
+                {
+                    name: b.name,
+                    caption: b.caption ? spansToMarkdown(b.caption) : undefined,
+                    // Note: truncated
+                },
+                exportComponents
+            )
+        )
         .with({ type: "code" }, (b): string | undefined => {
             return (
                 "```\n" +
diff --git a/db/model/Gdoc/enrichedToRaw.ts b/db/model/Gdoc/enrichedToRaw.ts
index bc27e3356ed..08e8e1fa288 100644
--- a/db/model/Gdoc/enrichedToRaw.ts
+++ b/db/model/Gdoc/enrichedToRaw.ts
@@ -48,6 +48,7 @@ import {
     RawBlockPeople,
     RawBlockPeopleRows,
     RawBlockPerson,
+    RawBlockNarrativeChart,
     RawBlockCode,
 } from "@ourworldindata/types"
 import { spanToHtmlString } from "./gdocUtils.js"
@@ -123,6 +124,20 @@ export function enrichedBlockToRawBlock(
                 },
             })
         )
+        .with(
+            { type: "narrative-chart" },
+            (b): RawBlockNarrativeChart => ({
+                type: b.type,
+                value: {
+                    name: b.name,
+                    height: b.height,
+                    row: b.row,
+                    column: b.column,
+                    position: b.position,
+                    caption: b.caption ? spansToHtmlText(b.caption) : undefined,
+                },
+            })
+        )
         .with(
             { type: "code" },
             (b): RawBlockCode => ({
diff --git a/db/model/Gdoc/exampleEnrichedBlocks.ts b/db/model/Gdoc/exampleEnrichedBlocks.ts
index 7e37a16bc27..74b2a0f8842 100644
--- a/db/model/Gdoc/exampleEnrichedBlocks.ts
+++ b/db/model/Gdoc/exampleEnrichedBlocks.ts
@@ -121,6 +121,16 @@ export const enrichedBlockExamples: Record<
         caption: boldLinkExampleText,
         parseErrors: [],
     },
+    "narrative-chart": {
+        type: "narrative-chart",
+        name: "world-has-become-less-democratic",
+        height: "400",
+        row: "1",
+        column: "1",
+        position: "featured",
+        caption: boldLinkExampleText,
+        parseErrors: [],
+    },
     code: {
         type: "code",
         text: [
diff --git a/db/model/Gdoc/extractGdocComponentInfo.ts b/db/model/Gdoc/extractGdocComponentInfo.ts
index 66b4c3c608a..308f06953c6 100644
--- a/db/model/Gdoc/extractGdocComponentInfo.ts
+++ b/db/model/Gdoc/extractGdocComponentInfo.ts
@@ -327,6 +327,7 @@ export function enumerateGdocComponentsWithoutChildren(
                     type: P.union(
                         "chart-story",
                         "chart",
+                        "narrative-chart",
                         "horizontal-rule",
                         "html",
                         "image",
@@ -353,8 +354,8 @@ export function enumerateGdocComponentsWithoutChildren(
                         "additional-charts",
                         "simple-text",
                         "donors",
-                        "socials"
-                        // "narrative-chart" should go here once it's done
+                        "socials",
+                        "narrative-chart"
                     ),
                 },
                 (c) => handleComponent(c, [], parentPath, path)
diff --git a/db/model/Gdoc/gdocUtils.ts b/db/model/Gdoc/gdocUtils.ts
index f08dfd85786..d53f3f41a5d 100644
--- a/db/model/Gdoc/gdocUtils.ts
+++ b/db/model/Gdoc/gdocUtils.ts
@@ -237,6 +237,7 @@ export function extractFilenamesFromBlock(
                     "latest-data-insights",
                     "list",
                     "missing-data",
+                    "narrative-chart",
                     "numbered-list",
                     "people",
                     "people-rows",
diff --git a/db/model/Gdoc/rawToArchie.ts b/db/model/Gdoc/rawToArchie.ts
index c2c9b50803d..b1b344a4491 100644
--- a/db/model/Gdoc/rawToArchie.ts
+++ b/db/model/Gdoc/rawToArchie.ts
@@ -47,6 +47,7 @@ import {
     RawBlockPeople,
     RawBlockPeopleRows,
     RawBlockPerson,
+    RawBlockNarrativeChart,
     RawBlockCode,
 } from "@ourworldindata/types"
 import { isArray } from "@ourworldindata/utils"
@@ -128,6 +129,21 @@ function* rawBlockChartToArchieMLString(
     yield "{}"
 }
 
+function* rawBlockNarrativeChartToArchieMLString(
+    block: RawBlockNarrativeChart
+): Generator<string, void, undefined> {
+    yield "{.narrative-chart}"
+    if (typeof block.value !== "string") {
+        yield* propertyToArchieMLString("name", block.value)
+        yield* propertyToArchieMLString("height", block.value)
+        yield* propertyToArchieMLString("row", block.value)
+        yield* propertyToArchieMLString("column", block.value)
+        yield* propertyToArchieMLString("position", block.value)
+        yield* propertyToArchieMLString("caption", block.value)
+    }
+    yield "{}"
+}
+
 function* rawBlockCodeToArchieMLString(
     block: RawBlockCode
 ): Generator<string, void, undefined> {
@@ -840,6 +856,10 @@ export function* OwidRawGdocBlockToArchieMLStringGenerator(
         .with({ type: "all-charts" }, rawBlockAllChartsToArchieMLString)
         .with({ type: "aside" }, rawBlockAsideToArchieMLString)
         .with({ type: "chart" }, rawBlockChartToArchieMLString)
+        .with(
+            { type: "narrative-chart" },
+            rawBlockNarrativeChartToArchieMLString
+        )
         .with({ type: "code" }, rawBlockCodeToArchieMLString)
         .with({ type: "donors" }, rawBlockDonorListToArchieMLString)
         .with({ type: "scroller" }, rawBlockScrollerToArchieMLString)
diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
index a60bd1f4e79..209fcc59847 100644
--- a/db/model/Gdoc/rawToEnriched.ts
+++ b/db/model/Gdoc/rawToEnriched.ts
@@ -129,6 +129,8 @@ import {
     EnrichedBlockPerson,
     RawBlockPeopleRows,
     EnrichedBlockPeopleRows,
+    RawBlockNarrativeChart,
+    EnrichedBlockNarrativeChart,
     RawBlockCode,
     EnrichedBlockCode,
 } from "@ourworldindata/types"
@@ -172,6 +174,7 @@ export function parseRawBlocksToEnrichedBlocks(
         .with({ type: "blockquote" }, parseBlockquote)
         .with({ type: "callout" }, parseCallout)
         .with({ type: "chart" }, parseChart)
+        .with({ type: "narrative-chart" }, parseNarrativeChart)
         .with({ type: "code" }, parseCode)
         .with({ type: "donors" }, parseDonorList)
         .with({ type: "scroller" }, parseScroller)
@@ -496,6 +499,67 @@ const parseChart = (raw: RawBlockChart): EnrichedBlockChart => {
     }
 }
 
+const parseNarrativeChart = (
+    raw: RawBlockNarrativeChart
+): EnrichedBlockNarrativeChart => {
+    const createError = (
+        error: ParseError,
+        name: string,
+        caption: Span[] = []
+    ): EnrichedBlockNarrativeChart => ({
+        type: "narrative-chart",
+        name,
+        caption,
+        parseErrors: [error],
+    })
+
+    const val = raw.value
+
+    if (typeof val === "string") {
+        return {
+            type: "narrative-chart",
+            name: val,
+            parseErrors: [],
+        }
+    } else {
+        if (!val.name)
+            return createError(
+                {
+                    message: "name property is missing",
+                },
+                ""
+            )
+
+        const warnings: ParseError[] = []
+
+        const height = val.height
+        const row = val.row
+        const column = val.column
+        // This property is currently unused, a holdover from @mathisonian's gdocs demo.
+        // We will decide soon™️ if we want to use it for something
+        let position: ChartPositionChoice | undefined = undefined
+        if (val.position)
+            if (val.position === "featured") position = val.position
+            else {
+                warnings.push({
+                    message: "position must be 'featured' or unset",
+                })
+            }
+        const caption = val.caption ? htmlToSpans(val.caption) : []
+
+        return omitUndefinedValues({
+            type: "narrative-chart",
+            name: val.name,
+            height,
+            row,
+            column,
+            position,
+            caption: caption.length > 0 ? caption : undefined,
+            parseErrors: [],
+        }) as EnrichedBlockNarrativeChart
+    }
+}
+
 const parseCode = (raw: RawBlockCode): EnrichedBlockCode => {
     return {
         type: "code",
diff --git a/db/model/Link.ts b/db/model/Link.ts
index 4468e6832dd..55e228c6fb2 100644
--- a/db/model/Link.ts
+++ b/db/model/Link.ts
@@ -8,23 +8,41 @@ import {
     OwidGdocLinkType,
 } from "@ourworldindata/types"
 import { KnexReadonlyTransaction, knexRaw } from "../db.js"
+import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
 
 export async function getPublishedLinksTo(
     knex: KnexReadonlyTransaction,
     ids: string[],
     linkType?: OwidGdocLinkType
-): Promise<(DbPlainPostGdocLink & { sourceSlug: string })[]> {
+): Promise<
+    (DbPlainPostGdocLink & {
+        title: string
+        slug: string
+        id: string
+        url: string
+    })[]
+> {
     const linkTypeClause = linkType ? "AND linkType = ?" : ""
     const params = linkType ? [ids, linkType] : [ids]
-    const rows = await knexRaw<DbPlainPostGdocLink & { sourceSlug: string }>(
+    const rows = await knexRaw<
+        DbPlainPostGdocLink & {
+            title: string
+            slug: string
+            id: string
+            url: string
+        }
+    >(
         knex,
         `-- sql
         SELECT
-            posts_gdocs_links.*,
-            posts_gdocs.slug AS sourceSlug
+            pgl.*,
+            pg.content ->> '$.title' AS title,
+            pg.slug AS slug,
+            pg.id AS id,
+            CONCAT("${BAKED_BASE_URL}","/",pg.slug) as url
         FROM
-            posts_gdocs_links
-            JOIN posts_gdocs ON posts_gdocs_links.sourceId = posts_gdocs.id
+            posts_gdocs_links pgl
+            JOIN posts_gdocs pg ON pgl.sourceId = pg.id
         WHERE
             target IN (?)
             ${linkTypeClause}
@@ -62,3 +80,23 @@ export function createLinkFromUrl({
         sourceId: source.id,
     } satisfies DbInsertPostGdocLink
 }
+
+export function createLinkForChartView({
+    name,
+    source,
+    componentType,
+}: {
+    name: string
+    source: GdocBase
+    componentType: string
+}): DbInsertPostGdocLink {
+    return {
+        target: name,
+        linkType: OwidGdocLinkType.ChartView,
+        queryString: "",
+        hash: "",
+        text: "",
+        componentType,
+        sourceId: source.id,
+    } satisfies DbInsertPostGdocLink
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
index d3f3a464aec..19aea859efe 100644
--- a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
@@ -26,10 +26,20 @@ $paddingX: 12px; // keep in sync with PADDING_X
     }
 }
 
-.ActionButton {
-    $light-fill: $gray-10;
-    $hover-fill: $gray-20;
-    $active-fill: $blue-20;
+div.ActionButton {
+    --light-fill: #{$gray-10};
+    --hover-fill: #{$gray-20};
+    --active-fill: #{$blue-20};
+    --text-color: #{$dark-text};
+
+    &.ActionButton--exploreData {
+        --light-fill: #{$blue-20};
+        --hover-fill: #{$blue-20};
+        --active-fill: #{$blue-10};
+        --text-color: #{$blue-90};
+
+        --hover-decoration: underline;
+    }
 
     height: 100%;
     border-radius: 4px;
@@ -43,12 +53,12 @@ $paddingX: 12px; // keep in sync with PADDING_X
         height: 100%;
         width: 100%;
         cursor: pointer;
-        color: $dark-text;
+        color: var(--text-color);
         font-size: 13px;
         font-weight: 500;
         padding: 0 $paddingX;
         border-radius: inherit;
-        background-color: $light-fill;
+        background-color: var(--light-fill);
         position: relative;
         letter-spacing: 0.01em;
 
@@ -61,14 +71,19 @@ $paddingX: 12px; // keep in sync with PADDING_X
             padding: 0;
         }
 
+        &:visited {
+            color: var(--text-color);
+        }
+
         &:hover {
-            background-color: $hover-fill;
+            background-color: var(--hover-fill);
+            text-decoration: var(--hover-decoration);
         }
 
         &:active,
         &.active {
             color: $active-text;
-            background-color: $active-fill;
+            background-color: var(--active-fill);
         }
     }
 
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
index dadc693d304..13e0e2f1646 100644
--- a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -305,7 +305,7 @@ export class ActionButtons extends React.Component<{
                     {this.hasExploreTheDataButton && (
                         <li style={{ width: this.exploreTheDataButtonWidth }}>
                             <div
-                                className="ActionButton"
+                                className="ActionButton ActionButton--exploreData"
                                 style={{ width: "100%" }}
                             >
                                 <a
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 94407af5a90..307698ab32a 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -112,6 +112,7 @@ import {
     GRAPHER_TAB_QUERY_PARAMS,
     GrapherTabOption,
     SeriesName,
+    ChartViewInfo,
 } from "@ourworldindata/types"
 import {
     BlankOwidTable,
@@ -332,6 +333,11 @@ export interface GrapherProgrammaticInterface extends GrapherInterface {
     isEmbeddedInAnOwidPage?: boolean
     isEmbeddedInADataPage?: boolean
 
+    chartViewInfo?: Pick<
+        ChartViewInfo,
+        "parentChartSlug" | "queryParamsForParentChart"
+    >
+
     manager?: GrapherManager
     instanceRef?: React.RefObject<Grapher>
 }
@@ -506,6 +512,11 @@ export class Grapher
     isEmbeddedInAnOwidPage?: boolean = this.props.isEmbeddedInAnOwidPage
     isEmbeddedInADataPage?: boolean = this.props.isEmbeddedInADataPage
 
+    chartViewInfo?: Pick<
+        ChartViewInfo,
+        "name" | "parentChartSlug" | "queryParamsForParentChart"
+    > = undefined
+
     selection =
         this.manager?.selection ??
         new SelectionArray(
@@ -2997,7 +3008,10 @@ export class Grapher
                 ref={this.base}
                 className={containerClasses}
                 style={containerStyle}
-                data-grapher-url={this.canonicalUrl}
+                data-grapher-url={JSON.stringify({
+                    grapherUrl: this.canonicalUrl,
+                    chartViewName: this.chartViewInfo?.name,
+                })}
             >
                 {this.commandPalette}
                 {this.uncaughtError ? this.renderError() : this.renderReady()}
@@ -3091,9 +3105,22 @@ export class Grapher
                         if (entry.isIntersecting) {
                             this.hasBeenVisible = true
 
-                            if (this.slug && !this.hasLoggedGAViewEvent) {
-                                this.analytics.logGrapherView(this.slug)
+                            if (!this.hasLoggedGAViewEvent) {
                                 this.hasLoggedGAViewEvent = true
+
+                                if (this.chartViewInfo) {
+                                    this.analytics.logGrapherView(
+                                        this.chartViewInfo.parentChartSlug,
+                                        {
+                                            chartViewName:
+                                                this.chartViewInfo.name,
+                                        }
+                                    )
+                                    this.hasLoggedGAViewEvent = true
+                                } else if (this.slug) {
+                                    this.analytics.logGrapherView(this.slug)
+                                    this.hasLoggedGAViewEvent = true
+                                }
                             }
                         }
 
@@ -3521,10 +3548,27 @@ export class Grapher
         return this.props.manager
     }
 
+    @computed get canonicalUrlIfIsChartView(): string | undefined {
+        if (!this.chartViewInfo) return undefined
+
+        const { parentChartSlug, queryParamsForParentChart } =
+            this.chartViewInfo
+
+        const combinedQueryParams = {
+            ...queryParamsForParentChart,
+            ...this.changedParams,
+        }
+
+        return `${this.bakedGrapherURL}/${parentChartSlug}${queryParamsToStr(
+            combinedQueryParams
+        )}`
+    }
+
     // Get the full url representing the canonical location of this grapher state
     @computed get canonicalUrl(): string | undefined {
         return (
             this.manager?.canonicalUrl ??
+            this.canonicalUrlIfIsChartView ??
             (this.baseUrl ? this.baseUrl + this.queryStr : undefined)
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts b/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
index 2f81bb6ead7..813c76ffeb3 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
@@ -51,6 +51,7 @@ interface GAEvent {
     eventTarget?: string
     grapherPath?: string
     grapherView?: string // specifies a view in a multi-dim data page
+    chartViewName?: string // specifies the name of a chart view / narrative chart
     explorerPath?: string
     explorerView?: string
 }
@@ -76,11 +77,15 @@ export class GrapherAnalytics {
     private version: string // Ideally the Git hash commit
     private isDev: boolean
 
-    logGrapherView(slug: string, view?: Record<string, string>): void {
+    logGrapherView(
+        slug: string,
+        ctx?: { view?: Record<string, string>; chartViewName?: string }
+    ): void {
         this.logToGA({
             event: EventCategory.GrapherView,
             grapherPath: `/grapher/${slug}`,
-            grapherView: view ? JSON.stringify(view) : undefined,
+            grapherView: ctx?.view ? JSON.stringify(ctx.view) : undefined,
+            chartViewName: ctx?.chartViewName,
         })
     }
 
@@ -126,19 +131,23 @@ export class GrapherAnalytics {
 
     logGrapherClick(
         action: string = "unknown-action",
-        label?: string,
-        grapherUrl?: string
+        ctx: {
+            label?: string
+            grapherUrl?: string
+            chartViewName?: string
+        }
     ): void {
         // GA4 trims metadata fields down to 100 characters, so we want to be concise and only send
         // the pathname, e.g. `/grapher/life-expectancy` or `/explorers/migration`
         const grapherUrlObj =
-            grapherUrl !== undefined ? new URL(grapherUrl) : undefined
+            ctx.grapherUrl !== undefined ? new URL(ctx.grapherUrl) : undefined
 
         this.logToGA({
             event: EventCategory.GrapherClick,
             eventAction: action,
-            eventTarget: label,
+            eventTarget: ctx.label,
             grapherPath: grapherUrlObj?.pathname,
+            chartViewName: ctx.chartViewName,
         })
     }
 
@@ -184,17 +193,32 @@ export class GrapherAnalytics {
                 )
                 if (!trackedElement) return
 
-                const grapherUrl = trackedElement
+                const grapherUrlRaw = trackedElement
                     .closest(`[${dataGrapherUrlAttr}]`)
                     ?.getAttribute(dataGrapherUrlAttr)
 
-                if (grapherUrl)
+                if (grapherUrlRaw) {
+                    let grapherUrlObj:
+                        | {
+                              grapherUrl: string
+                              chartViewName: string
+                          }
+                        | undefined
+                    try {
+                        grapherUrlObj = JSON.parse(grapherUrlRaw)
+                    } catch (e) {
+                        console.warn("failed to parse grapherUrl", e)
+                    }
+
                     this.logGrapherClick(
                         trackedElement.getAttribute(dataTrackAttr) || undefined,
-                        trackedElement.innerText,
-                        grapherUrl
+                        {
+                            label: trackedElement.innerText,
+                            grapherUrl: grapherUrlObj?.grapherUrl,
+                            chartViewName: grapherUrlObj?.chartViewName,
+                        }
                     )
-                else
+                } else
                     this.logSiteClick(
                         trackedElement.getAttribute(dataTrackAttr) || undefined,
                         trackedElement.innerText
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 1601f36f65e..dc7143bc79e 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -5,6 +5,9 @@ import type { GrapherProgrammaticInterface } from "./Grapher"
 export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
 export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 
+export const GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR =
+    "data-grapher-chart-view-config"
+
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
 export const GRAPHER_TIMELINE_CLASS = "timeline-component"
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index 8d52675e86c..13ca26a69cf 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -10,6 +10,7 @@ export { ChartDimension } from "./chart/ChartDimension"
 export {
     GRAPHER_EMBEDDED_FIGURE_ATTR,
     GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR,
+    GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR,
     GRAPHER_PAGE_BODY_CLASS,
     GRAPHER_IS_IN_IFRAME_CLASS,
     DEFAULT_GRAPHER_WIDTH,
diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
index cbb50d10c51..06c200041d1 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -86,6 +86,31 @@ export type EnrichedBlockChart = {
     tabs?: ChartTabKeyword[]
 } & EnrichedBlockWithParseErrors
 
+export type RawBlockNarrativeChartValue = {
+    name?: string
+    height?: string
+    row?: string
+    column?: string
+    // TODO: position is used as a classname apparently? Should be renamed or split
+    position?: string
+    caption?: string
+}
+
+export type RawBlockNarrativeChart = {
+    type: "narrative-chart"
+    value: RawBlockNarrativeChartValue | string
+}
+
+export type EnrichedBlockNarrativeChart = {
+    type: "narrative-chart"
+    name: string
+    height?: string
+    row?: string
+    column?: string
+    position?: ChartPositionChoice
+    caption?: Span[]
+} & EnrichedBlockWithParseErrors
+
 export type RawBlockCode = {
     type: "code"
     value: RawBlockText[]
@@ -950,6 +975,7 @@ export type OwidRawGdocBlock =
     | RawBlockAside
     | RawBlockCallout
     | RawBlockChart
+    | RawBlockNarrativeChart
     | RawBlockCode
     | RawBlockDonorList
     | RawBlockScroller
@@ -1001,6 +1027,7 @@ export type OwidEnrichedGdocBlock =
     | EnrichedBlockAside
     | EnrichedBlockCallout
     | EnrichedBlockChart
+    | EnrichedBlockNarrativeChart
     | EnrichedBlockCode
     | EnrichedBlockDonorList
     | EnrichedBlockScroller
diff --git a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts b/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts
index a6f35022ea3..318c5d1e5b2 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts
@@ -13,6 +13,7 @@ import {
 } from "./ArchieMlComponents.js"
 import { MinimalTag } from "../dbTypes/Tags.js"
 import { DbEnrichedLatestWork } from "../domainTypes/Author.js"
+import { QueryParams } from "../domainTypes/Various.js"
 
 export enum OwidGdocPublicationContext {
     unlisted = "unlisted",
@@ -53,6 +54,15 @@ export interface LinkedChart {
     indicatorId?: number // in case of a datapage
 }
 
+// An object containing metadata needed for embedded narrative charts
+export interface ChartViewInfo {
+    name: string
+    title: string
+    chartConfigId: string
+    parentChartSlug: string
+    queryParamsForParentChart: QueryParams
+}
+
 /**
  * A linked indicator is derived from a linked grapher's config (see: getVariableOfDatapageIfApplicable)
  * e.g. https://ourworldindata.org/grapher/tomato-production -> config for grapher with { slug: "tomato-production" } -> indicator metadata
@@ -271,6 +281,7 @@ export enum OwidGdocLinkType {
     Url = "url",
     Grapher = "grapher",
     Explorer = "explorer",
+    ChartView = "chart-view",
 }
 
 export interface OwidGdocLinkJSON {
diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts
index f5fd8971661..a8a3f80db50 100644
--- a/packages/@ourworldindata/types/src/index.ts
+++ b/packages/@ourworldindata/types/src/index.ts
@@ -287,6 +287,8 @@ export {
     SocialLinkType,
     type RawSocialLink,
     type EnrichedSocialLink,
+    type RawBlockNarrativeChart,
+    type EnrichedBlockNarrativeChart,
 } from "./gdocTypes/ArchieMlComponents.js"
 export {
     ChartConfigType,
@@ -330,6 +332,7 @@ export {
     type OwidGdocContent,
     type OwidGdocIndexItem,
     extractGdocIndexItem,
+    type ChartViewInfo,
 } from "./gdocTypes/Gdoc.js"
 
 export {
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index cd2978a218b..547e9404216 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -1711,6 +1711,7 @@ export function traverseEnrichedBlock(
                 type: P.union(
                     "chart-story",
                     "chart",
+                    "narrative-chart",
                     "code",
                     "donors",
                     "horizontal-rule",
diff --git a/site/gdocs/AttachmentsContext.tsx b/site/gdocs/AttachmentsContext.tsx
index e5b5747889c..ec1b767fe12 100644
--- a/site/gdocs/AttachmentsContext.tsx
+++ b/site/gdocs/AttachmentsContext.tsx
@@ -9,6 +9,7 @@ import {
     LatestDataInsight,
     OwidGdocHomepageMetadata,
     DbEnrichedLatestWork,
+    ChartViewInfo,
 } from "@ourworldindata/types"
 
 export type Attachments = {
@@ -22,6 +23,7 @@ export type Attachments = {
     latestDataInsights?: LatestDataInsight[]
     homepageMetadata?: OwidGdocHomepageMetadata
     latestWorkLinks?: DbEnrichedLatestWork[]
+    linkedChartViews?: Record<string, ChartViewInfo>
 }
 
 export const AttachmentsContext = createContext<Attachments>({
@@ -34,4 +36,5 @@ export const AttachmentsContext = createContext<Attachments>({
     latestDataInsights: [],
     homepageMetadata: {},
     latestWorkLinks: [],
+    linkedChartViews: {},
 })
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index da82c3a30f7..8c3162a6187 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -93,6 +93,7 @@ export function OwidGdoc({
                 latestDataInsights: get(props, "latestDataInsights", []),
                 homepageMetadata: get(props, "homepageMetadata", {}),
                 latestWorkLinks: get(props, "latestWorkLinks", []),
+                linkedChartViews: get(props, "linkedChartViews", {}),
             }}
         >
             <DocumentContext.Provider value={{ isPreviewing }}>
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index 07539cd649a..eebaaaad04e 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -44,6 +44,7 @@ import { HomepageSearch } from "./HomepageSearch.js"
 import LatestDataInsightsBlock from "./LatestDataInsightsBlock.js"
 import { Socials } from "./Socials.js"
 import Person from "./Person.js"
+import NarrativeChart from "./NarrativeChart.js"
 import { Container, getLayout } from "./layout.js"
 
 export default function ArticleBlock({
@@ -106,6 +107,15 @@ export default function ArticleBlock({
                 />
             )
         })
+        .with({ type: "narrative-chart" }, (block) => {
+            return (
+                <NarrativeChart
+                    className={getLayout("chart", containerType)}
+                    d={block}
+                    fullWidthOnMobile={true}
+                />
+            )
+        })
         .with({ type: "code" }, (block) => (
             <CodeSnippet
                 className={getLayout("code-snippet", containerType)}
diff --git a/site/gdocs/components/NarrativeChart.tsx b/site/gdocs/components/NarrativeChart.tsx
new file mode 100644
index 00000000000..d2e5336d9b6
--- /dev/null
+++ b/site/gdocs/components/NarrativeChart.tsx
@@ -0,0 +1,98 @@
+import { useContext, useRef } from "react"
+import { useEmbedChart } from "../../hooks.js"
+import { EnrichedBlockNarrativeChart } from "@ourworldindata/types"
+import { useLinkedChartView } from "../utils.js"
+import cx from "classnames"
+import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js"
+import { BlockErrorFallback } from "./BlockErrorBoundary.js"
+import SpanElements from "./SpanElements.js"
+import { DocumentContext } from "../DocumentContext.js"
+import {
+    DEFAULT_GRAPHER_HEIGHT,
+    DEFAULT_GRAPHER_WIDTH,
+    GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR,
+} from "@ourworldindata/grapher"
+import {
+    BAKED_GRAPHER_URL,
+    GRAPHER_DYNAMIC_THUMBNAIL_URL,
+} from "../../../settings/clientSettings.js"
+import { queryParamsToStr } from "@ourworldindata/utils"
+import InteractionNotice from "../../InteractionNotice.js"
+
+export default function NarrativeChart({
+    d,
+    className,
+    fullWidthOnMobile = false,
+}: {
+    d: EnrichedBlockNarrativeChart
+    className?: string
+    fullWidthOnMobile?: boolean
+}) {
+    const refChartContainer = useRef<HTMLDivElement>(null)
+    useEmbedChart(0, refChartContainer)
+
+    const viewMetadata = useLinkedChartView(d.name)
+
+    const { isPreviewing } = useContext(DocumentContext)
+
+    if (!viewMetadata) {
+        if (isPreviewing) {
+            return (
+                <BlockErrorFallback
+                    className={className}
+                    error={{
+                        name: "Narrative chart not found",
+                        message: `Narrative chart with name "${d.name}" couldn't be found.`,
+                    }}
+                />
+            )
+        } else return null // If not previewing, just don't render anything
+    }
+
+    const metadataStringified = JSON.stringify(viewMetadata)
+
+    const resolvedUrl = `${BAKED_GRAPHER_URL}/${viewMetadata.parentChartSlug}${queryParamsToStr(
+        viewMetadata.queryParamsForParentChart
+    )}`
+
+    return (
+        <div
+            className={cx(d.position, className, {
+                "full-width-on-mobile": fullWidthOnMobile,
+            })}
+            style={{ gridRow: d.row, gridColumn: d.column }}
+            ref={refChartContainer}
+        >
+            <figure
+                key={metadataStringified}
+                className={cx(GRAPHER_PREVIEW_CLASS, "chart")}
+                style={{
+                    width: "100%",
+                    border: "0px none",
+                    height: d.height,
+                }}
+                {...{
+                    [GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR]:
+                        metadataStringified,
+                }}
+            >
+                <a href={resolvedUrl} target="_blank" rel="noopener">
+                    <img
+                        src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${viewMetadata.chartConfigId}.svg`}
+                        alt={viewMetadata.title}
+                        width={DEFAULT_GRAPHER_WIDTH}
+                        height={DEFAULT_GRAPHER_HEIGHT}
+                        loading="lazy"
+                        data-no-lightbox
+                    />
+                    <InteractionNotice />
+                </a>
+            </figure>
+            {d.caption ? (
+                <figcaption>
+                    <SpanElements spans={d.caption} />
+                </figcaption>
+            ) : null}
+        </div>
+    )
+}
diff --git a/site/gdocs/utils.ts b/site/gdocs/utils.ts
index e5501b02994..18675be683c 100644
--- a/site/gdocs/utils.ts
+++ b/site/gdocs/utils.ts
@@ -148,6 +148,11 @@ export function useDonors(): string[] | undefined {
     return donors
 }
 
+export const useLinkedChartView = (name: string) => {
+    const { linkedChartViews } = useContext(AttachmentsContext)
+    return linkedChartViews?.[name]
+}
+
 export function getShortPageCitation(
     authors: string[],
     title: string,
diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
index 45a41a03948..5d2bcec0884 100644
--- a/site/multiembedder/MultiEmbedder.tsx
+++ b/site/multiembedder/MultiEmbedder.tsx
@@ -10,6 +10,7 @@ import {
     migrateSelectedEntityNamesParam,
     SelectionArray,
     migrateGrapherConfigToLatestVersion,
+    GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR,
 } from "@ourworldindata/grapher"
 import {
     fetchText,
@@ -21,6 +22,7 @@ import {
     MultiDimDataPageConfig,
     extractMultiDimChoicesFromQueryStr,
     fetchWithRetry,
+    ChartViewInfo,
 } from "@ourworldindata/utils"
 import { action } from "mobx"
 import ReactDOM from "react-dom"
@@ -41,6 +43,9 @@ import {
 } from "../../settings/clientSettings.js"
 import Bugsnag from "@bugsnag/js"
 import { embedDynamicCollectionGrapher } from "../collections/DynamicCollection.js"
+import { match } from "ts-pattern"
+
+type EmbedType = "grapher" | "explorer" | "multiDim" | "chartView"
 
 const figuresFromDOM = (
     container: HTMLElement | Document = document,
@@ -109,10 +114,16 @@ class MultiEmbedder {
      * Use this when you programmatically create/replace charts.
      */
     observeFigures(container: HTMLElement | Document = document) {
-        const figures = figuresFromDOM(
-            container,
-            GRAPHER_EMBEDDED_FIGURE_ATTR
-        ).concat(figuresFromDOM(container, EXPLORER_EMBEDDED_FIGURE_SELECTOR))
+        const figures = figuresFromDOM(container, GRAPHER_EMBEDDED_FIGURE_ATTR)
+            .concat(
+                figuresFromDOM(container, EXPLORER_EMBEDDED_FIGURE_SELECTOR)
+            )
+            .concat(
+                figuresFromDOM(
+                    container,
+                    GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR
+                )
+            )
 
         figures.forEach((figure) => {
             this.figuresObserver?.observe(figure)
@@ -127,33 +138,41 @@ class MultiEmbedder {
         })
     }
 
-    @action.bound
-    async renderInteractiveFigure(figure: Element) {
-        const isExplorer = figure.hasAttribute(
+    async renderExplorerIntoFigure(figure: Element) {
+        const explorerUrl = figure.getAttribute(
             EXPLORER_EMBEDDED_FIGURE_SELECTOR
         )
-        const isMultiDim = figure.hasAttribute("data-is-multi-dim")
 
-        const dataSrc = figure.getAttribute(
-            isExplorer
-                ? EXPLORER_EMBEDDED_FIGURE_SELECTOR
-                : GRAPHER_EMBEDDED_FIGURE_ATTR
-        )
+        if (!explorerUrl) return
 
-        if (!dataSrc) return
+        const { fullUrl, queryStr } = Url.fromURL(explorerUrl)
 
-        const hasPreview = isExplorer ? false : !!figure.querySelector("img")
-        if (!shouldProgressiveEmbed() && hasPreview) return
-
-        // Stop observing visibility as soon as possible, that is not before
-        // shouldProgressiveEmbed gets a chance to reevaluate a possible change
-        // in screen size on mobile (i.e. after a rotation). Stopping before
-        // shouldProgressiveEmbed would prevent rendering interactive charts
-        // when going from portrait to landscape mode (without page reload).
-        this.figuresObserver?.unobserve(figure)
+        const html = await fetchText(fullUrl)
+        const props: ExplorerProps = await buildExplorerProps(
+            html,
+            queryStr,
+            this.selection
+        )
+        if (props.selection)
+            this.graphersAndExplorersToUpdate.add(props.selection)
+        ReactDOM.render(<Explorer {...props} />, figure)
+    }
 
-        const { fullUrl, queryStr, queryParams } = Url.fromURL(dataSrc)
+    private async _renderGrapherComponentIntoFigure(
+        figure: Element,
+        {
+            configUrl,
+            embedUrl,
+            additionalConfig,
+        }: {
+            configUrl: string
+            embedUrl?: Url
+            additionalConfig?: Partial<GrapherProgrammaticInterface>
+        }
+    ) {
+        const { queryStr, queryParams } = embedUrl ?? {}
 
+        figure.classList.remove(GRAPHER_PREVIEW_CLASS)
         const common: GrapherProgrammaticInterface = {
             isEmbeddedInAnOwidPage: true,
             queryStr,
@@ -162,95 +181,150 @@ class MultiEmbedder {
             dataApiUrl: DATA_API_URL,
         }
 
-        if (isExplorer) {
-            const html = await fetchText(fullUrl)
-            const props: ExplorerProps = await buildExplorerProps(
-                html,
-                queryStr,
-                this.selection
-            )
-            if (props.selection)
-                this.graphersAndExplorersToUpdate.add(props.selection)
-            ReactDOM.render(<Explorer {...props} />, figure)
-        } else {
-            figure.classList.remove(GRAPHER_PREVIEW_CLASS)
-            const url = new URL(fullUrl)
-            const slug = url.pathname.split("/").pop()
-            let configUrl
-            if (isMultiDim) {
-                const mdimConfigUrl = `${MULTI_DIM_DYNAMIC_CONFIG_URL}/${slug}.json`
-                const mdimJsonConfig = await fetchWithRetry(mdimConfigUrl).then(
-                    (res) => res.json()
-                )
-                const mdimConfig =
-                    MultiDimDataPageConfig.fromObject(mdimJsonConfig)
-                const dimensions = extractMultiDimChoicesFromQueryStr(
-                    url.search,
-                    mdimConfig
-                )
-                const view = mdimConfig.findViewByDimensions(dimensions)
-                if (!view) {
-                    throw new Error(
-                        `No view found for dimensions ${JSON.stringify(
-                            dimensions
-                        )}`
-                    )
-                }
-                configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/by-uuid/${view.fullConfigId}.config.json`
-            } else {
-                configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/${slug}.config.json`
-            }
-            const fetchedGrapherPageConfig = await fetchWithRetry(
-                configUrl
-            ).then((res) => res.json())
-            const grapherPageConfig = migrateGrapherConfigToLatestVersion(
-                fetchedGrapherPageConfig
-            )
+        const fetchedGrapherPageConfig = await fetchWithRetry(configUrl).then(
+            (res) => res.json()
+        )
+        const grapherPageConfig = migrateGrapherConfigToLatestVersion(
+            fetchedGrapherPageConfig
+        )
 
-            const figureConfigAttr = figure.getAttribute(
-                GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR
-            )
-            const localConfig = figureConfigAttr
-                ? JSON.parse(figureConfigAttr)
-                : {}
-
-            // make sure the tab of the active pane is visible
-            if (figureConfigAttr && !isEmpty(localConfig)) {
-                const activeTab = queryParams.tab || grapherPageConfig.tab
-                if (activeTab === GRAPHER_TAB_OPTIONS.chart)
-                    localConfig.hideChartTabs = false
-                if (activeTab === GRAPHER_TAB_OPTIONS.map)
-                    localConfig.hasMapTab = true
-                if (activeTab === GRAPHER_TAB_OPTIONS.table)
-                    localConfig.hasTableTab = true
+        const figureConfigAttr = figure.getAttribute(
+            GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR
+        )
+        const localConfig = figureConfigAttr ? JSON.parse(figureConfigAttr) : {}
+
+        // make sure the tab of the active pane is visible
+        if (figureConfigAttr && !isEmpty(localConfig)) {
+            const activeTab = queryParams?.tab || grapherPageConfig.tab
+            if (activeTab === GRAPHER_TAB_OPTIONS.chart)
+                localConfig.hideChartTabs = false
+            if (activeTab === GRAPHER_TAB_OPTIONS.map)
+                localConfig.hasMapTab = true
+            if (activeTab === GRAPHER_TAB_OPTIONS.table)
+                localConfig.hasTableTab = true
+        }
+
+        const config = merge(
+            {}, // merge mutates the first argument
+            grapherPageConfig,
+            common,
+            additionalConfig,
+            localConfig,
+            {
+                manager: {
+                    selection: new SelectionArray(
+                        this.selection.selectedEntityNames
+                    ),
+                },
             }
+        )
+        if (config.manager?.selection)
+            this.graphersAndExplorersToUpdate.add(config.manager.selection)
 
-            const config = merge(
-                {}, // merge mutates the first argument
-                grapherPageConfig,
-                common,
-                localConfig,
-                {
-                    manager: {
-                        selection: new SelectionArray(
-                            this.selection.selectedEntityNames
-                        ),
-                    },
-                }
-            )
-            if (config.manager?.selection)
-                this.graphersAndExplorersToUpdate.add(config.manager.selection)
+        const grapherRef = Grapher.renderGrapherIntoContainer(config, figure)
 
-            const grapherRef = Grapher.renderGrapherIntoContainer(
-                config,
-                figure
-            )
+        // Special handling for shared collections
+        if (window.location.pathname.startsWith("/collection/custom")) {
+            embedDynamicCollectionGrapher(grapherRef, figure)
+        }
+    }
+    async renderGrapherIntoFigure(figure: Element) {
+        const embedUrlRaw = figure.getAttribute(GRAPHER_EMBEDDED_FIGURE_ATTR)
+        if (!embedUrlRaw) return
+        const embedUrl = Url.fromURL(embedUrlRaw)
 
-            // Special handling for shared collections
-            if (window.location.pathname.startsWith("/collection/custom")) {
-                embedDynamicCollectionGrapher(grapherRef, figure)
-            }
+        const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/${embedUrl.slug}.config.json`
+
+        await this._renderGrapherComponentIntoFigure(figure, {
+            configUrl,
+            embedUrl,
+        })
+    }
+    async renderMultiDimIntoFigure(figure: Element) {
+        const embedUrlRaw = figure.getAttribute(GRAPHER_EMBEDDED_FIGURE_ATTR)
+        if (!embedUrlRaw) return
+        const embedUrl = Url.fromURL(embedUrlRaw)
+
+        const { queryStr, slug } = embedUrl
+
+        const mdimConfigUrl = `${MULTI_DIM_DYNAMIC_CONFIG_URL}/${slug}.json`
+        const mdimJsonConfig = await fetchWithRetry(mdimConfigUrl).then((res) =>
+            res.json()
+        )
+        const mdimConfig = MultiDimDataPageConfig.fromObject(mdimJsonConfig)
+        const dimensions = extractMultiDimChoicesFromQueryStr(
+            queryStr,
+            mdimConfig
+        )
+        const view = mdimConfig.findViewByDimensions(dimensions)
+        if (!view) {
+            throw new Error(
+                `No view found for dimensions ${JSON.stringify(dimensions)}`
+            )
         }
+
+        const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/by-uuid/${view.fullConfigId}.config.json`
+
+        await this._renderGrapherComponentIntoFigure(figure, {
+            configUrl,
+            embedUrl,
+        })
+    }
+    async renderChartViewIntoFigure(figure: Element) {
+        const viewConfigRaw = figure.getAttribute(
+            GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR
+        )
+        if (!viewConfigRaw) return
+        const viewConfig: ChartViewInfo = JSON.parse(viewConfigRaw)
+        if (!viewConfig) return
+
+        const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/by-uuid/${viewConfig.chartConfigId}.config.json`
+
+        await this._renderGrapherComponentIntoFigure(figure, {
+            configUrl,
+            additionalConfig: {
+                hideRelatedQuestion: true,
+                hideShareButton: true,
+                hideExploreTheDataButton: false,
+                chartViewInfo: viewConfig,
+            },
+        })
+    }
+
+    @action.bound
+    async renderInteractiveFigure(figure: Element) {
+        const isExplorer = figure.hasAttribute(
+            EXPLORER_EMBEDDED_FIGURE_SELECTOR
+        )
+        const isMultiDim = figure.hasAttribute("data-is-multi-dim")
+        const isChartView = figure.hasAttribute(
+            GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR
+        )
+
+        const embedType: EmbedType = isExplorer
+            ? "explorer"
+            : isMultiDim
+              ? "multiDim"
+              : isChartView
+                ? "chartView"
+                : "grapher"
+
+        const hasPreview = isExplorer ? false : !!figure.querySelector("img")
+        if (!shouldProgressiveEmbed() && hasPreview) return
+
+        // Stop observing visibility as soon as possible, that is not before
+        // shouldProgressiveEmbed gets a chance to reevaluate a possible change
+        // in screen size on mobile (i.e. after a rotation). Stopping before
+        // shouldProgressiveEmbed would prevent rendering interactive charts
+        // when going from portrait to landscape mode (without page reload).
+        this.figuresObserver?.unobserve(figure)
+
+        await match(embedType)
+            .with("explorer", () => this.renderExplorerIntoFigure(figure))
+            .with("multiDim", () => this.renderMultiDimIntoFigure(figure))
+            .with("chartView", () => this.renderChartViewIntoFigure(figure))
+            .with("grapher", () => this.renderGrapherIntoFigure(figure))
+            .exhaustive()
     }
 
     setUpGlobalEntitySelectorForEmbeds() {