Ben Kates, Urban Institute, on creating extended Datawrapper tooltips with Svelte
The data visualization team at the Urban Institute creates many map projects that tend to have a shared design requirement: a choropleth map that displays relevant information for a selected geography which is often too complex or too long to fit inside a tooltip. Historically, this team would need ample development time to meet this design requirement when using vanilla JavaScript and d3’s geography tools (or Mapbox). Thanks to Datawrapper’s chart interaction events messages and Svelte, an easy-to-use JavaScript framework, they can reduce development time for these projects. Ben discusses the surprisingly few steps that went into creating the project: configuring the Datawrapper visualization, adding the interaction events JS, configuring Svelte stores, and displaying the store values. Ben is a Data Visualization Developer on the Communications team at the Urban Institute, a research non-profit based out of Washington, D.C. He uses JavaScript tools like Svelte and d3 as well as Datawrapper and R to create digital products that communicate research findings in engaging ways. Ben lives in Philadelphia, PA and has a background in data analytics and digital marketing, working with clients across industries to create data tools that enable action and impact. ======================================== 00:00 Introduction 01:56 Technical setup 02:27 Interaction events in Datawrapperz 03:30 What is Svelte? 05:35 Sending Datawrapper events to a Svelte app 09:27 Closing thoughts & resources 11:37 Q: Using web components in Datawrapper? 13:08 Q: Could the same work in Vue or React? ======================================== Ben Kates gave the talk "Creating extended Datawrapper tooltips with Svelte" at Unwrapped 2024, a conference hosted by data visualization tool Datawrapper. Read an interview with Ben, including some of their Datawrapper visualizations: https://blog.datawrapper.de/urban-institute-ben-kates-tooltips-with-svelte/ Learn more about Unwrapped: https://www.datawrapper.de/unwrapped Learn more about Datawrapper: https://www.datawrapper.de/