1<!DOCTYPE html> 2<html lang="en-US" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Getting started | D3 by Observable</title> 7 <meta name="description" content="The JavaScript library for bespoke data visualization"> 8 <meta name="generator" content="VitePress v1.4.0"> 9 <link rel="preload stylesheet" href="/assets/style.CeCMf97_.css" as="style"> 10 11
11<script type="module" src="/assets/app.Tx2koTBv.js"></script>
11 12 <link rel="modulepreload" href="/assets/chunks/theme.Dmsp-nSF.js"> 13 <link rel="modulepreload" href="/assets/chunks/framework.BBlBmbNy.js"> 14 <link rel="modulepreload" href="/assets/getting-started.md.BEUy3yNO.lean.js"> 15 <link rel="apple-touch-icon" href="/logo.png"> 16 <link rel="icon" type="image/png" href="/logo.png"> 17
17<script async defer src="https://static.observablehq.com/assets/components/observable-made-by.js"></script>
17 18
18<script id="check-dark-mode">window.matchMedia("(prefers-color-scheme: dark)").matches&&document.documentElement.classList.add("dark");</script>
18 19
19<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19 20 </head> 21 <body> 22 <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/" data-v-ab179fa1><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-8426fc1a><!--]--><span data-v-ab179fa1>D3</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><!----><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--]--></div></div></div><!--[--><!--[--><!--[--><div style="display:flex;gap:1rem;"><!--[--><a target="_blank" title="7.9.0 release notes" href="https://github.com/d3/d3/releases" data-v-4244fc58><span data-v-4244fc58>7.9.0</span></a><a target="_blank" data-decoration="â " title="112,966 GitHub stars" href="https://github.com/d3/d3" data-v-4244fc58><span data-v-4244fc58>GitHubï¸ 113.0k</span></a><a class="mobile" target="_blank" title="112,966 GitHub stars" href="https://github.com/d3/d3" data-v-4244fc58><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none" data-v-4244fc58><path d="M19.625 5.60534C18.7083 4.03477 17.4649 2.79135 15.8945 1.87479C14.3238 0.958185 12.6091 0.5 10.7492 0.5C8.88947 0.5 7.17422 0.958325 5.60388 1.87479C4.0333 2.7913 2.78997 4.03477 1.87332 5.60534C0.956814 7.17587 0.498535 8.89089 0.498535 10.7504C0.498535 12.984 1.15021 14.9926 2.4539 16.7766C3.75744 18.5607 5.44142 19.7952 7.50571 20.4803C7.746 20.5249 7.92388 20.4936 8.03954 20.387C8.15524 20.2804 8.21302 20.1467 8.21302 19.9868C8.21302 19.9601 8.21073 19.7199 8.20629 19.266C8.20171 18.8122 8.19956 18.4162 8.19956 18.0783L7.89256 18.1315C7.69682 18.1673 7.44989 18.1825 7.15178 18.1782C6.8538 18.174 6.54446 18.1428 6.22419 18.0847C5.90377 18.0272 5.60575 17.8937 5.32988 17.6846C5.05416 17.4755 4.85842 17.2018 4.74272 16.8639L4.60925 16.5568C4.52029 16.3523 4.38023 16.1251 4.18888 15.8761C3.99754 15.6269 3.80405 15.458 3.60831 15.369L3.51486 15.3021C3.45259 15.2577 3.39481 15.204 3.34138 15.1418C3.28799 15.0796 3.24802 15.0173 3.22132 14.955C3.19458 14.8926 3.21674 14.8414 3.28804 14.8012C3.35933 14.761 3.48817 14.7416 3.67512 14.7416L3.94196 14.7814C4.11993 14.8171 4.34007 14.9236 4.60266 15.1017C4.86511 15.2796 5.08085 15.5109 5.24994 15.7956C5.4547 16.1605 5.7014 16.4385 5.99072 16.6299C6.27982 16.8212 6.5713 16.9167 6.86488 16.9167C7.15846 16.9167 7.41203 16.8945 7.62567 16.8502C7.83908 16.8057 8.0393 16.7388 8.22625 16.6499C8.30633 16.0535 8.52437 15.5953 8.88017 15.275C8.37304 15.2217 7.9171 15.1414 7.51212 15.0347C7.10736 14.9278 6.6891 14.7544 6.25761 14.5139C5.82589 14.2738 5.46774 13.9756 5.18309 13.6198C4.89839 13.2639 4.66474 12.7966 4.48247 12.2183C4.3001 11.6399 4.20889 10.9726 4.20889 10.2163C4.20889 9.13941 4.56044 8.22304 5.26341 7.46665C4.93411 6.65705 4.96519 5.74947 5.35676 4.744C5.61482 4.66382 5.9975 4.72399 6.50463 4.92412C7.01186 5.12434 7.38323 5.29587 7.61912 5.43808C7.85502 5.58024 8.04402 5.70071 8.18642 5.79842C9.01411 5.56715 9.86825 5.45149 10.7491 5.45149C11.6299 5.45149 12.4843 5.56715 13.312 5.79842L13.8192 5.47823C14.166 5.26459 14.5756 5.06881 15.0469 4.89083C15.5185 4.71295 15.8791 4.66396 16.1284 4.74414C16.5286 5.74966 16.5643 6.65719 16.2349 7.46679C16.9378 8.22318 17.2895 9.13978 17.2895 10.2164C17.2895 10.9727 17.198 11.6421 17.0159 12.225C16.8336 12.808 16.5979 13.2749 16.3088 13.6265C16.0194
2213.9781 15.659 14.274 15.2275 14.5141C14.7959 14.7544 14.3775 14.9278 13.9728 15.0347C13.5678 15.1415 13.1119 15.2219 12.6047 15.2752C13.0673 15.6755 13.2986 16.3073 13.2986 17.1704V19.9864C13.2986 20.1464 13.3542 20.2799 13.4656 20.3867C13.5768 20.4932 13.7524 20.5246 13.9927 20.4799C16.0573 19.7949 17.7413 18.5603 19.0448 16.7762C20.3481 14.9922 21 12.9837 21 10.75C20.9996 8.89075 20.541 7.17587 19.625 5.60534Z" fill="currentColor" data-v-4244fc58></path></svg></a><!--]--><observable-made-by></observable-made-by></div><!--]--><!--]--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Introduction</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/what-is-d3" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is D3?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/getting-started" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/api" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>API index</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link vp-external-link-icon link" href="https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=page-nav&utm_campaign=try-observable" target="_blank" rel="external" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Examples</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Visualization</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-axis" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-axis</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-chord" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-chord</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-chord/chord" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Chords</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-chord/ribbon" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Ribbons</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-color" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-color</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-interpolate" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-interpolate</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-interpolate/value" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Value interpolation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-interpolate/color" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Color interpolation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-interpolate/transform" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Transform interpolation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-interpolate/zoom" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Zoom interpolation</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-contour" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-contour</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-contour/contour" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Contour polygons</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-contour/density" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Density estimation</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-delaunay" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-delaunay</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-delaunay/delaunay" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Delaunay triangulations</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-delaunay/voronoi" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Voronoi diagrams</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-force</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/simulation" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Force simulations</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/center" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Center force</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/collide" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Collide force</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/link" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Link force</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/many-body" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Many-body force</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-force/position" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Position forces</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-geo</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/path" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Paths</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-2 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/projection" data-v-b7550ba0><!--[--><h4 class="text" data-v-b7550ba0>Projections</h4><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-3 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/azimuthal" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Azimuthal projections</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/conic" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Conic projections</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/cylindrical" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Cylindrical projections</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/stream" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Streams</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/shape" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Spherical shapes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-geo/math" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Spherical math</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-hierarchy</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/hierarchy" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Hierarchies</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/stratify" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Stratify</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/tree" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Tree</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/cluster" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Cluster</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/partition" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Partition</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/pack" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Pack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-hierarchy/treemap" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Treemap</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-path" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-path</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-polygon" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-polygon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-quadtree" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-quadtree</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-scale</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/linear" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Linear scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/time" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Time scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/pow" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Pow scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/log" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Log scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/symlog" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Symlog scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/ordinal" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Ordinal scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/band" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Band scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/point" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Point scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/sequential" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Sequential scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/diverging" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Diverging scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/quantile" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Quantile scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/quantize" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Quantize scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale/threshold" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Threshold scales</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale-chromatic" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-scale-chromatic</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale-chromatic/categorical" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Categorical schemes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale-chromatic/cyclical" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Cyclical schemes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale-chromatic/diverging" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Diverging schemes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-scale-chromatic/sequential" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Sequential schemes</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-selection</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/selecting" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Selecting elements</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/modifying" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Modifying elements</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/joining" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Joining data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/events" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Handling events</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/control-flow" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Control flow</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/locals" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Local variables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-selection/namespaces" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Namespaces</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-shape</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/arc" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Arcs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/area" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Areas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/curve" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Curves</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/line" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Lines</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/link" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Links</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/pie" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Pies</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/stack" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Stacks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/symbol" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Symbols</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/radial-area" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Radial areas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/radial-line" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Radial lines</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-shape/radial-link" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Radial links</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Animation</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-ease" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-ease</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-timer" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-timer</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-transition" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-transition</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-transition/selecting" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Selecting elements</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-transition/modifying" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Modifying elements</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-transition/timing" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Timing</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-transition/control-flow" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Control flow</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Interaction</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-brush" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-brush</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-dispatch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-dispatch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-drag" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-drag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-zoom" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-zoom</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Data</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><section class="VPSidebarItem level-1 collapsible collapsed is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array" data-v-b7550ba0><!--[-->
22<h3 class="text" data-v-b7550ba0>d3-array</h3><!--]--></a><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/add" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Adding numbers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/bin" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Binning data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/bisect" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Bisecting data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/blur" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Blurring data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/group" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Grouping data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/intern" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Interning values</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/sets" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Set operations</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/sort" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Sorting data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/summarize" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Summarizing data</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/ticks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Ticks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-array/transform" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Transforming data</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-dsv" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-dsv</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-fetch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-fetch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-format" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-format</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-random" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-random</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-time" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>
22d3-time</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/d3-time-format" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>d3-time-format</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _getting-started" data-v-39a288b8><div><h1 id="getting-started" tabindex="-1">Getting started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting started"">â</a></h1><p>D3 works in any JavaScript environment.</p><h2 id="try-d3-online" tabindex="-1">Try D3 online <a class="header-anchor" href="#try-d3-online" aria-label="Permalink to "Try D3 online"">â</a></h2><p>The fastest way to get started (and get help) with D3 is on <a href="https://observablehq.com" target="_blank" rel="external">Observable</a>! D3 is available by default in notebooks as part of Observableâs standard library. To create something with D3, return the generated DOM element from a cell. Here is a blank chart to get you started:</p><div></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span> 23<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Declare the chart dimensions and margins.</span></span> 24<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 25<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 26<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 27<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 28<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 29<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 30<span class="line"></span> 31<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Declare the x (horizontal position) scale.</span></span> 32<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleUtc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2023-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2024-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)])</span></span> 34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 35<span class="line"></span> 36<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Declare the y (vertical position) scale.</span></span> 37<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span> 39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 40<span class="line"></span> 41<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">
41 // Create the SVG container.</span></span> 42<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> svg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"svg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"width"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width)</span></span> 44<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"height"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height);</span></span> 45<span class="line"></span> 46<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Add the x-axis.</span></span> 47<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 48<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(0,${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 49<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x));</span></span> 50<span class="line"></span> 51<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Add the y-axis.</span></span> 52<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 53<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 54<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y));</span></span> 55<span class="line"></span> 56<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Return the SVG element.</span></span> 57<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span> 58<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>As a more complete example, try one of these starter templates:</p><ul><li><a href="https://observablehq.com/@d3/area-chart/2" target="_blank" rel="external">Area chart</a></li><li><a href="https://observablehq.com/@d3/bar-chart/2" target="_blank" rel="external">
58Bar chart</a></li><li><a href="https://observablehq.com/@d3/donut-chart/2" target="_blank" rel="external">Donut chart</a></li><li><a href="https://observablehq.com/@d3/histogram/2" target="_blank" rel="external">Histogram</a></li><li><a href="https://observablehq.com/@d3/line-chart/2" target="_blank" rel="external">Line chart</a></li></ul><p>See the <a href="https://observablehq.com/@d3/gallery" target="_blank" rel="external">D3 gallery</a> for more forkable examples.</p><p>Observable includes a few D3 snippets when you click <strong>+</strong> to add a cell (type âd3â when the cell menu is open to filter), as well as convenient <a href="https://observablehq.com/@observablehq/sample-datasets" target="_blank" rel="external">sample datasets</a> to try out D3 features. Or upload a CSV or JSON file to start playing with your data. You can also fork any of the <a href="https://observablehq.com/@d3?tab=notebooks" target="_blank" rel="external">hundreds of notebooks</a> weâve published for a head start.</p><p>Observable is free for public use. Sign up for a <a href="https://observablehq.com/pricing" target="_blank" rel="external">Pro account</a> to connect to private databases, collaborate on private notebooks, and more.</p><h2 id="d3-in-vanilla-html" tabindex="-1">D3 in vanilla HTML <a class="header-anchor" href="#d3-in-vanilla-html" aria-label="Permalink to "D3 in vanilla HTML"">â</a></h2><p>In vanilla HTML, you can load D3 from a CDN such as jsDelivr or you can download it locally. We recommend using the CDN-hosted ES module bundle. But for those who need it, we also provide a UMD bundle that exports the <code>d3</code> global when loaded as a plain script.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-1IJ8q" id="tab-DcTXekR" checked><label data-title="ESM + CDN" for="tab-DcTXekR">ESM + CDN</label><input type="radio" name="group-1IJ8q" id="tab-0R3Ti1o"><label data-title="UMD + CDN" for="tab-0R3Ti1o">UMD + CDN</label><input type="radio" name="group-1IJ8q" id="tab-AWmGZ_6"><label data-title="UMD + local" for="tab-AWmGZ_6">UMD + local</label></div><div class="blocks"><div class="language-html vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 59<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"container"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 60<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 61<span class="line"></span> 62<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "https://cdn.jsdelivr.net/npm/d3@7/+esm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 63<span class="line"></span> 64<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the chart dimensions and margins.</span></span> 65<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 66<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 67<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 68<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 69<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 70<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 71<span class="line"></span> 72<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the x (horizontal position) scale.</span></span> 73<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleUtc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2023-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2024-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)])</span></span> 75<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 76<span class="line"></span> 77<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the y (vertical position) scale.</span></span> 78<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 79<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span> 80<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 81<span class="line"></span> 82<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">
82// Create the SVG container.</span></span> 83<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> svg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"svg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"width"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width)</span></span> 85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"height"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height);</span></span> 86<span class="line"></span> 87<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the x-axis.</span></span> 88<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 89<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(0,${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 90<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x));</span></span> 91<span class="line"></span> 92<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the y-axis.</span></span> 93<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 94<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 95<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y));</span></span> 96<span class="line"></span> 97<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Append the SVG element.</span></span> 98<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
98container.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span> 99<span class="line"></span> 100<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 101<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"container"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 102<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://cdn.jsdelivr.net/npm/d3@7"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 103<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 104<span class="line"></span> 105<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the chart dimensions and margins.</span></span> 106<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 107<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 108<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 109<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 110<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 111<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 112<span class="line"></span> 113<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the x (horizontal position) scale.</span></span> 114<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleUtc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 115<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2023-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2024-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)])</span></span> 116<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 117<span class="line"></span> 118<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the y (vertical position) scale.</span></span> 119<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 120<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span> 121<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 122<span class="line"></span> 123<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">
123// Create the SVG container.</span></span> 124<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> svg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"svg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 125<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"width"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width)</span></span> 126<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"height"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height);</span></span> 127<span class="line"></span> 128<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the x-axis.</span></span> 129<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 130<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(0,${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 131<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x));</span></span> 132<span class="line"></span> 133<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the y-axis.</span></span> 134<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 135<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 136<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y));</span></span> 137<span class="line"></span> 138<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Append the SVG element.</span></span> 139<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
139container.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span> 140<span class="line"></span> 141<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 142<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"container"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 143<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"d3.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 144<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 145<span class="line"></span> 146<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the chart dimensions and margins.</span></span> 147<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 148<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 149<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 150<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 151<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 152<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 153<span class="line"></span> 154<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the x (horizontal position) scale.</span></span> 155<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleUtc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 156<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2023-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2024-01-01"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)])</span></span> 157<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 158<span class="line"></span> 159<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Declare the y (vertical position) scale.</span></span> 160<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> 161<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">domain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span> 162<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 163<span class="line"></span> 164<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">
164// Create the SVG container.</span></span> 165<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> svg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"svg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 166<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"width"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width)</span></span> 167<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"height"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height);</span></span> 168<span class="line"></span> 169<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the x-axis.</span></span> 170<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 171<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(0,${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 172<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x));</span></span> 173<span class="line"></span> 174<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add the y-axis.</span></span> 175<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 176<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">attr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"transform"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> 177<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y));</span></span> 178<span class="line"></span> 179<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Append the SVG element.</span></span> 180<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
180container.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(svg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span> 181<span class="line"></span> 182<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><p>You can also import and destructure individual D3 modules like so:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 183<span class="line"></span> 184<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {forceSimulation, forceCollide, forceX} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "https://cdn.jsdelivr.net/npm/d3-force@3/+esm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 185<span class="line"></span> 186<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nodes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{}, {}];</span></span> 187<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> simulation</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> forceSimulation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(nodes)</span></span> 188<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">force</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"x"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forceX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span> 189<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">force</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"collide"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forceCollide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))</span></span> 190<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tick"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
190, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(nodes[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].x));</span></span> 191<span class="line"></span> 192<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>If youâd prefer to run D3 locally (or offline), you can download the UMD bundles of D3 here:</p><ul><li><a href="./d3.v7.js" download>d3.v7.js</a></li><li><a href="./d3.v7.min.js" download>d3.v7.min.js</a></li></ul><p>Then, create an <code>index.html</code> file as shown above in the <strong>UMD + local</strong> tab. Use the non-minified bundle for debugging, and the minified bundle for faster performance in production.</p><h2 id="installing-from-npm" tabindex="-1">Installing from npm <a class="header-anchor" href="#installing-from-npm" aria-label="Permalink to "Installing from npm"">â</a></h2><p>If youâre developing a web application using Node, you can install D3 via yarn, npm, pnpm, or your preferred package manager.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-mxYFo" id="tab-vYYWzo6" checked><label data-title="yarn" for="tab-vYYWzo6">yarn</label><input type="radio" name="group-mxYFo" id="tab-WQWrdX2"><label data-title="npm" for="tab-WQWrdX2">npm</label><input type="radio" name="group-mxYFo" id="tab-aS8A1Mf"><label data-title="pnpm" for="tab-aS8A1Mf">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> d3</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> d3</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> d3</span></span></code></pre></div></div></div><p>You can then load D3 into your app as:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "d3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>You can instead import specific symbols if you prefer:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
192<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {select, selectAll} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "d3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Alternatively you can install and import from D3 submodules:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {mean, median} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "d3-array"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>TypeScript declarations are available via <a href="https://github.com/DefinitelyTyped/DefinitelyTyped" target="_blank" rel="external">DefinitelyTyped</a>.</p><h2 id="d3-in-react" tabindex="-1">D3 in React <a class="header-anchor" href="#d3-in-react" aria-label="Permalink to "D3 in React"">â</a></h2><p>Most D3 modules (including <a href="./d3-scale">d3-scale</a>, <a href="./d3-array">d3-array</a>, <a href="./d3-interpolate">d3-interpolate</a>, and <a href="./d3-format">d3-format</a>) donât interact with the DOM, so there is no difference when using them in React. You can use them in JSX for purely declarative visualization, such as the line plot below.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-y4Yed" id="tab-csyfER3" checked><label data-title="LinePlot.jsx" for="tab-csyfER3">LinePlot.jsx</label></div><div class="blocks"><div class="language-jsx vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "d3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 193<span class="line"></span> 194<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LinePlot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> 195<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 196<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 197<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 198<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 199<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 200<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 201<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span> 202<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}) {</span></span> 203<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, data.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 204<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data), [height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 205<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i), y);</span></span> 206<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span> 207<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{width} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{height}></span></span> 208<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"none"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> strokeWidth</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1.5"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data)} /></span></span> 209<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"white"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> strokeWidth</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1.5"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 210<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {data.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (<</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{i} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cx</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cy</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">r</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2.5"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> />))}</span></span> 211<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 212<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 213<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span> 214<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><p style="margin-top:-1em;"><a href="https://codesandbox.io/s/d3-react-ssr-5g1bm0?file=/src/LinePlot.jsx" style="font-size:smaller;" target="_blank">
214Sandbox âï¸</a></p><p>D3 modules that operate on <a href="./d3-selection/selecting">selections</a> (including <a href="./d3-selection">d3-selection</a>, <a href="./d3-transition">d3-transition</a>, and <a href="./d3-axis">d3-axis</a>) do manipulate the DOM, which competes with Reactâs virtual DOM. In those cases, you can attach a ref to an element and pass it to D3 in a useEffect hook.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-fGB2z" id="tab-XVs0gtO" checked><label data-title="LinePlot.jsx" for="tab-XVs0gtO">LinePlot.jsx</label></div><div class="blocks"><div class="language-jsx vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "d3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 215<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {useRef, useEffect} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "react"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 216<span class="line"></span> 217<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LinePlot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> 218<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 219<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 220<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 221<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 222<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginRight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 223<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginBottom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> 224<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> marginLeft</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span></span> 225<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}) {</span></span> 226<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gx</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRef</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span> 227<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gy</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRef</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span> 228<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, data.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 229<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> y</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data), [height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 230<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i), y);</span></span> 231<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useEffect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gx.current).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x)), [gx, x]);
231</span></span> 232<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useEffect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gy.current).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y)), [gy, y]);</span></span> 233<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span> 234<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{width} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{height}></span></span> 235<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{gx} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">transform</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(0,${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} /></span></span> 236<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{gy} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">transform</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`translate(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} /></span></span> 237<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"none"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> strokeWidth</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1.5"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data)} /></span></span> 238<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"white"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> strokeWidth</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1.5"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 239<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {data.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (<</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{i} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cx</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cy</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">r</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2.5"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> />))}</span></span> 240<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 241<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 242<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span> 243<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><p style="margin-top:-1em;"><a href="https://codesandbox.io/s/d3-react-useeffect-5lp0x6?file=/src/LinePlot.jsx" style="font-size:smaller;" target="_blank">
243Sandbox âï¸</a></p><p>For more guidance using D3 in React, see <a href="https://2019.wattenberger.com/blog/react-and-d3" target="_blank" rel="external">Amelia Wattenbergerâs post</a>.</p><h2 id="d3-in-svelte" tabindex="-1">D3 in Svelte <a class="header-anchor" href="#d3-in-svelte" aria-label="Permalink to "D3 in Svelte"">â</a></h2><p>As <a href="#d3-in-react">with React</a>, you can use Svelte exclusively for rendering if you like, and only use D3 modules that donât manipulate the DOM. Here is a line plot of an array of numbers that uses <a href="./d3-shape">d3-shape</a> and <a href="./d3-scale-chromatic">d3-scale</a>.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Cnwt6" id="tab-VxJcH0F" checked><label data-title="LinePlot.svelte" for="tab-VxJcH0F">LinePlot.svelte</label></div><div class="blocks"><div class="language-svelte vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">svelte</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 244<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'd3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 245<span class="line"></span> 246<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data;</span></span> 247<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 248<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 249<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 250<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 251<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 252<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 253<span class="line"></span> 254<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, data.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 255<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: y </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data), [height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 256<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: line </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i), y);</span></span> 257<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 258<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={width} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={height}></span></span> 259<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"none"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data)} /></span></span> 260<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"white"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 261<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {#</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">each</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d, i}</span></span> 262<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={i} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cx</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> 263<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">each</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> 264<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 265<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><p style="margin-top:-1em;"><a href="https://svelte.dev/repl/ece91c0d8b204d5ea970dbbc0d6783aa?version=3.59.1" style="font-size:smaller;" target="_blank">
265REPL âï¸</a></p><p>Svelteâs reactive statements (<code>$:</code>) pair nicely with D3 <a href="./d3-selection/joining">data joins</a> for efficient updates. Below, we use them to render dynamic axes as the data changes.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-d-c-6" id="tab-3aLtiNW" checked><label data-title="LinePlot.svelte" for="tab-3aLtiNW">LinePlot.svelte</label></div><div class="blocks"><div class="language-svelte vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">svelte</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 266<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'd3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 267<span class="line"></span> 268<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data;</span></span> 269<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 640</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 270<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 271<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 272<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 273<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 274<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> 275<span class="line"></span> 276<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">
276 let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> gx;</span></span> 277<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> gy;</span></span> 278<span class="line"></span> 279<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, data.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [marginLeft, width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginRight]);</span></span> 280<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: y </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scaleLinear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data), [height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom, marginTop]);</span></span> 281<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: line </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i), y);</span></span> 282<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gy).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(y));</span></span> 283<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gx).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d3.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">axisBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x));
283</span></span> 284<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 285<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={width} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={height}></span></span> 286<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> bind</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={gx} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"translate(0,{</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> marginBottom</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> 287<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> bind</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={gy} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"translate({</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">marginLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">},0)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> 288<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"none"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">line</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data)} /></span></span> 289<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"white"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stroke-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 290<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {#</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">each</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> d, i}</span></span> 291<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={i} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cx</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">={</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(d)} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> 292<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">each</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> 293<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">g</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> 294<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><p style="margin-top:-1em;"><a href="https://svelte.dev/playground/8722c32f4e1a44a98e3a3fc8a095b2d7?version=5.16.0" style="font-size:smaller;" target="_blank">
294REPL âï¸</a></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/what-is-d3" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>What is D3?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/api" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>API index</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="bg-alt f12 lh-normal" data-v-5d98c3a5><div class="flex-l"><div class="ma4"><a title="Home" target="_blank" href="https://observablehq.com/"><svg role="img" width="173" height="24" viewBox="0 0 173 24" aria-label="Observable" fill="currentColor"><path d="M40.8496 20.6083C39.7407 20.6083 38.6757 20.4234 37.6548 20.0538C36.6339 19.6842 35.7186 19.1209 34.9089 18.364C34.1168 17.607 33.4919 16.6565 33.0343 15.5124C32.5766 14.3683 32.3478 13.0218 32.3478 11.4727C32.3478 9.92375 32.5766 8.57718 33.0343 7.43305C33.5095 6.2889 34.1432 5.33839 34.9353 4.5815C35.7274 3.82462 36.6339 3.26135 37.6548 2.8917C38.6757 2.52205 39.7407 2.33723 40.8496 2.33723C41.9585 2.33723 43.0234 2.52205 44.0444 2.8917C45.0653 3.26135 45.9718 3.82462 46.7639 4.5815C47.556 5.33839 48.1809 6.2889 48.6386 7.43305C49.1138 8.57718 49.3514 9.92375 49.3514 11.4727C49.3514 13.0218 49.1225 14.3683 48.665 15.5124C48.2073 16.6565 47.5736 17.607 46.7639 18.364C45.9718 19.1209 45.0653 19.6842 44.0444 20.0538C43.0234 20.4234 41.9585 20.6083 40.8496 20.6083ZM40.8496 18.9977C41.6065 18.9977 42.2049 18.6896 42.645 18.0736C43.1027 17.4398 43.4283 16.5598 43.622 15.4332C43.8332 14.3067 43.9388 12.9865 43.9388 11.4727C43.9388 9.95894 43.8332 8.63879 43.622 7.51226C43.4283 6.38572 43.1027 5.50562 42.645 4.87193C42.2049 4.23826 41.6065 3.92142 40.8496 3.92142C40.1103 3.92142 39.5118 4.23826 39.0542 4.87193C38.5965 5.50562 38.2621 6.38572 38.0509 7.51226C37.8572 8.63879 37.7604 9.95894 37.7604 11.4727C37.7604 12.9865 37.8572 14.3067 38.0509 15.4332C38.2621 16.5598 38.5965 17.4398 39.0542 18.0736C39.5118 18.6896 40.1103 18.9977 40.8496 18.9977ZM50.5773 20.1066V18.76L51.7655 18.496C51.7831 17.8622 51.7919 17.1846 51.7919 16.4629C51.7919 15.7413 51.7919 15.1076 51.7919 14.5619V3.60459L50.3661 3.41977V2.23162L56.386 1.04348L56.8349 1.33392L56.7293 5.00396V8.33075C57.7678 7.30983 59.0175 6.79937 60.4785 6.79937C61.4466 6.79937 62.3267 7.0546 63.1188 7.56506C63.9109 8.05792 64.5358 8.80601 64.9934 9.80933C65.4687 10.7951 65.7063 12.0448 65.7063 13.5586C65.7063 15.002 65.4335 16.2429 64.8878 17.2814C64.3422 18.3199 63.6293 19.1209 62.7491 19.6842C61.8867 20.2298 60.9626 20.5026 59.9768 20.5026C59.22 20.5026 58.5599 20.3706 57.9966 20.1066C57.4333 19.8601 56.9405 19.4993 56.518 19.0241L55.99 20.5026L50.5773 20.1066ZM58.0494 9.41329C57.8206 9.41329 57.6006 9.44848 57.3893 9.5189C57.1957 9.5893 57.0021 9.68612 56.8085 9.80933V17.5982C57.1605 17.8447 57.5742 17.968 58.0494 17.968C58.7535 17.968 59.3168 17.607 59.7392 16.8853C60.1616 16.1637 60.3729 15.0548 60.3729 13.5586C60.3729 12.0448 60.1616 10.9799 59.7392 10.3638C59.3168 9.73012 58.7535 9.41329 58.0494 9.41329ZM71.7275 20.5026C69.8968 20.5026 68.2775 20.0714 66.8693 19.2089L67.0013 15.8292H69.404L69.8264 18.5752C70.1257 18.6984 70.4337 18.7952 70.7505 18.8657C71.0674 18.9185 71.3931 18.9449 71.7275 18.9449C72.3964 18.9449 72.9156 18.8393 73.2852 18.628C73.6549 18.4168 73.8397 18.0647 73.8397 17.5718C73.8397 17.2198 73.699 16.903 73.4173 16.6213C73.1532 16.3397 72.5812 16.0845 71.7011 15.8556L70.1961 15.4596C69.1575 15.178 68.3654 14.6851 67.8198 13.981C67.2742 13.2594 67.0013 12.3881 67.0013 11.3671C67.0013 10.047 67.503 8.95563 68.5063 8.09312C69.5272 7.23062 70.9882 6.79937 72.8892 6.79937C73.699 6.79937 74.447 6.88738 75.1335 7.06341C75.8376 7.23942 76.5505 7.50345 77.2721 7.8555L77.0609 10.839H74.6318L74.0509 8.48917C73.8749 8.45397 73.6813 8.42757 73.4701 8.40996C73.2765 8.37476 73.0389 8.35715 72.7572 8.35715C72.2644 8.35715 71.8419 8.47157 71.4898 8.70039C71.1554 8.91162 70.9882 9.24606 70.9882 9.70372C70.9882 9.98535 71.1115 10.2582 71.3578 10.5222C71.6043 10.7862 72.1851 11.0414 73.1004 11.2879L74.579 11.6839C75.8112 12.0184 76.6912 12.5377 77.2193 13.2417C77.76
2945 13.9459 78.0379 14.8172 78.0379 15.8556C78.0379 17.4047 77.4658 18.5664 76.3216 19.3409C75.1951 20.1153 73.6637 20.5026 71.7275 20.5026ZM85.8767 8.22514C85.4718 8.22514 85.1286 8.52438 84.847 9.12285C84.5653 9.72132 84.4069 10.839 84.3717 12.476H85.6127C86.2464 12.476 86.6688 12.3528 86.88 12.1064C87.1088 11.8424 87.2233 11.3759 87.2233 10.707C87.2233 9.79173 87.0824 9.14926 86.8008 8.7796C86.5368 8.40996 86.2287 8.22514 85.8767 8.22514ZM85.9559 20.5026C84.6358 20.5026 83.4564 20.2298 82.4179 19.6842C81.3969 19.1384 80.5873 18.3552 79.9887 17.3342C79.3903 16.2957 79.091 15.0548 79.091 13.6114C79.091 12.4673 79.2935 11.4727 79.6983 10.6278C80.1032 9.78293 80.6488 9.07884 81.3353 8.51557C82.0219 7.93471 82.7876 7.50345 83.6325 7.22182C84.4774 6.94018 85.331 6.79937 86.1936 6.79937C87.4609 6.79937 88.5082 7.06341 89.3355 7.59147C90.1804 8.10193 90.8141 8.79721 91.2365 9.67732C91.659 10.5398 91.8702 11.5079 91.8702 12.5816C91.8702 12.8633 91.8614 13.1097 91.8438 13.3209C91.8262 13.5146 91.791 13.7346 91.7382 13.981H84.3981C84.5389 15.266 84.9174 16.1989 85.5335 16.7797C86.1672 17.3606 86.8712 17.651 87.6457 17.651C88.3145 17.651 88.8867 17.5367 89.3619 17.3078C89.8547 17.0614 90.286 16.7622 90.6557 16.4101L91.6854 17.4134C91.1221 18.4872 90.3477 19.2704 89.3619 19.7634C88.3937 20.2562 87.2584 20.5026 85.9559 20.5026ZM92.9624 20.0802V18.7336L94.2298 18.4432C94.2473 17.8094 94.2562 17.1406 94.2562 16.4365C94.2562 15.7149 94.2562 15.0812 94.2562 14.5355V12.8721C94.2562 12.3792 94.2473 11.9832 94.2298 11.6839C94.2298 11.3848 94.221 11.1119 94.2034 10.8654C94.2034 10.6014 94.1945 10.2934 94.177 9.94135L92.7512 9.70372V8.62118L98.5863 6.79937L99.0615 7.08981L99.2727 10.1526C99.6248 9.00844 100.127 8.16353 100.778 7.61787C101.447 7.0722 102.098 6.79937 102.732 6.79937C103.383 6.79937 103.929 6.99299 104.369 7.38024C104.826 7.74988 105.099 8.33956 105.187 9.14925C105.152 9.85333 104.941 10.4078 104.553 10.8126C104.166 11.1998 103.709 11.3935 103.18 11.3935C102.371 11.3935 101.631 10.9094 100.963 9.94135L100.831 9.75652C100.514 10.1086 100.197 10.5662 99.88 11.1295C99.5808 11.6928 99.3784 12.2736 99.2727 12.8721V14.5355C99.2727 15.046 99.2727 15.6444 99.2727 16.3309C99.2727 17.0173 99.2816 17.6687 99.2991 18.2848L101.359 18.7336V20.0802H92.9624ZM114.743 8.46277V7.22182H119.707V8.46277L118.123 8.7268L113.766 20.0802H111.39L106.69 8.7268L105.423 8.46277V7.22182H113.37V8.46277L111.971 8.7796L114.162 14.8523L116.195 8.7532L114.743 8.46277ZM129.974 20.5026C129.147 20.5026 128.478 20.3442 127.967 20.0274C127.475 19.6929 127.114 19.2265 126.885 18.628C126.374 19.1912 125.855 19.6489 125.327 20.001C124.817 20.3354 124.086 20.5026 123.136 20.5026C122.097 20.5026 121.261 20.2034 120.627 19.6049C120.011 19.0064 119.703 18.1703 119.703 17.0966C119.703 16.4101 119.853 15.8028 120.152 15.2747C120.469 14.7291 121.015 14.2363 121.789 13.7962C122.581 13.3386 123.69 12.9249 125.116 12.5552C125.327 12.5024 125.574 12.4409 125.855 12.3704C126.137 12.2825 126.427 12.2033 126.727 12.1328V11.1823C126.727 10.0558 126.594 9.28127 126.33 8.85881C126.084 8.43636 125.547 8.22514 124.72 8.22514C124.649 8.22514 124.579 8.22514 124.509 8.22514C124.456 8.22514 124.394 8.22514 124.324 8.22514V9.12285C124.324 10.1966 124.104 10.9622 123.664 11.4199C123.224 11.86 122.722 12.08 122.159 12.08C121.085 12.08 120.416 11.6047 120.152 10.6542C120.152 9.51009 120.689 8.58599 121.763 7.8819C122.854 7.16021 124.465 6.79937 126.594 6.79937C128.425 6.79937 129.71 7.20422 130.449 8.01391C131.206 8.80601 131.585 10.1086 131.585 11.9216V17.968C131.585 18.2671 131.734 18.4168 132.034 18.4168C132.139 18.4168 132.245 18.3816 132.35 18.3112C132.456 18.2232 132.588 18.0647 132.746 17.8358L133.512 18.2584C133.195 19.0681 132.755 19.6489 132.192 20.001C131.646 20.3354 130.907 20.5026 129.974 20.5026ZM124.245 16.2781C124.245 16.9294 124.377 17.4134 124.641 17.7302C124.905 18.0472 125.23 18.2056 125.618 18.2056C125.741 18.2056 125.873 18.1792 126.014 18.1264C126.172 18.0559 126.41 17.9152 126.727 17.7038V13.3737C126.462 13.4442 126.207 13.541 125.961 13.6642C125.591 13.8403 125.213 14.1394 124.825 14.5619C124.438 14.9843 124.245 15.5564 124.245 16.2781ZM134.041 20.1066V18.76L135.229 18.496C135.247 17.8622 135.256 17.1846 135.256 16.4629C135.256 15.7413 135.256 15.1076 135.256 14.5619V3.60459L133.83 3.41977V2.23162L139.85 1.04348L14
2940.299 1.33392L140.193 5.00396V8.33075C141.232 7.30983 142.481 6.79937 143.942 6.79937C144.91 6.79937 145.791 7.0546 146.583 7.56506C147.375 8.05792 148 8.80601 148.457 9.80933C148.933 10.7951 149.17 12.0448 149.17 13.5586C149.17 15.002 148.898 16.2429 148.352 17.2814C147.806 18.3199 147.093 19.1209 146.213 19.6842C145.351 20.2298 144.426 20.5026 143.441 20.5026C142.684 20.5026 142.024 20.3706 141.461 20.1066C140.897 19.8601 140.405 19.4993 139.982 19.0241L139.454 20.5026L134.041 20.1066ZM141.513 9.41329C141.284 9.41329 141.064 9.44848 140.853 9.5189C140.659 9.5893 140.466 9.68612 140.272 9.80933V17.5982C140.625 17.8447 141.038 17.968 141.513 17.968C142.217 17.968 142.781 17.607 143.203 16.8853C143.626 16.1637 143.837 15.0548 143.837 13.5586C143.837 12.0448 143.626 10.9799 143.203 10.3638C142.781 9.73012 142.217 9.41329 141.513 9.41329ZM150.465 20.0802V18.7336L151.653 18.4696C151.671 17.8007 151.679 17.1406 151.679 16.4893C151.697 15.838 151.707 15.1868 151.707 14.5355V3.6838L150.28 3.41977V2.23162L156.379 1.04348L156.828 1.33392L156.723 5.00396V14.5355C156.723 15.1868 156.723 15.8469 156.723 16.5157C156.74 17.167 156.758 17.8271 156.776 18.496L157.963 18.7336V20.0802H150.465ZM165.938 8.22514C165.533 8.22514 165.189 8.52438 164.908 9.12285C164.626 9.72132 164.467 10.839 164.432 12.476H165.674C166.307 12.476 166.73 12.3528 166.94 12.1064C167.169 11.8424 167.284 11.3759 167.284 10.707C167.284 9.79173 167.143 9.14926 166.861 8.7796C166.597 8.40996 166.289 8.22514 165.938 8.22514ZM166.016 20.5026C164.696 20.5026 163.517 20.2298 162.478 19.6842C161.457 19.1384 160.647 18.3552 160.049 17.3342C159.45 16.2957 159.152 15.0548 159.152 13.6114C159.152 12.4673 159.354 11.4727 159.759 10.6278C160.164 9.78293 160.71 9.07884 161.395 8.51557C162.082 7.93471 162.848 7.50345 163.693 7.22182C164.537 6.94018 165.392 6.79937 166.254 6.79937C167.522 6.79937 168.568 7.06341 169.396 7.59147C170.241 8.10193 170.874 8.79721 171.297 9.67732C171.719 10.5398 171.93 11.5079 171.93 12.5816C171.93 12.8633 171.922 13.1097 171.904 13.3209C171.886 13.5146 171.851 13.7346 171.799 13.981H164.459C164.6 15.266 164.978 16.1989 165.594 16.7797C166.228 17.3606 166.932 17.651 167.706 17.651C168.375 17.651 168.947 17.5367 169.423 17.3078C169.915 17.0614 170.346 16.7622 170.716 16.4101L171.746 17.4134C171.182 18.4872 170.408 19.2704 169.423 19.7634C168.454 20.2562 167.319 20.5026 166.016 20.5026Z"></path><path d="M11.4413 19.7265C10.3849 19.7265 9.46964 19.4977 8.69544 19.04C7.92403 18.5841 7.30727 17.9383 6.91536 17.1761C6.49867 16.3829 6.19365 15.5442 6.00767 14.6801C5.81035 13.743 5.71422 12.7903 5.72068 11.8359C5.72068 11.0802 5.77027 10.3577 5.87038 9.66687C5.96953 8.97688 6.15355 8.27548 6.42147 7.56358C6.68939 6.85167 7.03454 6.23445 7.45501 5.71104C7.89276 5.17482 8.45875 4.73835 9.10924 4.4354C9.79191 4.10837 10.568 3.9453 11.4413 3.9453C12.4977 3.9453 13.4131 4.17413 14.1873 4.63178C14.9587 5.08762 15.5755 5.73343 15.9674 6.49571C16.3811 7.28039 16.6834 8.11242 16.875 8.99178C17.0658 9.87026 17.1621 10.8189 17.1621 11.8359C17.1621 12.5917 17.1125 13.3141 17.0123 14.0049C16.9057 14.7222 16.7171 15.4272 16.4498 16.1082C16.1733 16.8201 15.8301 17.4374 15.4162 17.9608C15.0025 18.4842 14.4552 18.9094 13.7735 19.2364C13.0918 19.5634 12.3147 19.7265 11.4413 19.7265ZM13.4608 13.9249C14.0079 13.3785 14.3122 12.6225 14.3017 11.8359C14.3017 11.0232 14.0281 10.3268 13.4817 9.74686C12.9344 9.1669 12.2547 8.87692 11.4413 8.87692C10.628 8.87692 9.94827 9.1669 9.40099 9.74686C8.86507 10.2993 8.56912 11.0534 8.58102 11.8359C8.58102 12.6486 8.85467 13.3449 9.40099 13.9249C9.94827 14.5049 10.628 14.7949 11.4413 14.7949C12.2547 14.7949 12.9278 14.5049 13.4608 13.9249ZM11.4413 23.6718C17.7599 23.6718 22.8828 18.3723 22.8828 11.8359C22.8828 5.29952 17.7599 0 11.4413 0C5.12287 0 0 5.29952 0 11.8359C0 18.3723 5.12287 23.6718 11.4413 23.6718Z"></path></svg></a></div><div class="flex flex-grow-1 ma4"><div class="fb6"><div class="mb2 fw6 f14">Resources</div><ul><li class="mb2"><a target="_blank" href="https://talk.observablehq.com">Forum</a></li><li class="mb2"><a target="_blank" href="https://observablehq.com/slack/join">Slack</a></li><li class="mb2"><a target="_blank" href="https://github.com/d3/d3/discussions">Discussions</a></li><li class="mb2"><a target="_blank" href="https://github.com/d3/d3/releases">Releases</a></li></ul></div><div class="fb6 flex-grow-1"><div class="mb2 fw6 f14">Observable</div><ul><li class="mb2"><a target="_blank" href="https://observablehq.com/product">Product</a></li><li class="mb2"><a target="_blank" href="https://observablehq.com/plot">Plot</a></li><li class="mb2"><a target="_blank" href="https://observablehq.com/data-integrations">Integrations</a></li><li class="mb2"><a target="_blank" href="https://observablehq.com/pricing">Pricing</a></li><li class="mb2"><a target="_blank" href="https://observablehq.com/enterprise">Enterprise</a></li></ul></div></div></div><div class="flex ma4"> © 2026 Mike Bostock and Observable, Inc. <a class="ml1" target="_blank" href="https://github.com/d3/d3/blob/main/LICENSE">ISC License</a></div></footer><!--[--><!--]--></div></div> 295
295<script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"Cii8VSTw\",\"community.md\":\"BEhwoCiB\",\"d3-array.md\":\"ppdUU0hx\",\"d3-array_add.md\":\"Bw5-Cl9B\",\"d3-array_bin.md\":\"DEQ0o3lh\",\"d3-array_bisect.md\":\"DRibjkES\",\"d3-array_blur.md\":\"DUqhSiZ7\",\"d3-array_group.md\":\"78TbL3Mx\",\"d3-array_intern.md\":\"N_WG4bZC\",\"d3-array_sets.md\":\"8bhp308d\",\"d3-array_sort.md\":\"BG8ihRnH\",\"d3-array_summarize.md\":\"DYBcWrox\",\"d3-array_ticks.md\":\"DMrpkqf2\",\"d3-array_transform.md\":\"CQuM8zic\",\"d3-axis.md\":\"CnxPNyOy\",\"d3-brush.md\":\"BcY6gZlr\",\"d3-chord.md\":\"CK6AfYS3\",\"d3-chord_chord.md\":\"DCUESUdL\",\"d3-chord_ribbon.md\":\"CQGQ5b-d\",\"d3-color.md\":\"NCBFgYeM\",\"d3-contour.md\":\"Bet75Z9l\",\"d3-contour_contour.md\":\"C69VIn_L\",\"d3-contour_density.md\":\"vRVfflO4\",\"d3-delaunay.md\":\"DnQWWUNr\",\"d3-delaunay_delaunay.md\":\"85rhsPTs\",\"d3-delaunay_voronoi.md\":\"D0Nkcr4J\",\"d3-dispatch.md\":\"EsfucYUp\",\"d3-drag.md\":\"BNlxHKuo\",\"d3-dsv.md\":\"Co71IsNQ\",\"d3-ease.md\":\"BPkoWuTZ\",\"d3-fetch.md\":\"Bu44CSci\",\"d3-force.md\":\"DdWUIisz\",\"d3-force_center.md\":\"MHEeovj_\",\"d3-force_collide.md\":\"DigyoKBt\",\"d3-force_link.md\":\"C2vYN0Bu\",\"d3-force_many-body.md\":\"CubbpVW9\",\"d3-force_position.md\":\"CnAQ0Xef\",\"d3-force_simulation.md\":\"Cy7PeAUG\",\"d3-format.md\":\"CBHLNBEW\",\"d3-geo.md\":\"DSEh4fC6\",\"d3-geo_azimuthal.md\":\"DDt3hotL\",\"d3-geo_conic.md\":\"DIacPMZI\",\"d3-geo_cylindrical.md\":\"CYbC-xV4\",\"d3-geo_math.md\":\"BQDnSLuT\",\"d3-geo_path.md\":\"7O87U-wt\",\"d3-geo_projection.md\":\"DSqwZoVn\",\"d3-geo_shape.md\":\"BN2ab348\",\"d3-geo_stream.md\":\"Dqq374Pi\",\"d3-hierarchy.md\":\"BmBwsUo2\",\"d3-hierarchy_cluster.md\":\"ganf1Fjb\",\"d3-hierarchy_hierarchy.md\":\"QxCP60Uh\",\"d3-hierarchy_pack.md\":\"Bk-md1_y\",\"d3-hierarchy_partition.md\":\"fEoH9879\",\"d3-hierarchy_stratify.md\":\"CUkApQ4j\",\"d3-hierarchy_tree.md\":\"Cg2ibQdp\",\"d3-hierarchy_treemap.md\":\"Ctshykbs\",\"d3-interpolate.md\":\"BRDODGDj\",\"d3-interpolate_color.md\":\"CiPqNzMg\",\"d3-interpolate_transform.md\":\"oXwkEdSK\",\"d3-interpolate_value.md\":\"CXEsGcmn\",\"d3-interpolate_zoom.md\":\"D6aYMXYZ\",\"d3-path.md\":\"ieDePRwu\",\"d3-polygon.md\":\"FGiF-n4W\",\"d3-quadtree.md\":\"CVgUGk71\",\"d3-random.md\":\"C4wvOW2H\",\"d3-scale-chromatic.md\":\"BU55UIJH\",\"d3-scale-chromatic_categorical.md\":\"ZEEODrew\",\"d3-scale-chromatic_cyclical.md\":\"CmL10GwV\",\"d3-scale-chromatic_diverging.md\":\"D_VxRug9\",\"d3-scale-chromatic_sequential.md\":\"DzEX1oI8\",\"d3-scale.md\":\"BDry6xnP\",\"d3-scale_band.md\":\"DfYiou5w\",\"d3-scale_diverging.md\":\"txjd2dqh\",\"d3-scale_linear.md\":\"B7YhRIl2\",\"d3-scale_log.md\":\"DISUvgeF\",\"d3-scale_ordinal.md\":\"C6QZlAsX\",\"d3-scale_point.md\":\"DrEl2vTh\",\"d3-scale_pow.md\":\"Dc8KJgJJ\",\"d3-scale_quantile.md\":\"BEGsW-iE\",\"d3-scale_quantize.md\":\"CAGpTK7m\",\"d3-scale_sequential.md\":\"DMARwqYN\",\"d3-scale_symlog.md\":\"3evmYnuP\",\"d3-scale_threshold.md\":\"D7Qb5oHi\",\"d3-scale_time.md\":\"WTotlv5H\",\"d3-selection.md\":\"Dm4jGlb4\",\"d3-selection_control-flow.md\":\"zqFgdcOj\",\"d3-selection_events.md\":\"2bzfqYVg\",\"d3-selection_joining.md\":\"Bddolnmd\",\"d3-selection_locals.md\":\"BzAVJFu5\",\"d3-selection_modifying.md\":\"BPorWNAI\",\"d3-selection_namespaces.md\":\"BHJ0fFVq\",\"d3-selection_selecting.md\":\"24R8NjCx\",\"d3-shape.md\":\"DfT8okXe\",\"d3-shape_arc.md\":\"t6XfaJzP\",\"d3-shape_area.md\":\"BpYqBPKj\",\"d3-shape_curve.md\":\"CYqDc7Rn\",\"d3-shape_line.md\":\"UJyvlgY1\",\"d3-shape_link.md\":\"CGoegf4s\",\"d3-shape_pie.md\":\"CqZsu_tF\",\"d3-shape_radial-area.md\":\"DuP0_n7L\",\"d3-shape_radial-line.md\":\"Jk-Zrtex\",\"d3-shape_radial-link.md\":\"CGw9PjbS\",\"d3-shape_stack.md\":\"qs2wHJtn\",\"d3-shape_symbol.md\":\"B6ioJoVg\",\"d3-time-format.md\":\"lUjDRd6y\",\"d3-time.md\":\"DakoKMkg\",\"d3-timer.md\":\"DQCnIu-V\",\"d3-transition.md\":\"C1nFydre\",\"d3-transition_control-flow.md\":\"DwvhYuRj\",\"d3-transition_modifying.md\":\"BLsBa9uv\",\"d3-transition_selecting.md\":\"CCQQzXMv\",\"d3-transition_timing.md\":\"eZYgPgby\",\"d3-zoom.md\":\"StnUdked\",\"getting-started.md\":\"BEUy3yNO\",\"index.md\":\"3XnaYLYe\",\"what-is-d3.md\":\"m-BeMBEY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"D3 by Observable\",\"description\":\"The JavaScript library for bespoke data visualization\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"force-auto\",\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"D3\",\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is D3?\",\"link\":\"/what-is-d3\"},{\"text\":\"Getting started\",\"link\":\"/getting-started\"},{\"text\":\"API index\",\"link\":\"/api\"},{\"text\":\"Examples\",\"link\":\"https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=page-nav&utm_campaign=try-observable\",\"rel\":\"external\"}]},{\"text\":\"Visualization\",\"items\":[{\"text\":\"d3-axis\",\"link\":\"/d3-axis\"},{\"text\":\"d3-chord\",\"link\":\"/d3-chord\",\"collapsed\":true,\"items\":[{\"text\":\"Chords\",\"link\":\"/d3-chord/chord\"},{\"text\":\"Ribbons\",\"link\":\"/d3-chord/ribbon\"}]},{\"text\":\"d3-color\",\"link\":\"/d3-color\"},{\"text\":\"d3-interpolate\",\"link\":\"/d3-interpolate\",\"collapsed\":true,\"items\":[{\"text\":\"Value interpolation\",\"link\":\"/d3-interpolate/value\"},{\"text\":\"Color interpolation\",\"link\":\"/d3-interpolate/color\"},{\"text\":\"Transform interpolation\",\"link\":\"/d3-interpolate/transform\"},{\"text\":\"Zoom interpolation\",\"link\":\"/d3-interpolate/zoom\"}]},{\"text\":\"d3-contour\",\"link\":\"/d3-contour\",\"collapsed\":true,\"items\":[{\"text\":\"Contour polygons\",\"link\":\"/d3-contour/contour\"},{\"text\":\"Density estimation\",\"link\":\"/d3-contour/density\"}]},{\"text\":\"d3-delaunay\",\"link\":\"/d3-delaunay\",\"collapsed\":true,\"items\":[{\"text\":\"Delaunay triangulations\",\"link\":\"/d3-delaunay/delaunay\"},{\"text\":\"Voronoi diagrams\",\"link\":\"/d3-delaunay/voronoi\"}]},{\"text\":\"d3-force\",\"link\":\"/d3-force\",\"collapsed\":true,\"items\":[{\"text\":\"Force simulations\",\"link\":\"/d3-force/simulation\"},{\"text\":\"Center force\",\"link\":\"/d3-force/center\"},{\"text\":\"Collide force\",\"link\":\"/d3-force/collide\"},{\"text\":\"Link force\",\"link\":\"/d3-force/link\"},{\"text\":\"Many-body force\",\"link\":\"/d3-force/many-body\"},{\"text\":\"Position forces\",\"link\":\"/d3-force/position\"}]},{\"text\":\"d3-geo\",\"link\":\"/d3-geo\",\"collapsed\":true,\"items\":[{\"text\":\"Paths\",\"link\":\"/d3-geo/path\"},{\"text\":\"Projections\",\"link\":\"/d3-geo/projection\",\"collapsed\":true,\"items\":[{\"text\":\"Azimuthal projections\",\"link\":\"/d3-geo/azimuthal\"},{\"text\":\"Conic projections\",\"link\":\"/d3-geo/conic\"},{\"text\":\"Cylindrical projections\",\"link\":\"/d3-geo/cylindrical\"}]},{\"text\":\"Streams\",\"link\":\"/d3-geo/stream\"},{\"text\":\"Spherical shapes\",\"link\":\"/d3-geo/shape\"},{\"text\":\"Spherical math\",\"link\":\"/d3-geo/math\"}]},{\"text\":\"d3-hierarchy\",\"link\":\"/d3-hierarchy\",\"collapsed\":true,\"items\":[{\"text\":\"Hierarchies\",\"link\":\"/d3-hierarchy/hierarchy\"},{\"text\":\"Stratify\",\"link\":\"/d3-hierarchy/stratify\"},{\"text\":\"Tree\",\"link\":\"/d3-hierarchy/tree\"},{\"text\":\"Cluster\",\"link\":\"/d3-hierarchy/cluster\"},{\"text\":\"Partition\",\"link\":\"/d3-hierarchy/partition\"},{\"text\":\"Pack\",\"link\":\"/d3-hierarchy/pack\"},{\"text\":\"Treemap\",\"link\":\"/d3-hierarchy/treemap\"}]},{\"text\":\"d3-path\",\"link\":\"/d3-path\"},{\"text\":\"d3-polygon\",\"link\":\"/d3-polygon\"},{\"text\":\"d3-quadtree\",\"link\":\"/d3-quadtree\"},{\"text\":\"d3-scale\",\"link\":\"/d3-scale\",\"collapsed\":true,\"items\":[{\"text\":\"Linear scales\",\"link\":\"/d3-scale/linear\"},{\"text\":\"Time scales\",\"link\":\"/d3-scale/time\"}
295,{\"text\":\"Pow scales\",\"link\":\"/d3-scale/pow\"},{\"text\":\"Log scales\",\"link\":\"/d3-scale/log\"},{\"text\":\"Symlog scales\",\"link\":\"/d3-scale/symlog\"},{\"text\":\"Ordinal scales\",\"link\":\"/d3-scale/ordinal\"},{\"text\":\"Band scales\",\"link\":\"/d3-scale/band\"},{\"text\":\"Point scales\",\"link\":\"/d3-scale/point\"},{\"text\":\"Sequential scales\",\"link\":\"/d3-scale/sequential\"},{\"text\":\"Diverging scales\",\"link\":\"/d3-scale/diverging\"},{\"text\":\"Quantile scales\",\"link\":\"/d3-scale/quantile\"},{\"text\":\"Quantize scales\",\"link\":\"/d3-scale/quantize\"},{\"text\":\"Threshold scales\",\"link\":\"/d3-scale/threshold\"}]},{\"text\":\"d3-scale-chromatic\",\"link\":\"/d3-scale-chromatic\",\"collapsed\":true,\"items\":[{\"text\":\"Categorical schemes\",\"link\":\"/d3-scale-chromatic/categorical\"},{\"text\":\"Cyclical schemes\",\"link\":\"/d3-scale-chromatic/cyclical\"},{\"text\":\"Diverging schemes\",\"link\":\"/d3-scale-chromatic/diverging\"},{\"text\":\"Sequential schemes\",\"link\":\"/d3-scale-chromatic/sequential\"}]},{\"text\":\"d3-selection\",\"link\":\"/d3-selection\",\"collapsed\":true,\"items\":[{\"text\":\"Selecting elements\",\"link\":\"/d3-selection/selecting\"},{\"text\":\"Modifying elements\",\"link\":\"/d3-selection/modifying\"},{\"text\":\"Joining data\",\"link\":\"/d3-selection/joining\"},{\"text\":\"Handling events\",\"link\":\"/d3-selection/events\"},{\"text\":\"Control flow\",\"link\":\"/d3-selection/control-flow\"},{\"text\":\"Local variables\",\"link\":\"/d3-selection/locals\"},{\"text\":\"Namespaces\",\"link\":\"/d3-selection/namespaces\"}]},{\"text\":\"d3-shape\",\"link\":\"/d3-shape\",\"collapsed\":true,\"items\":[{\"text\":\"Arcs\",\"link\":\"/d3-shape/arc\"},{\"text\":\"Areas\",\"link\":\"/d3-shape/area\"},{\"text\":\"Curves\",\"link\":\"/d3-shape/curve\"},{\"text\":\"Lines\",\"link\":\"/d3-shape/line\"},{\"text\":\"Links\",\"link\":\"/d3-shape/link\"},{\"text\":\"Pies\",\"link\":\"/d3-shape/pie\"},{\"text\":\"Stacks\",\"link\":\"/d3-shape/stack\"},{\"text\":\"Symbols\",\"link\":\"/d3-shape/symbol\"},{\"text\":\"Radial areas\",\"link\":\"/d3-shape/radial-area\"},{\"text\":\"Radial lines\",\"link\":\"/d3-shape/radial-line\"},{\"text\":\"Radial links\",\"link\":\"/d3-shape/radial-link\"}]}]},{\"text\":\"Animation\",\"items\":[{\"text\":\"d3-ease\",\"link\":\"/d3-ease\"},{\"text\":\"d3-timer\",\"link\":\"/d3-timer\"},{\"text\":\"d3-transition\",\"link\":\"/d3-transition\",\"collapsed\":true,\"items\":[{\"text\":\"Selecting elements\",\"link\":\"/d3-transition/selecting\"},{\"text\":\"Modifying elements\",\"link\":\"/d3-transition/modifying\"},{\"text\":\"Timing\",\"link\":\"/d3-transition/timing\"},{\"text\":\"Control flow\",\"link\":\"/d3-transition/control-flow\"}]}]},{\"text\":\"Interaction\",\"items\":[{\"text\":\"d3-brush\",\"link\":\"/d3-brush\"},{\"text\":\"d3-dispatch\",\"link\":\"/d3-dispatch\"},{\"text\":\"d3-drag\",\"link\":\"/d3-drag\"},{\"text\":\"d3-zoom\",\"link\":\"/d3-zoom\"}]},{\"text\":\"Data\",\"items\":[{\"text\":\"d3-array\",\"link\":\"/d3-array\",\"collapsed\":true,\"items\":[{\"text\":\"Adding numbers\",\"link\":\"/d3-array/add\"},{\"text\":\"Binning data\",\"link\":\"/d3-array/bin\"},{\"text\":\"Bisecting data\",\"link\":\"/d3-array/bisect\"},{\"text\":\"Blurring data\",\"link\":\"/d3-array/blur\"},{\"text\":\"Grouping data\",\"link\":\"/d3-array/group\"},{\"text\":\"Interning values\",\"link\":\"/d3-array/intern\"},{\"text\":\"Set operations\",\"link\":\"/d3-array/sets\"},{\"text\":\"Sorting data\",\"link\":\"/d3-array/sort\"},{\"text\":\"Summarizing data\",\"link\":\"/d3-array/summarize\"},{\"text\":\"Ticks\",\"link\":\"/d3-array/ticks\"},{\"text\":\"Transforming data\",\"link\":\"/d3-array/transform\"}]},{\"text\":\"d3-dsv\",\"link\":\"/d3-dsv\"},{\"text\":\"d3-fetch\",\"link\":\"/d3-fetch\"},{\"text\":\"d3-format\",\"link\":\"/d3-format\"},{\"text\":\"d3-random\",\"link\":\"/d3-random\"},{\"text\":\"d3-time\",\"link\":\"/d3-time\"},{\"text\":\"d3-time-format\",\"link\":\"/d3-time-format\"}]}],\"search\":{\"provider\":\"local\"}
295,\"footer\":{\"message\":\"Library released under <a style='text-decoration:underline;' href='https://github.com/d3/d3/blob/main/LICENSE'>ISC License</a>.\",\"copyright\":\"Copyright 2010â2026 Mike Bostock\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
295 296 297
297<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5857aa2e426f43b5801ca82a58bab273","r":1,"spa":2}' crossorigin="anonymous"></script>
297 298</body> 299</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.