JS D3.js

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

D3.js Scatter-Plot