Datawrapper loader example

examples/loader-datawrapper/.gitignore

@@ -0,0 +1,6 @@
+*.pyc
+.DS_Store
+.venv
+/dist/
+node_modules/
+yarn-error.log

examples/loader-datawrapper/README.md

@@ -0,0 +1,9 @@
+[Framework examples →](../)
+
+# Datawrapper data loader
+
+View live: <https://observablehq.observablehq.cloud/framework-example-loader-datawrapper/>
+
+This Observable Framework example demonstrates how to write a data loader in Python that generates an HTML [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) tag that embeds a [Datawrapper](https://www.datawrapper.de/) chart.
+
+The data loader lives in [`src/data/chart.html.py`](./src/data/chart.html.py).

examples/loader-datawrapper/observablehq.config.js

@@ -0,0 +1,3 @@
+export default {
+  root: "src"
+};

examples/loader-datawrapper/package.json

@@ -0,0 +1,20 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf src/.observablehq/cache",
+    "build": "rimraf dist && observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "^1.7.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/loader-datawrapper/requirements.txt

@@ -0,0 +1,2 @@
+pandas
+datawrapper

examples/loader-datawrapper/src/.gitignore

@@ -0,0 +1 @@
+/.observablehq/cache/

examples/loader-datawrapper/src/data/chart.html.py

@@ -0,0 +1,47 @@
+import sys
+
+import pandas as pd
+from datawrapper import Datawrapper
+
+# Get an extract of arrests made by the Baltimore Police Department
+df = pd.read_csv(
+    "https://raw.githubusercontent.com/palewire/first-automated-chart/main/_notebooks/arrests.csv",
+    parse_dates=["ArrestDateTime"]
+)
+
+# Create a year column
+df['year'] = df.ArrestDateTime.dt.year
+
+# Calculate the total number by year
+totals_by_year = df.year.value_counts().sort_index().reset_index()
+
+# Connect to the datawrapper api
+dw = Datawrapper()
+
+# Create a chart
+chart_config = dw.create_chart(
+    # Headline the chart
+    title="Baltimore Arrests",
+    # Set the type
+    chart_type="column-chart",
+    # Give the data
+    data=totals_by_year,
+    # Configure other bits
+    metadata={
+        # Set the description
+        "describe": {
+            "source-name": "OpenBaltimore",
+            "source-url": "https://data.baltimorecity.gov/datasets/baltimore::bpd-arrests/about",
+        }
+    }
+)
+
+# Pull out the chart's unique identifier
+chart_id = chart_config["id"]
+
+# Publish the chart
+dw.publish_chart(chart_id)
+
+# Write the chart's embed code to stdout
+html = dw.get_iframe_code(chart_id, responsive=True)
+sys.stdout.write(html)

examples/loader-datawrapper/src/index.md

@@ -0,0 +1,83 @@
+# Datawrapper data loader
+
+Here’s a Python data loader that generates an HTML [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) tag that embeds a [Datawrapper](https://www.datawrapper.de/) chart.
+
+```python
+import sys
+
+import pandas as pd
+from datawrapper import Datawrapper
+
+# Get an extract of arrests made by the Baltimore Police Department
+df = pd.read_csv(
+    "https://raw.githubusercontent.com/palewire/first-automated-chart/main/_notebooks/arrests.csv",
+    parse_dates=["ArrestDateTime"]
+)
+
+# Create a year column
+df['year'] = df.ArrestDateTime.dt.year
+
+# Calculate the total number by year
+totals_by_year = df.year.value_counts().sort_index().reset_index()
+
+# Connect to the datawrapper api
+dw = Datawrapper()
+
+# Create a chart
+chart_config = dw.create_chart(
+    # Headline the chart
+    title="Baltimore Arrests",
+    # Set the type
+    chart_type="column-chart",
+    # Give the data
+    data=totals_by_year,
+    # Configure other bits
+    metadata={
+        # Set the description
+        "describe": {
+            "source-name": "OpenBaltimore",
+            "source-url": "https://data.baltimorecity.gov/datasets/baltimore::bpd-arrests/about",
+        }
+    }
+)
+
+# Pull out the chart's unique identifier
+chart_id = chart_config["id"]
+
+# Publish the chart
+dw.publish_chart(chart_id)
+
+# Write the chart's embed code to stdout
+html = dw.get_iframe_code(chart_id, responsive=True)
+sys.stdout.write(html)
+```
+
+<div class="note">
+
+To run this data loader, you will need to create an API token in Datawrapper and set it as an environment variable named `DATAWRAPPER_ACCESS_TOKEN`.
+
+You’ll also need python3 and the pandas and datawrapper modules installed and available on your `$PATH`.
+
+</div>
+
+<div class="tip">
+
+We recommend using a [Python virtual environment](https://observablehq.com/framework/loaders#venv), such as with venv or uv, and managing required packages via `requirements.txt` rather than installing them globally.
+
+</div>
+
+The above data loader lives in `data/chart.html.py`, so we can load the data using `data/chart.html` with `FileAttachment`:
+
+```js echo
+const iframe = FileAttachment("data/chart.html").text();
+```
+
+We can then insert the HTML into the page by creating an element and setting its `innerHTML` attribute:
+
+```html echo
+<div id="chart"></div>
+```
+
+```js echo
+document.getElementById("chart").innerHTML = iframe;
+```