Skip to main content

Setup & Installation

Quick reference for getting started with D3.js in your project.

Installation Methods​

CDN​

<script src="https://d3js.org/d3.v7.min.js"></script>

NPM​

npm install d3

ES6 Import​

import * as d3 from 'd3';

// Or import specific modules
import { select, selectAll } from 'd3-selection';
import { scaleLinear } from 'd3-scale';

Basic Setup​

HTML Structure​

<!DOCTYPE html>
<html>
  <head>
    <title>D3.js Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
      .chart {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      // Your D3 code here
    </script>
  </body>
</html>

Module Setup​

// Modern ES6 module approach
import * as d3 from 'd3';

// Create your first visualization
const svg = d3
  .select('#chart')
  .append('svg')
  .attr('width', 500)
  .attr('height', 300);

Version Compatibility​

D3 v7 (Current)​

  • ES6 modules by default
  • Improved TypeScript support
  • Updated APIs and performance improvements

Migration Notes​

  • Use d3.csv().then() instead of callback style
  • Event handlers receive (event, d) parameters
  • Use modern join syntax for data binding