Philosophy Arc Diagram D3

by angjelinhila

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Load color palette -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<style>
#my_dataviz {        width: 100vh;        height: 100vh;        display: flex;        align-items: center;    }

</style>


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

<script>

// set the dimensions and margins of the graph
var margin = {top: 40, right: 60, bottom: 50, left: 200},
  width =  900 - margin.left - margin.right,
  height = 900 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg").attr("viewBox", `0 0 900 900`)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Read dummy data
d3.json("https://gist.githubusercontent.com/Seldomtimely/9d3fd76c26fc10750f2513a1d9c84df6/raw/824d915b96db09f699e3691aabf9e0dff57f9916/PhilosophyConceptMap.JSON", function( data) {

  // List of node namesid
  var allNodes = data.nodes.map(function(d){return d.name})

  // List of groups
 var allGroups = data.nodes.map(function(d){return d.group})
 allGroups = [...new Set(allGroups)]
 
 console.log(allGroups);

  // A color scale for groups:
  var color = d3.scaleOrdinal()
    .domain(allGroups)
    .range(d3.schemePaired);

  // A linear scale for node size
  var size = d3.scaleLinear()
    .domain([10,1])
    .range([10,2]);

  // A linear scale to position the nodes on the X axis
  var y = d3.scalePoint()
    .range([0, height])
    .domain(allNodes)

  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  var idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.name] = n;
  });

 ...