Most basic network chart in d3.js

This post describes how to build a very basic network chart with d3.js. You can see many other examples in the network graph section of the gallery. Learn more about network charts in d3.js here.

Network section


  • First of all, it is important to understand that network input data is composed by a list of nodes and a list of links. Have a look to the data.

  • After the d3.csv() call, you can do console.log(data.links) to check how the data looks like.

  • In the links part, elements must be called source and target to be recognized by d3
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = 400 - margin.left - margin.right,
  height = 400 - - margin.bottom;

// append the svg object to the body of the page
var svg ="#my_dataviz")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + + margin.bottom)
        "translate(" + margin.left + "," + + ")");

d3.json("", function( data) {

  // Initialize the links
  var link = svg
      .style("stroke", "#aaa")

  // Initialize the nodes
  var node = svg
      .attr("r", 20)
      .style("fill", "#69b3a2")

  // Let's list the force we wanna apply on the network
  var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);

  // This function is run at each iteration of the force algorithm, updating the nodes position.
  function ticked() {
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return; })
        .attr("y2", function(d) { return; });

         .attr("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });



Related blocks →