How to Tell If a Website Uses D3.js

D3.js (Data-Driven Documents) is the most powerful and widely used data-visualisation library on the web, the engine behind countless custom charts, interactive graphics and data journalism pieces. Because it exposes a clear global and generates distinctive data-bound SVG, detecting it is straightforward: type d3 into the console or look for d3.min.js in the Network tab. This guide covers every reliable signal, why D3's low-level nature matters, the look-alikes to rule out, and what D3 usage tells you about the team.

What is D3.js?

D3, created by Mike Bostock, is a JavaScript library for binding data to the DOM and transforming it into visual representations. Unlike higher-level charting libraries that offer ready-made chart types, D3 is a low-level toolkit: it provides scales, selections, shape generators, axes, transitions and layouts that developers compose into entirely bespoke visualisations. That power and flexibility made it the standard for custom data graphics — it underpins much of the interactive data journalism at major news organisations, as well as analytics dashboards, scientific visualisations and data-heavy products.

For detection, the key context is that D3 signals custom, hand-built visualisation work rather than an off-the-shelf chart widget. Finding it tells you the site has a data-focused or technically sophisticated team that chose to build visualisations from primitives. Because D3 registers a clear global and most often generates data-bound SVG, it is straightforward to confirm, and the visualisations themselves corroborate the finding. Its presence is a strong indicator of a data-oriented site or product.

How D3 loads and renders

A D3 install loads the library — d3.min.js — commonly from a public CDN such as cdn.jsdelivr.net/npm/d3, cdnjs.cloudflare.com or the canonical d3js.org, or bundled into the site's JavaScript. At runtime it exposes the global window.d3 object, whose methods are distinctive: d3.select/d3.selectAll (DOM selection), d3.scaleLinear/d3.scaleTime (scales), d3.axisBottom (axes), d3.line/d3.arc (shape generators), and d3.csv/d3.json (data loading). Modern D3 (v4+) is modular, so some builds import only parts, but the d3 global is the common entry point.

D3's rendering output is its other signature: it binds data to DOM nodes and most often produces inline SVG — <svg> containers full of data-driven <path>, <circle>, <rect>, <g> and <text> elements forming axes, lines, bars and shapes. So a D3 visualisation appears as intricate, data-bound SVG rather than a single <canvas>. (D3 can drive canvas for large datasets, but SVG is far more common.) Knowing this — the d3 global, the d3.min.js script, and the data-bound SVG output — makes detection both quick and corroborable.

How to tell if a website uses D3

Confirm at least one strong signal (the global suffices).

1. Use the console. Type d3 and press Enter. A returned object with select, scaleLinear and axisBottom methods confirms D3. You can check d3.version for the version.

2. Check the Network tab. Filter for d3. Look for d3.min.js (or d3.v7.min.js-style versioned names), often from a CDN.

3. Inspect a chart. Right-click a chart or visualisation and inspect it. Data-bound inline SVG with axes, paths and shapes is characteristic of D3.

4. View the source. Search for d3, d3.select or d3js.org. Script tags and inline visualisation code frequently reference D3.

5. Read the version. d3.version in the console reveals which D3 version the site uses.

What the D3 signals look like

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
window.d3 = { select: ƒ, selectAll: ƒ, scaleLinear: ƒ, axisBottom: ƒ, line: ƒ, … }
d3.version  // "7.x.x"
<svg> <g class="axis"> … </g> <path class="line" d="M0,120L40,80…"></path> <circle cx=… cy=…></circle> </svg>

The window.d3 global is conclusive, and data-bound inline SVG corroborates the visualisation work.

D3 versus charting libraries — avoiding false positives

Match the global and output to keep visualisation tools distinct. D3 uses window.d3 and typically renders SVG; Chart.js uses window.Chart and renders to a <canvas>; Highcharts uses window.Highcharts and renders SVG (but via its own high-level API); ECharts uses window.echarts and canvas/SVG; Plotly uses window.Plotly. The d3 global is unique. A subtlety: some charting libraries are built on D3 (older Chart frameworks, NVD3, C3.js, Plotly historically), so a site might load D3 because a higher-level library depends on it — in that case you may see both d3 and the wrapper's global. The distinction worth drawing is that direct d3.select/scale usage indicates bespoke D3 work, whereas D3 present only as a dependency of a higher-level library indicates off-the-shelf charts.

How reliable is each D3 signal?

The window.d3 global is definitive, and d3.version confirms the version. A d3.min.js script (or bundled equivalent confirmed by the global) is strong. Data-bound inline SVG corroborates bespoke visualisation. The weakest situation is distinguishing direct D3 use from D3-as-a-dependency-of-a-wrapper — check for a higher-level charting global alongside d3 to tell which. As a rule, the d3 global confirms D3 is present; inspecting the SVG and looking for direct d3 usage tells you whether the visualisation work is bespoke.

What D3 usage reveals about a site

Finding D3 signals a data-focused or technically sophisticated team building custom visualisations. It is especially common on analytics dashboards, data journalism and news graphics, scientific and research tools, fintech and data-heavy products, where bespoke, interactive data display matters. Because D3 is low-level, its direct use indicates real front-end and data-visualisation expertise — not a drag-and-drop chart. Its presence tells you the site treats data presentation as a first-class concern and has the engineering talent to build it. If you sell data, analytics, visualisation or developer tooling, a D3 site marks a data-oriented, technically capable team. The version and whether D3 is used directly or via a wrapper indicate how custom and how current the visualisation work is.

What finding D3 means for sales, agencies and competitive research

For sales and prospecting, D3 marks a data-focused, technically capable team — a fit for data, analytics, visualisation and developer products. Direct D3 usage signals in-house visualisation expertise and a data-centric product.

For agencies and consultants, finding D3 tells you the client builds bespoke visualisations, so engagements can focus on advanced data graphics, dashboard design, or performance of complex SVG. It signals a sophisticated, data-oriented client.

For competitive and market research, D3 adoption reveals how seriously a competitor treats data visualisation. Spotting direct D3 work suggests strong in-house data-viz capability, useful when benchmarking the depth and interactivity of their data products.

D3 in the wider stack

D3 sits in the visualisation layer and pairs with whatever the site uses for structure. On dashboards and data products it accompanies a framework (React, Vue, Angular) — often with a wrapper that integrates D3 into the component model — plus a data API feeding the visualisations. On data-journalism sites it may sit within a CMS or a static build, pulling data from JSON/CSV. For an auditor, the valuable details are the D3 version, whether it is used directly or as a dependency of a higher-level charting library, the data sources feeding it, and the surrounding framework; together these reveal a data-oriented team and the sophistication of its visualisation work.

A quick D3 confirmation walkthrough

Open the site with developer tools on the Console panel and type d3 — a returned object with select/scaleLinear confirms D3; check d3.version for the version. Switch to the Network tab, filter for d3, and look for d3.min.js/d3.v7.min.js. Right-click a chart and inspect it: data-bound inline SVG with axes and paths is characteristic. Check whether a higher-level charting global also exists, which would indicate D3 is a dependency rather than used directly. The d3 global confirms D3, and the SVG plus direct usage indicate bespoke visualisation.

A quick D3 detection checklist

• Type d3 in the console; a returned object is conclusive. Check d3.version.
• Check the Network tab for d3.min.js / d3.v7.min.js.
• Inspect charts for data-bound inline SVG (axes, paths, shapes).
• Search the source for d3, d3.select or d3js.org.
• Check for a higher-level charting global to tell direct use from dependency.
• Distinguish D3 (window.d3, SVG) from Chart.js (window.Chart, canvas).

Detecting D3 at scale

Checking one site is quick, but mapping visualisation-library adoption across many domains — to find data-focused teams and products — calls for automation. StackOptic detects D3 and thousands of other technologies from a real browser, reading runtime globals so it catches bundled installs that static scanners miss. Distinguishing direct D3 usage from D3-as-a-dependency across a market also reveals which teams genuinely build bespoke visualisations versus those relying on off-the-shelf charts — a meaningful split when assessing data-product depth. For related reading, see our guide to checking what JavaScript libraries a website uses and the full D3 technology profile.