JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JS D3.js
D3.js is a JavaScript library for manipulating HTML data.
D3.js is easy to use.
How to Use D3.js?
Use D3.js on your web page, and add a link to the library:
<script src=”//d3js.org/d3.v3.min.js”></script>
This script selects the body element and appends a paragraph with the text “Hello World!”:
Example
<!DOCTYPE html>
<html>
<script src=”//d3js.org/d3.v4.js”></script>
<body>
<h2>D3.js is Easy to Use</h2>
<p>The script below selects the body element and appends a paragraph with the text “Hello World!”:</p>
<script>
d3.select(“body”).append(“p”).text(“Hello World!”);
</script>
</body>
</html>
Output
D3.js is Easy to Use
The script below selects the body element and appends a paragraph with the text "Hello World!":
Hello World!
Scatter Plot
Example
<!DOCTYPE html>
<html>
<script src=”https://d3js.org/d3.v4.js”></script>
<body>
<h2>D3.js Scatter-Plot</h2>
<svg id=”myPlot” style=”width:500px;height:500px”></svg>
<script>
// Set Dimensions
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize – margin*2;
const yMax = ySize – margin*2;
// Create Random Points
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
data.push([Math.random() * xMax, Math.random() * yMax]);
}
// Append SVG Object to the Page
const svg = d3.select(“#myPlot”)
.append(“svg”)
.append(“g”)
.attr(“transform”,”translate(” + margin + “,” + margin + “)”);
// X Axis
const x = d3.scaleLinear()
.domain([0, 500])
.range([0, xMax]);
svg.append(“g”)
.attr(“transform”, “translate(0,” + yMax + “)”)
.call(d3.axisBottom(x));
// Y Axis
const y = d3.scaleLinear()
.domain([0, 500])
.range([ yMax, 0]);
svg.append(“g”)
.call(d3.axisLeft(y));
// Dots
svg.append(‘g’)
.selectAll(“dot”)
.data(data).enter()
.append(“circle”)
.attr(“cx”, function (d) { return d[0] } )
.attr(“cy”, function (d) { return d[1] } )
.attr(“r”, 3)
.style(“fill”, “Red”);
</script>
</body>
</html>
Output