D3.js is a tool in JavaScript that helps to handle information in HTML.
D3.js is simple to utilize.
To include D3.js on your webpage, simplyadd a link to the library.
<script src="//d3js.org/d3.v3.min.js"></script>
This code picks the body part of a webpage and adds a new paragraph containing the words "Hello World!" to it.
<!DOCTYPE html>
<html>
<script src="//d3js.org/d3.v4.js"></script>
<body>
<h2>D3.js is Easy to Use</h2>
<p>The code snippet below chooses the body element and adds a paragraph with the text "Hello World!":</p>
<script>
d3.select("body").append("p").text("Hello World!");
</script>
</body>
</html>
<!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>
HTML
CSS
Javascript
Jquery