डी3.जेएस
D3.js डेटा के आधार पर HTML में हेरफेर करने के लिए एक जावास्क्रिप्ट लाइब्रेरी है।
D3.js का उपयोग कैसे करें?
अपने वेब पेज में D3.js का उपयोग करने के लिए, लाइब्रेरी में एक लिंक जोड़ें :
<script src="//d3js.org/d3.v3.min.js"></script>
D3.js का उपयोग करना आसान है।
यह स्क्रिप्ट बॉडी एलिमेंट का चयन करती है और "हैलो वर्ल्ड!" टेक्स्ट के साथ एक पैराग्राफ जोड़ती है:
d3.select("body").append("p").text("Hello World!");
स्कैटर प्लॉट
उदाहरण
// 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");