index.js
import {
csv,
select,
forceSimulation,
forceManyBody,
forceLink,
forceCenter,
drag,
forceCollide,
} from 'd3';
const width = window.innerWidth;
const height = window.innerHeight;
const centerX = width / 2;
const centerY = height / 2;
const svg = select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
const parseRowNode = (d) => {
//add filter here?
return d;
};
const parseRowLinks = (d) => {
//add filter here?
return d;
};
const main = async () => {
const [nodes, links] = await Promise.all([
csv('applications.csv', parseRowNode),
csv('interf.csv', parseRowLinks),
]);
Creating a force-directed graph, based on data of two csv-files.
Sources: - Scatter Plot: https://www.youtube.com/watch?v=xkBheRZTkaw&t=37528s
- force-directed graph: https://www.youtube.com/watch?v=y7DxbW9nwmo
- documentation: https://github.com/d3/d3-force
- Accessor with named sources and targets: https://github.com/d3/d3-force#link_id
Text, Color, Drag: https://youtu.be/y7DxbW9nwmo?t=1696
Filter:
open issues:
- count number of links -> change force (number of links > 1 -> push appart / number of links < 1 -> force together)
- add arrows to links
- change interf.csv (wrong source data for filters)
- add filter options
MIT Licensed