d3js OP

by Marc Malignan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.0/d3.min.js"></script>
<div id="chart" />

CSS

body {
  background: #222;
}

#chart {
  background: #444;
}

JavaScript

const width = 800;
const height = 600;
const nodeSize = 10;
const linkSize = 40;
const spacing = 5;

const GROUPS = {
	strawhats: { id: 1, label: 'Strawhat Pirates' },
  whitebeard: { id: 2, label: 'Whitebeard Pirates' }
};

const LINKS = {
	crewmate: { length: 1, label: 'Crewmates' },
  sibling: { length: 3, label: 'Siblings' },
  friend: { length: 5, label: 'Friends' },
  other: { length: 10 }
};

const data = {
	nodes: [
  	{ id: 'luffy', name: 'Monkey D. Luffy', group: GROUPS.strawhats },
    { id: 'zorro', name: 'Roronoa Zorro', group: GROUPS.strawhats },
    { id: 'nami', name: 'Nami', group: GROUPS.strawhats },
    { id: 'usopp', name: 'Usopp', group: GROUPS.strawhats },
    { id: 'sanji', name: 'Vinsmoke Sanji', group: GROUPS.strawhats },
    { id: 'chopper', name: 'Tony Tony Chopper', group: GROUPS.strawhats },
    { id: 'robin', name: 'Nico Robin', group: GROUPS.strawhats },
    { id: 'franky', name: 'Franky', group: GROUPS.strawhats },
    { id: 'brook', name: 'Brook', group: GROUPS.strawhats },
    { id: 'jinbe', name: 'Jinbe', group: GROUPS.strawhats },
    { id: 'vivi', name: 'Nefertari Vivi' },
    { id: 'ace', name: 'Portgas D. Ace', group: GROUPS.whitebeard },
    { id: 'whitebeard', name: 'Edward Newgate', group: GROUPS.whitebeard },
    { id: 'marco', name: 'Marco', group: GROUPS.whitebeard },
    { id: 'sabo', name: 'Sabo' },
  ],
  links: [
  	{ source: 'zorro', target: 'luffy', data: LINKS.crewmate },
    { source: 'nami', target: 'luffy', data: LINKS.crewmate },
    { source: 'usopp', target: 'luffy', data: LINKS.crewmate },
    { source: 'sanji', target: 'luffy', data: LINKS.crewmate },
    { source: 'chopper', target: 'luffy', data: LINKS.crewmate },
    { source: 'robin', target: 'luffy', data: LINKS.crewmate },
    { source: 'franky', target: 'luffy', data: LINKS.crewmate },
    { source: 'brook', target: 'luffy', data: LINKS.crewmate },
    { source: 'jinbe', target: 'luffy', data: LINKS.crewmate },
    { source: 'vivi', target:...