#D3:Data-DrivenDocuments<ahref="https://d3js.org"><imgsrc="./docs/public/logo.svg"width="256"height="256">D3(orD3.js)isafree,open-sourceJavaScriptlibraryforvisualizingdata.Itslow-levelapproachbuiltonwebstandardsoffersunparalleledflexibilityinauthoringdynamic,data-drivengraphics.FormorethanadecadeD3haspoweredgroundbreakingandaward-winningvisualizations,becomeafoundationalbuildingblockofhigher-levelchartlibraries,andfosteredavibrantcommunityofdatapractitionersaroundtheworld.##Resources*DocumentationExamplesReleases##InstallingIfyouusenpm,npminstalld3
.YoucanalsodownloadthelatestreleaseonGitHub.ForvanillaHTMLinmodernbrowsers,importD3fromjsDelivr:html<scripttype="module">import*asd3from"https://cdn.jsdelivr.net/npm/d3@7/+esm";constdiv=d3.selectAll("div");</script>
Forlegacyenvironments,youcanloadD3’sUMDbundlefromannpm-basedCDNsuchasjsDelivr;ad3
globalisexported:html<scriptsrc="https://cdn.jsdelivr.net/npm/d3@7"></script><script>constdiv=d3.selectAll("div");</script>
YoucanalsouseD3modulesindividually.Forexample,d3-selection:html<scripttype="module">import{selectAll}from"https://cdn.jsdelivr.net/npm/d3-selection@3/+esm";constdiv=selectAll("div");</script>
D3iswrittenusingESmodules.CreateacustombundleusingRollup,Webpack,oryourpreferredbundler.ToimportD3intoanES2015application,eitherimportspecificsymbolsfromspecificD3modules:jsimport{scaleLinear}from"d3-scale";
Orimporteverythingintoanamespace(here,d3
):jsimport*asd3from"d3";
Orusingdynamicimport:jsconstd3=awaitimport("d3");
Youcanalsoimportindividualmodulesandcombinethemintoad3
objectusingObject.assign:jsconstd3=awaitPromise.all([import("d3-format"),import("d3-geo"),import("d3-geo-projection")]).then((d3)=>Object.assign({},...d3));