Get started with d3 CDN
BSD-3-Clause licensed
D3.js: library for data visualization in HTML, SVG, CSS.
Tags:- dom
- w3c
- visualization
- svg
- animation
- canvas
Stable version
Copied!
How to start using d3 CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with d3 CDN - cdnhub.io</title>
<style>
/* Add some basic styling */
svg {
display: block;
margin: auto;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<script src="https://cdn.cdnhub.io/d3/7.9.0/d3.min.js"></script>
<script>
// Sample data
const data = [
{ year: 2010, value: 10 },
{ year: 2011, value: 20 },
{ year: 2012, value: 30 },
{ year: 2013, value: 40 },
{ year: 2014, value: 50 },
{ year: 2015, value: 60 },
];
// Set the dimensions and margins of the chart area
const margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Create an SVG container
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// Define the x and y scales
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.year))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
// Add the x-axis
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
// Add the y-axis
svg.append("g")
.call(d3.axisLeft(y));
// Add the line
const line = d3.line()
.x(d => x(d.year))
.y(d => y(d.value));
// Add the path for the line
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
</script>
</body>
</html>
Copied!
Copied!
All versions
1.29.5
2.1.3
2.10.0
2.2.1
2.3.0
2.3.2
2.3.3
2.3.4
2.4.0
2.4.1
2.4.2
2.5.1
2.5.2
2.6.0
2.7.0
2.7.2
2.7.3
2.7.4
2.7.5
2.8.1
3.0.0
3.0.1
3.0.2
3.0.3
3.0.4
3.0.5
3.0.6
3.0.7
3.0.8
3.1.0
3.1.1
3.1.10
3.1.2
3.1.3
3.1.4
3.1.5
3.1.6
3.1.7
3.1.8
3.1.9
3.2.0
3.2.1
3.2.2
3.2.3
3.2.4
3.2.5
3.2.6
3.2.7
3.2.8
3.3.0
3.3.1
3.3.10
3.3.11
3.3.12
3.3.13
3.3.2
3.3.3
3.3.4
3.3.5
3.3.6
3.3.7
3.3.8
3.3.9
3.4.0
3.4.1
3.4.10
3.4.11
3.4.12
3.4.13
3.4.2
3.4.3
3.4.4
3.4.5
3.4.6
3.4.7
3.4.8
3.4.9
3.5.0
3.5.1
3.5.10
3.5.11
3.5.12
3.5.13
3.5.14
3.5.15
3.5.16
3.5.17
3.5.2
3.5.3
3.5.4
3.5.5
3.5.6
3.5.7
3.5.8
3.5.9
4.0.0
4.0.0-alpha.1
4.0.0-alpha.10
4.0.0-alpha.11
4.0.0-alpha.12
4.0.0-alpha.13
4.0.0-alpha.14
4.0.0-alpha.15
4.0.0-alpha.16
4.0.0-alpha.17
4.0.0-alpha.18
4.0.0-alpha.19
4.0.0-alpha.2
4.0.0-alpha.20
4.0.0-alpha.21
4.0.0-alpha.22
4.0.0-alpha.23
4.0.0-alpha.24
4.0.0-alpha.25
4.0.0-alpha.26
4.0.0-alpha.27
4.0.0-alpha.28
4.0.0-alpha.29
4.0.0-alpha.3
4.0.0-alpha.30
4.0.0-alpha.31
4.0.0-alpha.32
4.0.0-alpha.33
4.0.0-alpha.34
4.0.0-alpha.35
4.0.0-alpha.36
4.0.0-alpha.37
4.0.0-alpha.38
4.0.0-alpha.39
4.0.0-alpha.4
4.0.0-alpha.40
4.0.0-alpha.41
4.0.0-alpha.42
4.0.0-alpha.43
4.0.0-alpha.44
4.0.0-alpha.45
4.0.0-alpha.46
4.0.0-alpha.47
4.0.0-alpha.48
4.0.0-alpha.49
4.0.0-alpha.5
4.0.0-alpha.50
4.0.0-alpha.6
4.0.0-alpha.7
4.0.0-alpha.9
4.0.0-rc.1
4.0.0-rc.2
4.1.0
4.1.1
4.10.0
4.10.1
4.10.2
4.11.0
4.12.0
4.12.1
4.12.2
4.13.0
4.2.0
4.2.1
4.2.2
4.2.3
4.2.4
4.2.5
4.2.6
4.2.7
4.2.8
4.3.0
4.4.0
4.4.1
4.4.2
4.4.3
4.4.4
4.5.0
4.5.1
4.6.0
4.7.0
4.7.1
4.7.2
4.7.3
4.7.4
4.8.0
4.9.0
4.9.1
5.0.0
5.0.0-rc.1
5.0.0-rc.2
5.0.0-rc.3
5.0.0-rc.4
5.0.1
5.0.2
5.1.0
5.10.0
5.10.1
5.11.0
5.12.0
5.13.0
5.13.1
5.14.0
5.14.1
5.14.2
5.15.0
5.15.1
5.16.0
5.2.0
5.3.0
5.4.0
5.5.0
5.6.0
5.7.0
5.8.0
5.8.1
5.8.2
5.9.0
5.9.1
5.9.2
5.9.3
5.9.4
5.9.5
5.9.6
5.9.7
6.0.0
6.0.0-rc.1
6.0.0-rc.2
6.0.0-rc.3
6.0.0-rc.4
6.1.0
6.1.1
6.2.0
6.3.0
6.3.1
6.4.0
6.5.0
6.6.0
6.6.1
6.6.2
6.7.0
7.0.0
7.0.1
7.0.2
7.0.3
7.0.4
7.1.0
7.1.1
7.2.0
7.2.1
7.3.0
7.4.0
7.4.1
7.4.2
7.4.3
7.4.4
7.4.5
7.5.0
7.6.0
7.6.1
7.7.0
7.8.0
7.8.1
7.8.2
7.8.3
7.8.4
7.8.5
*** 7.9.0