PageSourceSearch

https://datavisualizationwithsvelte.com/

html datavisualizationwithsvelte.com collected 2026-10-05 01:56:13 UTC 57,832 bytes, 166 lines download raw bytes

1<!doctype html>
2<html lang="en" class="dark">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width" />
6
7    <!-- Metadata should come early for SEO -->
8    
9		<link href="https://datavisualizationwithsvelte.com/_app/immutable/assets/0.CwKKEAN8.css" rel="stylesheet">
10		<link href="https://datavisualizationwithsvelte.com/_app/immutable/assets/MarkdownLayout.CW2dxGme.css" rel="stylesheet">
11		<link href="https://datavisualizationwithsvelte.com/_app/immutable/assets/AnimatedBarChart.DMFtlxdq.css" rel="stylesheet">
12		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/entry/start.DGEjfJ--.js">
13		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/entry.BDoTTWgy.js">
14		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/index-client.CRKmWoC4.js">
15		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/index.BFLD-r1F.js">
16		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/entry/app.CBpG8PeO.js">
17		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/render.DgXvYnEL.js">
18		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/disclose-version.CYRus3_n.js">
19		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/svelte-head.DKJNmT14.js">
20		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/if.Bi6JYQB7.js">
21		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/svelte-component.Bkz_W63d.js">
22		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/proxy.CXhvWRiY.js">
23		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/this.DqPSiSU7.js">
24		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/props.BqrOA4w1.js">
25		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/store.DeLqymli.js">
26		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/nodes/0.Cjr_O-Ki.js">
27		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/legacy.D5VIDL1L.js">
28		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/html.DJp1TmCa.js">
29		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/slot.CFtN0LuK.js">
30		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/actions.KLbXvxCF.js">
31		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/index.CFOHTU2N.js">
32		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/loop.BGGTUj09.js">
33		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/attributes.BAFHm5L1.js">
34		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/class.DNTe23Na.js">
35		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/index.CCX79No8.js">
36		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/each.BSc35976.js">
37		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/stores.CmVNnxMb.js">
38		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/common.BqtDBFWM.js">
39		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/nodes/3.DH8oJ4If.js">
40		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/MarkdownLayout.CfOqJUas.js">
41		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/Head.ClEXiONq.js">
42		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/select.BQDKw0Ts.js">
43		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/DiscordClick.9GVmGGRY.js">
44		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/AnimatedBarChart.ju6lb8xR.js">
45		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/size.uB4_DYUU.js">
46		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/tweened.qVRUJtro.js">
47		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/utils.vK_o3JBb.js">
48		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/value.DryReaOW.js">
49		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/color.DL3TDMN-.js">
50		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/linear.BNRZS3tC.js">
51		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/init.BFKUnIhM.js">
52		<link rel="modulepreload" href="https://datavisualizationwithsvelte.com/_app/immutable/chunks/blockquote.B5TYkzcI.js"><!--[--><meta name="description" content="Master interactive data visualization with SvelteKit and D3. Learn to build animated, responsive charts through step-by-step tutorials covering bar charts, line charts, scatter plots, and more."> <meta name="keywords" content="Svelte, SvelteKit, D3, data visualization, interactive charts, SVG, Svelte tutorials, JavaScript visualizations, animated charts, custom data visualizations"> <link rel="canonical" href="https://datavisualizationwithsvelte.com/"> <!--[!--><meta name="robots" content="index, follow"><!--]--> <!--[--><meta property="og:type" content="website"><!--]--> <meta property="og:locale" content="en_US"> <meta property="og:locale:alternate" content="en_GB"> <!--[--><meta property="og:url" content="https://datavisualizationwithsvelte.com/"> <meta property="og:title" content="Interactive Data Visualizations with Svelte and D3"> <meta property="og:description" content="Master interactive data visualization with SvelteKit and D3. Learn to build animated, responsive charts through step-by-step tutorials covering bar charts, line charts, scatter plots, and more."> <meta property="og:site_name" content="Data Visualizations with Svelte and D3"> <meta property="og:image" content="https://datavisualizationwithsvelte.com/og.png"> <meta property="og:image:alt" content="Interactive Data Visualizations with Svelte and D3"><!--]--> <!--[--><meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@datavizsvelte"> <meta name="twitter:creator" content="@datavizsvelte"> <meta name="twitter:title" content="Interactive Data Visualizations with Svelte and D3"> <meta name="twitter:description" content="Master interactive data visualization with SvelteKit and D3. Learn to build animated, responsive charts through step-by-step tutorials covering bar charts, line charts, scatter plots, and more."> <meta name="twitter:image" content="https://datavisualizationwithsvelte.com/og.png"> <meta name="twitter:image:alt" content="Interactive Data Visualizations with Svelte and D3"><!--]--><!--]--><title>Interactive Data Visualizations with Svelte and D3</title>
53
54    <!-- Favicon and app icons -->
55    <link
56      rel="apple-touch-icon"
57      sizes="180x180"
58      href="https://datavisualizationwithsvelte.com/apple-touch-icon.png" />
59    <link
60      rel="icon"
61      type="image/png"
62      sizes="32x32"
63      href="https://datavisualizationwithsvelte.com/favicon-32x32.png" />
64    <link
65      rel="icon"
66      type="image/png"
67      sizes="16x16"
68      href="https://datavisualizationwithsvelte.com/favicon-16x16.png" />
69    <link rel="manifest" href="https://datavisualizationwithsvelte.com/site.webmanifest" />
70    <link
71      rel="mask-icon"
72      href="https://datavisualizationwithsvelte.com/safari-pinned-tab.svg"
73      color="#5bbad5" />
74    <meta name="msapplication-TileColor" content="#da532c" />
75    <meta name="theme-color" content="#ffffff" />
76  </head>
77  <!-- Google tag (gtag.js) -->
vendor: 74 bytes, lines 77-80
77
78  <script
79    async
80    src="https://www.googletagmanager.com/gtag/js?id=
80G-H4RMWHH09N
vendor: 14 bytes, lines 80-81
80"></script>
81  
81<script>
82    
vendor: 152 bytes, lines 82-87
82window.dataLayer = window.dataLayer || [];
83    function gtag() {
84      dataLayer.push(arguments);
85    }
86    gtag('js', new Date());
87    gtag('config', '
87G-H4RMWHH09N
vendor: 40 bytes, lines 87-90
87', {
88      anonymize_ip: true
89    });
90  
90</script>
90
91
92  <body data-theme="my-custom-theme">
93    <div style="display: contents" class="h-full overflow-hidden">
94      <!--[--><!--[--><!----><!--[!--><!--]--><!----> <!--[!--><!--]--><!---->  <!--[--><div class="hidden lg:block relative overflow-hidden text-white py-2 px-4 shadow-md"><div class="absolute top-0 left-0 w-full h-full opacity-10"><svg width="100%" height="100%" viewBox="0 0 100 20" preserveAspectRatio="none" class="svelte-1o06kn7"><path d="M0,10 Q25,5 50,10 T100,10" stroke="white" stroke-width="1" fill="none"></path><circle cx="30" cy="10" r="1" fill="white"></circle><circle cx="70" cy="10" r="1" fill="white"></circle></svg></div> <div class="flex items-center justify-between gap-2 relative z-10"><div class="flex-1 flex items-center justify-center gap-3"><p class="text-sm text-white">Transform your data into <span>compelling visual stories</span>!</p> <a href="https://revealthestory.com" target="_blank" class="inline-flex items-center gap-1 text-sm text-yellow-500 hover:text-yellow-400 px-2 py-0.5 rounded transition-colors duration-200"><span>Explore RevealTheStory.com</span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-1o06kn7"><path d="M7 17l9.2-9.2M17 17V7H7"></path></svg></a></div></div></div><!--]--> <div id="appShell" class="w-full h-full flex flex-col overflow-hidden " data-testid="app-shell"><!--[--><header id="shell-header" class="flex-none z-10"><!----><div class="app-bar flex flex-col bg-surface-100-800-token  space-y-4 p-4  " data-testid="app-bar" role="toolbar" aria-label="" aria-labelledby=""><div class="app-bar-row-main grid items-center grid-cols-[auto_1fr_auto] gap-4 "><!--[--><div class="app-bar-slot-lead flex-none flex justify-between items-center "><!----><div class="flex shrink-0 items-center"><button aria-label="Open navigation menu" class="btn btn-sm mr-4 lg:hidden"><span><svg viewBox="0 0 100 80" class="hamburger h-4 w-4 svelte-1o06kn7"><rect width="100" height="20"></rect><rect y="30" width="100" height="20"></rect><rect y="60" width="100" height="20"></rect></svg></span></button> <a href="/" class="mr-3 hidden lg:block" aria-label="Homepage"><svg fill="#71c4f9" id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.33 302.75" class="svelte-1o06kn7"><rect x="174.93" y="15.81" width="87.26" height="87.26"></rect><rect x="506.44" y="400.21" width="87.26" height="87.26" transform="translate(-426.56 41.87) rotate(-30)"></rect><rect x="453.54" y="492.15" width="87.26" height="87.26" transform="translate(-493.75 405.82) rotate(-60)"></rect><rect x="69.14" y="199.68" width="87.26" height="87.26"></rect><rect x="294.31" y="400.53" width="87.26" height="87.26" transform="translate(-455.14 -64.15) rotate(-30)"></rect><rect x="347.2" y="308.6" width="87.26" height="87.26" transform="translate(-387.96 221.95) rotate(-60)"></rect></svg></a> <a href="/" class="truncate text-lg font-bold md:text-xl">Using D3 with Svelte</a></div><!----></div><!--]--> <div class="app-bar-slot-default flex-auto "><!----><!----></div> <!--[--><div class="app-bar-slot-trail flex-none flex items-center space-x-4 "><!----><a aria-label="join-on-x" class="flex mr-2 gap-2 fill-primary-500 text-primary-500" href="/login"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round svelte-1o06kn7"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg> Log In</a> <a aria-label="join-on-x" class="mr-2 fill-primary-500" href="https://twitter.com/datavizsvelte" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" class="svelte-1o06kn7"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.
94182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"></path></svg></a> <a aria-label="join-on-discord" class="mr-2 fill-primary-500" href="https://discord.gg/qcR5zTbJzg" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" class="svelte-1o06kn7"><path fill-rule="evenodd" d="M5.075 1.826a.48.48 0 0 0-.127-.003c-.841.091-2.121.545-2.877.955a.48.48 0 0 0-.132.106c-.314.359-.599.944-.822 1.498C.887 4.95.697 5.55.59 5.984C.236 7.394.043 9.087.017 10.693a.48.48 0 0 0 .056.23c.3.573.947 1.104 1.595 1.492c.655.393 1.42.703 2.036.763a.48.48 0 0 0 .399-.153c.154-.167.416-.557.614-.86c.09-.138.175-.27.241-.375c.662.12 1.492.19 2.542.19c1.048 0 1.878-.07 2.54-.19c.066.106.15.237.24.374c.198.304.46.694.615.861a.48.48 0 0 0 .399.153c.616-.06 1.38-.37 2.035-.763c.648-.388 1.295-.919 1.596-1.492a.48.48 0 0 0 .055-.23c-.025-1.606-.219-3.3-.571-4.71a12.98 12.98 0 0 0-.529-1.601c-.223-.554-.508-1.14-.821-1.498a.48.48 0 0 0-.133-.106c-.755-.41-2.035-.864-2.877-.955a.48.48 0 0 0-.126.003a1.18 1.18 0 0 0-.515.238a2.905 2.905 0 0 0-.794.999A14.046 14.046 0 0 0 7.5 3.02c-.402 0-.774.015-1.117.042a2.905 2.905 0 0 0-.794-.998a1.18 1.18 0 0 0-.514-.238Zm5.943 9.712a23.136 23.136 0 0 0 .433.643c.396-.09.901-.3 1.385-.59c.543-.325.974-.7 1.182-1.017c-.033-1.506-.219-3.07-.54-4.358a12.046 12.046 0 0 0-.488-1.475c-.2-.498-.415-.92-.602-1.162c-.65-.337-1.675-.693-2.343-.79a.603.603 0 0 0-.058.04a1.5 1.5 0 0 0-.226.22a2.52 2.52 0 0 0-.113.145c.305.056.577.123.818.197c.684.21 1.177.5 1.418.821a.48.48 0 1 1-.768.576c-.059-.078-.316-.29-.932-.48c-.595-.182-1.47-.328-2.684-.328c-1.214 0-2.09.146-2.684.329c-.616.19-.873.4-.932.479a.48.48 0 1 1-.768-.576c.241-.322.734-.61 1.418-.82c.24-.075.512-.141.816-.197a2.213 2.213 0 0 0-.114-.146a1.5 1.5 0 0 0-.225-.22a.604.604 0 0 0-.059-.04c-.667.097-1.692.453-2.342.79c-.188.243-.402.664-.603 1.162c-.213.53-.39 1.087-.487 1.475c-.322 1.288-.508 2.852-.54 4.358c.208.318.638.692 1.181 1.018c.485.29.989.5 1.386.589a16.32 16.32 0 0 0 .433-.643c-.785-.279-1.206-.662-1.48-1.072a.48.48 0 0 1 .8-.532c.26.392.944 1.086 4.2 1.086c3.257 0 3.94-.694 4.2-1.086a.48.48 0 0 1 .8.532c-.274.41-.696.794-1.482 1.072ZM4.08 7.012c.244-.262.575-.41.92-.412c.345.002.676.15.92.412c.243.263.38.618.38.988s-.137.725-.38.988c-.244.262-.575.41-.92.412a1.263 1.263 0 0 1-.92-.412A1.453 1.453 0 0 1 3.7 8c0-.37.137-.725.38-.988ZM10 6.6c-.345.002-.676.15-.92.412c-.243.263-.38.618-.38.988s.137.725.38.988c.244.262.575.41.92.412c.345-.002.676-.15.92-.412c.243-.263.38-.618.38-.988s-.137-.725-.38-.988A1.263 1.263 0 0 0 10 6.6Z" clip-rule="evenodd"></path></svg></a> <div class="hidden md:inline svelte-quy7ta"><button id="search-mobile" class="variant-soft-primary variant-soft btn space-x-4 p-2 px-4   svelte-quy7ta"><span class="w-6 svelte-quy7ta"><!----><svg
95      xmlns="http://www.w3.org/2000/svg"
96      viewBox="0 0 24 24"
97      ><path
98        fill="currentColor"
99        d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z" /></svg><!----></span> <span class="variant-soft badge inline-block svelte-quy7ta">Ctrl+K</span></button></div><!----> <button type="button" class="sponsor variant-ghost btn btn-sm relative text-primary-500 svelte-1o06kn7"><span><svg class="fill-yellow-400 svelte-1o06kn7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"></path></svg></span> <span class="hidden md:inline">Donate</span></button><!----></div><!--]--></div> <!--[!--><!--]--></div><!----> <!--[!--><!--]--><!----></header><!--]--> <div class="flex-auto w-full h-full flex overflow-hidden"><!--[--><aside id="sidebar-left" class="flex-none overflow-x-hidden overflow-y-auto bg-surface-500/5 w-0 lg:w-56"><!----><nav class="list-nav p-4"><div class="md:hidden mx-4 mb-3 svelte-quy7ta"><button id="search-desktop" class="variant-soft-primary variant-soft btn space-x-4 p-2 px-4 w-40  svelte-quy7ta"><span class="w-6 svelte-quy7ta"><!----><svg
100      xmlns="http://www.w3.org/2000/svg"
101      viewBox="0 0 24 24"
102      ><path
103        fill="currentColor"
104        d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z" /></svg><!----></span> <span class="variant-soft badge inline-block svelte-quy7ta">Ctrl+K</span></button></div><!----> <ul><li><a class="flex items-center font-medium bg-primary-active-token" href="/" aria-label="Homepage" arialabel="Homepage"><!----><!---->Home<!----></a><!----></li></ul>  <div id="basics" class="px-4 pb-2 pt-6 font-bold uppercase text-primary-700 dark:text-primary-500"><!----><!---->Pro<!----></div><!----> <ul><!--[!--><a class="flex items-center font-medium" href="/login" aria-label="Get Access to pro content" arialabel="Get Access to pro content"><!----><!---->Get Access<!----></a><!----> <a class="flex items-center font-medium" href="/pro-tutorials" aria-label="Get Access to pro content" arialabel="Get Access to pro content"><!----><!---->What's in Pro<!----></a><!----><!--]--></ul> <div id="basics" class="px-4 pb-2 pt-6 font-bold uppercase text-primary-700 dark:text-primary-500"><!----><!---->Essentials<!----></div><!----> <ul><!--[--><li><a class="flex items-center font-medium" href="/basics/basic-shapes" aria-label="Basic shapes tutorial" arialabel="Basic shapes tutorial"><!----><!---->Basic shapes <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/drawing-svg" aria-label="Drawing on SVG tutorial" arialabel="Drawing on SVG tutorial"><!----><!---->Drawing on SVG <!--[!--><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/bar-chart" aria-label="Bar Chart tutorial" arialabel="Bar Chart tutorial"><!----><!---->Bar Chart <!--[!--><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/svelte-5-d3-example" aria-label="Svelte 5 and D3 tutorial" arialabel="Svelte 5 and D3 tutorial"><!----><!---->Bar Chart <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/scatter-chart" aria-label="Scatter Chart I tutorial" arialabel="Scatter Chart I tutorial"><!----><!---->Scatter Chart I <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/scatter-chart-2" aria-label="Scatter Chart II tutorial" arialabel="Scatter Chart II tutorial"><!----><!---->Scatter Chart II <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/line-chart" aria-label="Line Chart tutorial" arialabel="Line Chart tutorial"><!----><!---->Line Chart <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/dual-axis" aria-label="Dual Axis tutorial" arialabel="Dual Axis tutorial"><!----><!---->Dual Axis <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/donut-chart" aria-label="Donut Chart tutorial" arialabel="Donut Chart tutorial"><!----><!---->Donut Chart <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/density-plot" aria-label="Density Plot tutorial" arialabel="Density Plot tutorial"><!----><!---->Density Plot <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/stacked-bar-chart" aria-label="Stacked Bar Chart tutorial" arialabel="Stacked Bar Chart tutorial"><!----><!---->Stacked Bar  <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/line-gradient" aria-label="Line with color gradient tutorial" arialabel="Line with color gradient tutorial"><!----><!---->Line Gradient <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/basics/force-simulations" aria-label="For Directed Graph tutorial" arialabel="For Directed Graph tutorial"><!----><!---->Force Directed <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li>
104<!--]--></ul> <div id="Visualizations" class="px-4 pb-2 pt-6 font-bold uppercase text-primary-700 dark:text-primary-500"><!----><!---->Visualizations<!----></div><!----> <ul><!--[--><li><a class="flex items-center font-medium" href="/visualizations/area-chart" aria-label="Area Chart with Svelte 5 tutorial" arialabel="Area Chart with Svelte 5 tutorial"><!----><!---->Area Chart <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/visualizations/sankey-chart" aria-label="Sankey chart with Svelte 5 tutorial" arialabel="Sankey chart with Svelte 5 tutorial"><!----><!---->Sankey Chart <!--[--><span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!--]--><!----></a><!----></li><!--]--></ul> <div id="advanced" class="px-4 pb-2 pt-6 font-bold uppercase text-primary-700 dark:text-primary-500"><!----><!---->Advanced<!----></div><!----> <ul><li><a class="flex items-center font-medium" href="/animated-bar-chart"><!----><!---->Animated Bar Chart <span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!----></a><!----></li> <li><a class="flex items-center font-medium" href="/creating-data"><!----><!---->Create a Bell Curve<!----></a><!----></li> <li><a class="flex items-center font-medium" href="/animate-a-bell-curve"><!----><!---->Animate a Bell Curve<!----></a><!----></li> <li><a class="flex items-center font-medium" href="/beeswarm-chart"><!----><!---->Beeswarm Chart <span class="ml-1 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-500 px-1 py-0.5 font-sans text-xs text-gray-800 shadow-md">V5</span><!----></a><!----></li></ul> <div id="maps" class="px-4 pb-2 pt-6 font-bold uppercase text-primary-700 dark:text-primary-500"><!----><!---->Maps<!----></div><!----> <ul><!--[--><li><a class="flex items-center font-medium" href="/maps/us-heatmap" aria-label="Creating maps with Svelte" arialabel="Creating maps with Svelte"><!----><!---->US Counties <!--[!--><!--]--><!----></a><!----></li><li><a class="flex items-center font-medium" href="/maps/svelte-threejs-example" aria-label="Creating 3D elevation maps with Svelte" arialabel="Creating 3D elevation maps with Svelte"><!----><!---->3D Mapping <!--[!--><!--]--><!----></a><!----></li><!--]--></ul> <ul></ul>  <div class="p-4 text-gray-600"><hr class="mb-2 mt-5"> Built with<br> <a aria-label="learn more about skeleton.dev" href="https://www.skeleton.dev/" target="_blank" class="mt-1 !p-0 text-gray-400 hover:!bg-transparent hover:text-gray-300"><!----><svg fill="currentColor" width="125px" height="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 40"><g fill-rule="evenodd"><path d="M17.355 10.21c5.07 0 9.398 1.736 12.495 4.588l.057-.017c.388-.12.72-.244.994-.37.879-.406 2.032-1.236 3.46-2.492-.232 2.188-.48 3.794-.747 4.818a19.306 19.306 0 0 1-.662 1.994 15.855 15.855 0 0 1 1.707 4.672c1.221 6.057-.871 8.735-5.727 10.23.037.18.065.373.086.58.173 1.772-.733 4.633-1.82 4.633-.716 0-1.181-.986-1.68-2.426-.155 1.666-.923 3.58-1.813 3.58-.958 0-1.467-1.767-2.21-4.022C21.118 37.75 20.55 40 19.546 40c-1.02 0-.46-3.177-2.181-4.523-8.721.47-16.057-2.718-16.057-11.916 0-1.693.405-3.346 1.147-4.88-.132-.257-.255-.51-.37-.761C1.505 16.656.81 14.744 0 12.183c2.074 1.53 3.665 2.442 4.772 2.735.11.029.226.055.346.077 2.906-2.879 7.248-4.785 12.237-4.785ZM15.32 22.62c-2.947 0-5.336 2.294-5.336 5.124 0 2.83 2.389 5.124 5.336 5.124 2.946 0 5.335-2.294 5.335-5.124 0-2.76-2.27-5.009-5.115-5.12Zm7.573 6.4c-.891 0-1.362 1.883-1.362 2.727 0 .66.224 1.024.589 1.09.885.082.615-1.194 1.056-1.194.47 0 1.02 1.305 1.48 1.128.547-.322.338-1.024.149-1.578-.665-1.394-1.02-2.173-1.912-2.173Zm5.801-6.7c-2.03 0-3.676 2.014-3.676 4.5 0 2.485 1.646 4.5 3.676 4.5 2.03 0 3.677-2.015 3.677-4.5 0-2.486-1.646-4.5-3.677-4.5ZM16 25a3 3 0 1 1-.5 5.958 3 3 0 0 0 0-5.917c.
104162-.027.33-.041.5-.041Zm12.5-1c1.38 0 2.5 1.343 2.5 3s-1.12 3-2.5 3c-.171 0-.339-.02-.5-.06 1.141-.278 2-1.489 2-2.94 0-1.451-.859-2.662-2-2.94.161-.04.329-.06.5-.06Zm.284-18.586.324.207c.146.093.19.288.096.434l-2.39 3.655a.314.314 0 0 1-.433.093l-.324-.207a.314.314 0 0 1-.095-.434l2.39-3.655a.314.314 0 0 1 .432-.093Zm-23.177.554 1.94 2.75c.1.141.066.337-.076.437l-.319.22a.314.314 0 0 1-.435-.077l-1.94-2.749a.314.314 0 0 1 .076-.438l.318-.22a.314.314 0 0 1 .436.077ZM18.183 0l.58 4.826 2.146-2.385.06 5.942-.426-.094c-1.242-.273-2.369-.41-3.379-.41a9.635 9.635 0 0 0-2.821.399l-.474.143.382-7.432 1.967 3.675L18.183 0Z"></path><path fill-rule="nonzero" d="M69.864 9.3c.132 0 .257.03.374.091.116.061.175.178.175.35a.25.25 0 0 1-.008.061.25.25 0 0 0-.008.061l-.548 5.284a527.096 527.096 0 0 1-.441 4.263 1754.438 1754.438 0 0 1-.35 3.258l1.05-1.157 1.705-1.995c.213-.243.422-.487.625-.73.203-.244.385-.46.548-.648.162-.187.294-.345.396-.472.101-.127.162-.2.182-.22l6.12-.427a.311.311 0 0 1 .1-.015h.099c.172 0 .259.046.259.137 0 .071-.107.228-.32.472l-4.766 5.329a97.52 97.52 0 0 1-.753.814c-.29.31-.612.653-.967 1.028l2.223 2.65 3.837 4.125a.28.28 0 0 0 .137.115c.06.025.119.048.175.068.055.02.106.043.152.069a.123.123 0 0 1 .068.114c0 .04-.007.07-.022.091a.948.948 0 0 1-.145.122 4.7 4.7 0 0 1-.48.305 27.254 27.254 0 0 1-1.773.936c-.345.167-.68.32-1.005.457-.325.137-.624.248-.899.335-.274.086-.487.129-.639.129a.765.765 0 0 1-.358-.091 1.443 1.443 0 0 1-.388-.335 32.842 32.842 0 0 1-.723-.876c-.29-.36-.602-.756-.937-1.187-.335-.432-.677-.878-1.027-1.34a3303 3303 0 0 0-1.873-2.467 24.73 24.73 0 0 1-.601-.814.596.596 0 0 1-.153.114.666.666 0 0 0-.144.099.533.533 0 0 0-.115.145.5.5 0 0 0-.045.236c0 .04-.01.154-.03.342-.021.188-.044.411-.07.67-.025.259-.052.535-.083.83l-.084.83c-.025.258-.048.482-.068.67-.02.187-.03.301-.03.342 0 .071.002.13.007.175.005.046.008.089.008.13 0 .111-.038.195-.115.25-.076.057-.26.125-.555.206l-3.99 1.295c-.111.04-.258.09-.44.152a1.68 1.68 0 0 1-.534.091.657.657 0 0 1-.373-.106c-.106-.072-.16-.203-.16-.396l1.919-21.94a.665.665 0 0 0-.015-.145.665.665 0 0 1-.016-.144.35.35 0 0 1 .114-.252c.077-.076.252-.15.526-.22l4.278-1.02c.112-.02.259-.066.442-.137.182-.071.36-.107.532-.107Zm35.765.29c.111 0 .167.05.167.152l-1.979 21.741v.26a.267.267 0 0 1-.107.22c-.07.056-.238.12-.502.19l-3.99 1.462c-.11.05-.258.104-.44.16a1.82 1.82 0 0 1-.533.083.657.657 0 0 1-.374-.106c-.106-.071-.16-.193-.16-.366v-.09c.082-1.026.16-2.028.237-3.008a638.889 638.889 0 0 1 .525-6.356l.335-3.837c.122-1.39.22-2.766.297-4.126.076-1.36.16-2.756.251-4.187.02-.335.053-.566.099-.693.046-.127.16-.21.343-.251.943-.173 1.89-.348 2.839-.526.95-.177 1.9-.413 2.855-.707a.462.462 0 0 1 .137-.016Zm-50.487 1.035c.162 0 .406.017.73.053.325.035.683.094 1.074.175.39.081.789.193 1.195.335.406.142.776.325 1.111.548.112.081.2.162.267.244.066.08.109.208.13.38.05.822.09 1.632.121 2.429.03.797.071 1.642.122 2.535 0 .172-.036.286-.107.342a.43.43 0 0 1-.274.084c-.111 0-.198-.03-.259-.091a24.802 24.802 0 0 0-.913-.868 7.284 7.284 0 0 0-.99-.754 5.126 5.126 0 0 0-1.104-.525 3.95 3.95 0 0 0-1.27-.198 4.96 4.96 0 0 0-.823.069 2.353 2.353 0 0 0-.746.25c-.223.123-.404.29-.54.503-.138.213-.206.482-.206.807 0 .345.043.645.13.898.086.254.301.493.646.716l3.654 2.482c.67.477 1.213.951 1.63 1.423.416.472.74.942.974 1.409.233.467.393.926.48 1.378a7.1 7.1 0 0 1 .129 1.332c0 .71-.117 1.38-.35 2.01a6.714 6.714 0 0 1-.96 1.743 7.755 7.755 0 0 1-1.423 1.431 9.792 9.792 0 0 1-1.743 1.081c-.62.3-1.261.528-1.926.685a8.478 8.478 0 0 1-1.957.236c-.497 0-.987-.007-1.469-.023a12.636 12.636 0 0 1-1.408-.122 8.109 8.109 0 0 1-1.325-.304 5.325 5.325 0 0 1-1.218-.571l-.259-5.435c0-.01-.002-.02-.007-.03a.068.068 0 0 1-.008-.031c0-.173.091-.26.274-.26.091 0 .193.047.305.138a6.661 6.661 0 0 0 1.827 1.233c.67.305 1.4.457 2.192.457.213 0 .457-.023.73-.069a3.27 3.27 0 0 0 .777-.228 1.92 1.92 0 0 0 .617-.419.902.902 0 0 0 .251-.654c0-.295-.07-.559-.213-.792a1.96 1.96 0 0 0-.563-.594 7.769 7.769 0 0 1-.411-.304l-.625-.488a41.22 41.22 0 0 1-.73-.586 706.448 706.448 0 0 1-1.34-1.104 16.92 16.92 0 0 1-.411-.35c-.6-.446-1.074-.898-1.424-1.355a5.424 5.424 0 0 1-.8-1.431 6.155 6.155 0 0 1-.35-1.545 17.936 17.936 0 0 1-.076-1.698c0-.893.214-1.74.64-2.543a6.42 6.42 0 0 1 1.804-2.093c.777-.594 
1041.708-1.066 2.794-1.416 1.086-.35 2.294-.525 3.624-.525Zm34.302 5.359c.965 0 1.84.18 2.627.54.786.36 1.461.828 2.025 1.401a6.24 6.24 0 0 1 1.301 1.926c.305.71.457 1.421.457 2.132 0 .629-.193 1.26-.578 1.895-.386.635-.927 1.206-1.622 1.713-.695.508-1.53.919-2.504 1.233-.975.315-2.046.472-3.213.472a10.7 10.7 0 0 1-1.918-.182c.04.436.167.812.38 1.126.213.315.482.574.807.777a3.63 3.63 0 0 0 1.104.449c.411.096.835.145 1.271.145.488 0 .957-.044 1.409-.13.451-.086.885-.2 1.301-.342.417-.142.818-.3 1.203-.472.386-.173.751-.345 1.096-.518l.236-.053a.846.846 0 0 1 .19-.023l-.007.243c-.004.13-.006.303-.007.517v.169a178.907 178.907 0 0 1-.03 2.451c.03.05.05.101.06.152.01.05.015.091.015.122 0 .122-.111.254-.335.396a6.04 6.04 0 0 1-.875.441c-.36.153-.772.3-1.233.442-.462.142-.932.271-1.409.388-.477.117-.939.208-1.385.274a8.153 8.153 0 0 1-1.173.1 9.127 9.127 0 0 1-3.19-.572 8.505 8.505 0 0 1-2.74-1.637 7.956 7.956 0 0 1-1.91-2.588c-.478-1.015-.716-2.157-.716-3.426 0-1.33.228-2.575.685-3.737a9.2 9.2 0 0 1 1.926-3.038 9.027 9.027 0 0 1 2.961-2.04c1.147-.497 2.41-.746 3.791-.746Zm26.858 0c.964 0 1.84.18 2.626.54.787.36 1.462.828 2.025 1.401a6.24 6.24 0 0 1 1.302 1.926c.304.71.457 1.421.457 2.132 0 .629-.193 1.26-.579 1.895-.386.635-.926 1.206-1.621 1.713-.696.508-1.53.919-2.505 1.233-.974.315-2.045.472-3.213.472-.609 0-1.248-.06-1.918-.182.04.436.168.812.38 1.126.214.315.483.574.808.777a3.63 3.63 0 0 0 1.103.449 5.58 5.58 0 0 0 1.272.145c.487 0 .956-.044 1.408-.13.452-.086.886-.2 1.302-.342.416-.142.817-.3 1.203-.472.385-.173.75-.345 1.096-.518l.236-.053a.846.846 0 0 1 .19-.023l-.007.243c-.005.163-.008.391-.008.686a178.912 178.912 0 0 1-.03 2.451c.03.05.05.101.06.152a.67.67 0 0 1 .016.122c0 .122-.112.254-.335.396a6.04 6.04 0 0 1-.876.441c-.36.153-.771.3-1.233.442a25.32 25.32 0 0 1-1.408.388c-.477.117-.94.208-1.386.274a8.153 8.153 0 0 1-1.172.1 9.127 9.127 0 0 1-3.19-.572 8.505 8.505 0 0 1-2.74-1.637 7.956 7.956 0 0 1-1.911-2.588c-.477-1.015-.716-2.157-.716-3.426 0-1.33.229-2.575.685-3.737a9.2 9.2 0 0 1 1.926-3.038 9.027 9.027 0 0 1 2.962-2.04c1.147-.497 2.41-.746 3.79-.746Zm17.265-4.461c.122 0 .183.04.183.122v.03c-.05.558-.13 1.335-.236 2.33-.107.994-.226 2.121-.358 3.38h4.08c.082 0 .16.028.237.083.076.056.114.15.114.282 0 .05-.061.234-.183.548-.122.315-.294.726-.518 1.233l-.548 1.234a1.09 1.09 0 0 1-.22.335c-.077.07-.231.116-.465.137h-2.832a238.148 238.148 0 0 0-.403 3.19 34.812 34.812 0 0 0-.236 2.976c0 .396.03.726.091.99.061.263.15.472.267.624a.997.997 0 0 0 .418.327c.163.066.345.1.548.1.325 0 .68-.05 1.066-.146.386-.096.772-.22 1.157-.373a3.14 3.14 0 0 1 .312-.114.805.805 0 0 1 .221-.038c.102 0 .17.046.206.137a2.6 2.6 0 0 1 .106.48c.036.228.09.535.16.921.071.386.188.873.35 1.462.01.05.018.093.023.129a.703.703 0 0 1 .008.099c0 .142-.053.244-.16.304a3.26 3.26 0 0 1-.525.214c-.417.142-.855.286-1.317.434-.462.147-.919.281-1.37.403-.452.122-.886.22-1.302.297a6.189 6.189 0 0 1-1.097.114c-1.695 0-2.93-.421-3.707-1.264-.776-.842-1.165-2.126-1.165-3.852 0-.294.01-.596.03-.906.021-.31.046-.631.077-.966.101-1.015.19-1.977.266-2.886.076-.908.155-1.778.236-2.61h-1.598c-.548 0-.944-.023-1.188-.07-.244-.045-.365-.139-.365-.28 0-.041.05-.15.152-.328.101-.178.23-.391.388-.64.157-.248.328-.515.51-.799.183-.284.358-.55.525-.8a90.9 90.9 0 0 0 .434-.646c.122-.183.198-.295.229-.335h1.08a175.118 175.118 0 0 0 .359-3.243c.035-.345.068-.612.099-.8.03-.187.063-.327.099-.418.035-.092.08-.15.137-.175.055-.026.129-.049.22-.069.457-.091.899-.175 1.325-.251.426-.076.853-.155 1.279-.236a27.399 27.399 0 0 0 2.68-.655l.038-.002.022-.005a.158.158 0 0 1 .061-.008Zm12.363 4.156c1.939 0 3.588.221 4.949.663 1.36.441 2.466 1.043 3.319 1.804a6.714 6.714 0 0 1 1.857 2.695 9.474 9.474 0 0 1 .579 3.334c0 1.513-.254 2.863-.762 4.05-.507 1.188-1.2 2.193-2.078 3.015a8.986 8.986 0 0 1-3.075 1.88 10.782 10.782 0 0 1-3.753.647c-1.432 0-2.688-.233-3.769-.7-1.08-.467-1.987-1.089-2.717-1.865a7.68 7.68 0 0 1-1.645-2.68 9.17 9.17 0 0 1-.548-3.144c0-1.086.178-2.119.533-3.098a8.859 8.859 0 0 1 1.492-2.634 8.532 8.532 0 0 1 2.3-1.95 8.666 8.666 0 0 1 2.953-1.057c.162-.01.243-.046.243-.107 0-.112-.012-.216-.038-.312a1.008 1.008 0 0 1-.038-.251c0-.112.02-.188.061-.229a.19.19 0 0 1 .137-.06Zm19.991-.167c.081 0 .13.013.145.038a.226.226 0 0 1 .023.114c0 .02-.003.05-.008.092a7.11 7.11 0 0 1-.046.274 35.8 35.8 0 0 0-.106.647c-.046.289-.11.692-.19 1.21a15.78 15.78 0 0 1 1.971-.982 13.362 13.362 0 0 1 1.736-.579 10.288 10.288 0 0 1 1.53-.274c.477-.045.924-.068 1.34-.068 1.431 0 2.471.434 3.121 1.302.65.868.974 2.17.974 3.905 0 .244-.005.495-.015.754-.01.258-.03.525-.06.799l-.701 6.547c-.05.426-.081.82-.091 1.18-.01.36-.016.779-.016 1.256 0 .081.003.15.008.205.005.056.008.105.008.145a.242.242 0 0 1-.115.213c-.076.051-.246.117-.51.198l-3.7 1.036c-.111.03-.258.078
104-.441.144-.183.066-.36.1-.533.1a.657.657 0 0 1-.373-.107c-.106-.072-.16-.193-.16-.366v-.091c.061-.548.112-1.013.152-1.393.041-.381.08-.726.115-1.036.035-.31.066-.619.091-.928.025-.31.058-.67.099-1.081l.145-1.462.205-2.109c.05-.517.097-1.045.137-1.583.04-.538.061-1.036.061-1.492a4.87 4.87 0 0 0-.068-.845 1.874 1.874 0 0 0-.244-.67 1.167 1.167 0 0 0-.48-.434c-.203-.102-.461-.152-.776-.152-.234 0-.556.05-.967.152-.411.101-.82.269-1.226.502-.406.234-.766.54-1.08.921-.315.381-.493.85-.533 1.409-.061.75-.117 1.393-.168 1.926-.05.533-.096.984-.137 1.355l-.099.906c-.025.233-.043.431-.053.594-.01.04-.026.152-.046.335a61.142 61.142 0 0 0-.12 1.182l-.025.28c-.025.283-.05.552-.076.806-.025.254-.045.472-.06.655a6.111 6.111 0 0 0-.023.335c0 .08.002.15.007.205.005.056.008.11.008.16 0 .081-.038.15-.114.206-.076.056-.246.119-.51.19l-4.035 1.386c-.112.04-.259.09-.442.152a1.68 1.68 0 0 1-.533.091.657.657 0 0 1-.373-.106c-.106-.072-.16-.193-.16-.366l1.386-15.56c.03-.335.069-.566.114-.693.046-.127.16-.21.343-.251.924-.183 1.873-.368 2.847-.556a24.862 24.862 0 0 0 2.847-.723Zm-15.361 4.23a1.334 1.334 0 0 0-1.822.488l-1.493 2.584-2.584-1.491a1.334 1.334 0 0 0-1.822.488l-.225.39-.066.13a1.333 1.333 0 0 0 .554 1.69l2.584 1.492-1.492 2.585-.066.13a1.333 1.333 0 0 0 .554 1.691l.39.225c.638.368 1.453.15 1.822-.488l1.492-2.585 2.585 1.492c.638.368 1.453.15 1.822-.488l.225-.39a1.333 1.333 0 0 0-.488-1.82l-2.586-1.493 1.494-2.584.066-.13a1.333 1.333 0 0 0-.554-1.691Zm-60.328-1.318a.922.922 0 0 0-1.26.338l-.816 1.413-1.414-.816a.922.922 0 0 0-.923 1.597l1.414.817-.816 1.414a.922.922 0 1 0 1.597.922l.817-1.415 1.414.817a.922.922 0 0 0 .922-1.597l-1.414-.817.817-1.413.055-.113a.922.922 0 0 0-.393-1.147Zm24.297.423a.922.922 0 0 0-1.413 1.185l1.05 1.25-1.251 1.05a.922.922 0 1 0 1.186 1.412l1.25-1.05 1.05 1.252a.922.922 0 0 0 1.413-1.186l-1.05-1.25 1.251-1.05.09-.087a.922.922 0 0 0-1.275-1.325l-1.251 1.049Z"></path></g></svg><!----></a> <a aria-label="learn more about mdsvex" href="https://mdsvex.com/" target="_blank" class="mt-0 w-20 !p-0 text-gray-400 hover:!bg-transparent hover:text-gray-300"><!----><?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 12"><defs><style>.b{fill:currentColor;}</style></defs><path class="b" d="M6.298,10.722h-.316V6.466c-.004-.636-.144-1.109-.419-1.419s-.714-.465-1.315-.465c-.695,0-1.264,.306-1.705,.919-.262,.367-.436,.773-.521,1.218v4.004h-.322V4.382h.322v1.5c.215-.516,.521-.914,.92-1.195s.84-.422,1.324-.422c.531,0,.966,.117,1.304,.352s.56,.617,.665,1.148c.188-.457,.492-.821,.914-1.093s.895-.407,1.418-.407c.684,0,1.192,.193,1.526,.58s.503,.967,.507,1.74v4.137h-.316V6.613c0-.694-.14-1.209-.419-1.542s-.718-.497-1.315-.489c-.77,.012-1.379,.318-1.828,.919-.258,.348-.398,.683-.422,1.007v4.215Z"/><path class="b" d="M12.228,7.488c0-1.012,.213-1.802,.639-2.37s1.01-.853,1.752-.853c.477,0,.897,.107,1.263,.322s.661,.535,.888,.961V1.722h.316V10.722h-.316v-1.014c-.215,.359-.51,.638-.885,.835s-.801,.296-1.277,.296c-.734,0-1.314-.291-1.74-.873s-.639-1.381-.639-2.396v-.082Zm.328,.123c0,.898,.178,1.608,.533,2.13s.859,.782,1.512,.782c.523,0,.971-.116,1.342-.349s.646-.573,.826-1.022v-2.971c-.363-1.066-1.082-1.6-2.156-1.6-.648,0-1.153,.256-1.515,.768s-.542,1.266-.542,2.262Z"/><path class="b" d="M22.997,9.169c0-.77-.656-1.293-1.969-1.57-.789-.168-1.338-.384-1.646-.647s-.463-.626-.463-1.087c0-.465,.196-.848,.589-1.148s.903-.451,1.532-.451c.684,0,1.232,.163,1.646,.489s.621,.767,.621,1.321h-.322c0-.426-.18-.781-.539-1.066s-.828-.428-1.406-.428c-.555,0-.994,.121-1.318,.363s-.486,.545-.486,.908c0,.285,.061,.509,.182,.671s.318,.309,.592,.439,.672,.257,1.195,.378,.938,.264,1.242,.428,.525,.358,.662,.583,.205,.499,.205,.823c0,.5-.205,.902-.615,1.207s-.947,.457-1.611,.457c-.711,0-1.284-.161-1.72-.483s-.653-.737-.653-1.245h.316c.031,.445,.228,.792,.589,1.04s.851,.372,1.468,.372c.566,0,1.026-.132,1.38-.396s.53-.583,.53-.958Z"/><path class="b" d="M26.923,10.218l2.279-5.836h.34l-2.467,6.34h-.311l-2.461-6.34h.34l2.279,5.836Z"/><path class="b" d="M32.993,10.839c-.512,0-.981-.138-1.409-.413s-.763-.653-1.005-1.134-.363-1.014-.363-1.6v-.264c0-.586,.117-1.123,.352-1.611s.557-.869,.967-1.143,.857-.41,1.342-.41c.707,0,1.285,.252,1.734,.756s.674,1.166,.674,1.986v.334h-4.752v.345c0,.515,.108,.991,.325,1.43,.217,.439,.516,.783,.896,1.033,.381,.25,.794,.374,1.239,.374,.426,0,.788-.071,1.087-.212s.563-.36,.794-.655l.223,.158c-.473,.684-1.174,1.025-2.104,1.025Zm-.11
1047-6.258c-.617,0-1.141,.229-1.57,.688s-.682,1.044-.756,1.755h4.418v-.076c0-.43-.091-.829-.272-1.198s-.432-.656-.75-.861-.675-.308-1.069-.308Z"/><path class="b" d="M38.618,7.195l2.021-2.812h.398l-2.227,3.088,2.344,3.252h-.393l-2.15-2.977-2.145,2.977h-.393l2.344-3.252-2.227-3.088h.398l2.027,2.812Z"/></svg><!----></a></div></nav><!----></aside><!--]--> <div style="scrollbar-gutter: auto;" id="page" class="shrink-0 flex-1 overflow-x-hidden flex flex-col"><!--[!--><!--]--> <main id="page-content" class="flex-auto "><!----><div><main class="#page-content pb-24"><!----><!--[!--><!----><div class="max-w-4xl prose prose-invert mx-auto p-6 md:p-10"><!----><!----> <div class="flex flex-col items-center pb-12"><div class="w-[80px] sm:w-[140px]"><svg fill="#71c4f9" id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.33 302.75"><rect x="174.93" y="15.81" width="87.26" height="87.26"></rect><rect x="506.44" y="400.21" width="87.26" height="87.26" transform="translate(-426.56 41.87) rotate(-30)"></rect><rect x="453.54" y="492.15" width="87.26" height="87.26" transform="translate(-493.75 405.82) rotate(-60)"></rect><rect x="69.14" y="199.68" width="87.26" height="87.26"></rect><rect x="294.31" y="400.53" width="87.26" height="87.26" transform="translate(-455.14 -64.15) rotate(-30)"></rect><rect x="347.2" y="308.6" width="87.26" height="87.26" transform="translate(-387.96 221.95) rotate(-60)"></rect></svg></div> <h1 class="mb-4 mt-4">Using D3 with Svelte 🏆</h1></div><!----> <aside class="alert variant-filled-surface mb-5 pb-0 pt-5 font-medium"><!----><!----><p>These tutorial series requires a basic understanding of <code>Svelte/kit</code>, <code>D3.js</code> and <code>SVGs</code>.</p><!----><!----></aside><!----> <h2 id="getting-started-with-data-visualizations-using-svelte-and-d3">Getting Started with Data Visualizations using Svelte and D3<a aria-hidden="true" tabindex="-1" href="#getting-started-with-data-visualizations-using-svelte-and-d3" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h2> <p>In this tutorial series, you will learn how to create visually appealing charts, graphs, animations and more using the powerful combination of Svelte and D3!. Get started by following along the tutorials.</p> <p>Here is an example visualization you can create using the power of Svelte 5 and D3js.</p> <div class="chart"><svg width="500" height="380"><g class="bars"><!--[--><rect x="27" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="73" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="119" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="165" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="211" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="257" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="303" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="349" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="395" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><rect x="441" width="41.4" y="330" height="0" fill="#fffbeb" stroke="none"></rect><!--]--></g><g class="axis y-axis"><!--[--><g class="tick tick-0 svelte-1onpud7" transform="translate(0, 330)"><line x2="100%" class="svelte-1onpud7"></line><text y="-4" class="svelte-1onpud7">0 </text></g><g class="tick tick-5 svelte-1onpud7" transform="translate(0, 252.5)"><line x2="100%" class="svelte-1onpud7"></line><text y="-4" class="svelte-1onpud7">5 </text></g><g class="tick tick-10 svelte-1onpud7" transform="translate(0, 175)"><line x2="100%" class="svelte-1onpud7"></line><text y="-4" class="svelte-1onpud7">10 </text></g><g class="tick tick-15 svelte-1onpud7" transform="translate(0, 97.5)"><line x2="100%" class="svelte-1onpud7"></line><text y="-4" class="svelte-1onpud7">15 </text></g><g class="tick tick-20 svelte-1onpud7" transform="translate(0, 20)"><line x2="100%" class="svelte-1onpud7"></line><text y="-4" class="svelte-1onpud7">20  per 1,000 population</text></g><!--]--></g><g class="axis x-axis svelte-1onpud7"><!--[--><g class="tick svelte-1onpud7" transform="translate(25, 350)"><text x="23" y="-4" class="svelte-1onpud7">1990</text></g><g class="tick svelte-1onpud7" transform="translate(71, 350)"><text x="23" y="-4" class="svelte-1onpud7">1995</text></g><g class="tick svelte-1onpud7" transform="translate(117, 350)"><text x="23" y="-4" class="svelte-1onpud7">2000</text></g><g class="tick svelte-1onpud7" transform="translate(163, 350)"><text x="23" y="-4" class="svelte-1onpud7">2005</text></g><g class="tick svelte-1onpud7" transform="translate(209, 350)"><text x="23" y="-4" class="svelte-1onpud7">2010</text></g><g class="tick svelte-1onpud7" transform="translate(255, 350)"><text x="23" y="-4" class="svelte-1onpud7">2015</text></g><g class="tick svelte-1onpud7" transform="translate(301, 350)"><text x="23" y="-4" class="svelte-1onpud7">2020</text></g><g class="tick svelte-1onpud7" transform="translate(347, 350)"><text x="23" y="-4" class="svelte-1onpud7">2025</text></g><g class="tick svelte-1onpud7" transform="translate(393, 350)"><text x="23" y="-4" class="svelte-1onpud7">2030</text></g><g class="tick svelte-1onpud7" transform="translate(439, 350)"><text x="23" y="-4" class="svelte-1onpud7">2035</text></g><!--]--></g></svg></div><!----> <h2 id="why-svelte-and-d3">Why Svelte and D3?<a aria-hidden="true" tabindex="-1" href="#why-svelte-and-d3" aria-label="Copy link to this paragraph">
104<img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h2> <p>While it is perfectly fine to create visualizations using D3.js without using any framework <code>Svelte</code> makes it easier to create complex visualizations with <code>D3</code>.</p> <p>In its simplest form, the following code written in classical D3 way</p> <pre class="language-svelte"><!----><code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
105  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span> select<span class="token punctuation">,</span> selectAll <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'d3-selection'</span><span class="token punctuation">;</span>
106  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span> onMount <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span>
107
108  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
109
110  <span class="token function">onMount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
111    <span class="token keyword">let</span> svg <span class="token operator">=</span> <span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'#chart-container'</span><span class="token punctuation">)</span>
112      <span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span>
113      <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'viewBox'</span><span class="token punctuation">,</span> <span class="token string">'0 0 600 60'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
114
115    svg
116      <span class="token punctuation">.</span><span class="token function">selectAll</span><span class="token punctuation">(</span><span class="token string">'circle'</span><span class="token punctuation">)</span>
117      <span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
118      <span class="token punctuation">.</span><span class="token function">enter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
119      <span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'circle'</span><span class="token punctuation">)</span>
120      <span class="token punctuation">.</span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string">'fill'</span><span class="token punctuation">,</span> <span class="token string">'white'</span><span class="token punctuation">)</span>
121      <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'cx'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> d <span class="token operator">*</span> <span class="token number">8</span><span class="token punctuation">)</span>
122      <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'cy'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span>
123      <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'r'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
124  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
125</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
126
127<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart-container<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code><!----></pre> <p>which creates the following example:</p> <div id="chart-container"></div><!----> <p>written in Svelte way becomes:</p> <pre class="language-svelte"><!----><code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
128  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
129</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
130
131<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
132  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0 0 600 60<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
133    <span class="token each"><span class="token punctuation">&#123;</span><span class="token keyword">#each</span> <span class="token language-javascript">data </span><span class="token keyword">as</span> <span class="token language-javascript">d<span class="token punctuation">&#125;</span></span></span>
134      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>circle</span> <span class="token attr-name">cx=</span><span class="token language-javascript"><span class="token punctuation">&#123;</span>d <span class="token operator">*</span> <span class="token number">8</span><span class="token punctuation">&#125;</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>
134white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
135    <span class="token each"><span class="token punctuation">&#123;</span><span class="token keyword">/each</span><span class="token punctuation">&#125;</span></span>
136  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
137<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code><!----></pre> <p>Here, data binding and creating the iteration is achieved by using the Svelte <code>{#each}</code> blocks.</p> <p>In the following tutorials, we will combine the powers of Svelte and D3 to create various types of interactive charts starting from the basic bar, line and scatter charts and gradually adding animations or interactive elements and then moving to different types of custom data visualizations.</p> <p>From D3 we will be using shape functions such as <code>d3.line</code>, <code>d3.pie</code> etc as well as <code>scales</code> and <code>interpolators</code>. For interactivity and animations, we’ll leverage Svelte features, including <code>transitions</code> and <code>tween</code> functions. For responsiveness and updating the charts, we will use reactivity of Svelte to make our chart elements reactive to changes in the data as well is the page dimensions.</p> <p>Join our <a href="https://discord.gg/qcR5zTbJzg" aria-label="Join our Discord to share your charts, ask questions, or collaborate with fellow developers!">Discord</a> to share your charts, ask questions, or collaborate with fellow developers!</p><!----><!----></div><!----><!--]--><!----></main></div><!----></main> <!--[!--><!--]--></div> <!--[--><aside id="sidebar-right" class="flex-none overflow-x-hidden overflow-y-auto w-auto"><!----><div class="hidden md:block w-56 p-4"><!--[!--><!--]--><!----></div><!----></aside><!--]--></div> <!--[!--><!--]--></div><!----><!----><!--]--> <!--[!--><!--]--><!--]-->
138			
139			
139<script>
140				{
141					__sveltekit_a54f7e = {
142						base: new URL(".", location).pathname.slice(0, -1),
143						assets: "https://datavisualizationwithsvelte.com"
144					};
145
146					const element = document.currentScript.parentElement;
147
148					const data = [{"type":"data","data":{user:null},"uses":{}},{"type":"data","data":{user:null},"uses":{}}];
149
150					Promise.all([
151						import("https://datavisualizationwithsvelte.com/_app/immutable/entry/start.DGEjfJ--.js"),
152						import("https://datavisualizationwithsvelte.com/_app/immutable/entry/app.CBpG8PeO.js")
153					]).then(([kit, app]) => {
154						kit.start(app, element, {
155							node_ids: [0, 3],
156							data,
157							form: null,
158							error: null
159						});
160					});
161				}
162			</script>
162
163		
164    </div>
165  </body>
166</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.