The purpose of this template repository is to get you started with a SvelteKit project that captures Datawrapper chart interaction events and uses a data key to display information from a lookup dataset.
If you're unfamiliar with this workflow, check out the following documentation:
- Svelte Interactive Tutorial
- SvelteKit Documentation
- Datawrapper: Listening to Chart Interaction Events
data/data.json: A sample dataset to use as a lookup table.lib/stores.js: Writable/readable stores to capture/display information. These are namedselectedKeyandlookupData.lib/components/DatawrapperIframe.svelte: A Svelte component that wraps the Datawrapper iframe and listens to interaction events. Define which events are dispatched here.lib/components/InfoDisplay.svelte: A Svelte component that displays the information from the lookup dataset.lib/utils/events.js: Utility script for attaching interaciton event listeners to Datawrapper charts. Copied and slightly modified from the Datawrapper documentation.routes/+page.svelte: The parent page for the application.
JSDoc for type checking and Prettier for code formatting are enabled by default.
Install dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open