Skip to content

Instantly share code, notes, and snippets.

@Na0ki

Na0ki/index.html

Created April 1, 2025 23:31
Show Gist options
  • Save Na0ki/c4e2509274f7dc9a53a38b4ee637b5e0 to your computer and use it in GitHub Desktop.
Save Na0ki/c4e2509274f7dc9a53a38b4ee637b5e0 to your computer and use it in GitHub Desktop.
Download ZIP
visjs使ったネットワークグラフのお試し
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill Graph</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" defer></script>
<script src="./index.js" defer></script>
<style type="text/css">
#language_graph, #framework_graph, #skill_graph {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h1>Web Skill Graph</h1>
<div id="skill_graph"></div>
<div id="framework_graph"></div>
<div id="language_graph"></div>
</body>
</html>
Raw
index.js
const assets = [
{ name: 'フロントエンド', to: ['バックエンド'], group: 'root', shape: 'box' },
{ name: 'バックエンド', to: ['インフラ'], group: 'root', shape: 'box' },
{ name: 'インフラ', to: [], group: 'root', shape: 'box' },
{ name: 'HTML', to: ['フロントエンド'], group: 'frontend'},
{ name: 'CSS', to: ['フロントエンド'], group: 'frontend'},
{ name: 'JavaScript', to: ['フロントエンド'], group: 'language'},
{ name: 'TypeScript', to: ['フロントエンド'], group: 'language'},
{ name: 'React', to: ['フロントエンド'], group: 'frontend' },
{ name: 'Angular', to: ['フロントエンド'], group: 'frontend' },
{ name: 'Vue', to: ['フロントエンド'], group: 'frontend' },
{ name: 'Next.js', to: ['React'], group: 'frontend' },
{ name: 'Nuxt.js', to: ['Vue'], group: 'frontend' },
{ name: 'ウェブサーバー', to: ['バックエンド'], group: 'backend' },
{ name: 'apache', to: ['ウェブサーバー'], group: 'backend' },
{ name: 'nginx', to: ['ウェブサーバー'], group: 'backend' },
{ name: 'caddy', to: ['ウェブサーバー'], group: 'backend' },
{ name: 'アプリケーションサーバー', to: ['バックエンド'], group: 'backend' },
{ name: 'Rails', to: ['アプリケーションサーバー'], group: 'backend' },
{ name: 'Express.js', to: ['アプリケーションサーバー'], group: 'backend' },
{ name: 'Actix Web', to: ['アプリケーションサーバー'], group: 'backend' },
{ name: 'クラウド', to: ['インフラ'], group: 'infra' },
{ name: 'ネットワーク', to: ['インフラ'], group: 'infra' },
{ name: 'ストレージ', to: ['インフラ'], group: 'infra' },
{ name: 'IAM', to: ['インフラ'], group: 'infra' },
{ name: 'OS', to: ['インフラ'], group: 'infra' },
{ name: 'AWS', to: ['クラウド'], group: 'infra' },
{ name: 'Google Cloud', to: ['クラウド'], group: 'infra' },
{ name: 'Azure', to: ['クラウド'], group: 'infra' },
{ name: 'Linux', to: ['OS'], group: 'infra'},
{ name: 'Windows Server', to: ['OS'], group: 'infra'},
];
function draw() {
const assetsWithId = assets.map(({name, ...rest}, idx) => {
console.log(rest);
return {
id: idx + 1,
label: name,
...rest,
};
});
const relations =
assetsWithId.filter(asset => asset.to && asset.to.length > 0)
.map(asset => {
return asset.to
.map(to => assetsWithId.find(a => a.label === to)?.id)
.filter(Boolean)
.map(id => ({ from: asset.id, to: id}));
})
.flat();
const nodes = assetsWithId.map(({to, ...rest}) => ({ ...rest }));
const edges = relations;
// create a network
const container = document.getElementById("skill_graph");
const data = {
nodes: nodes,
edges: edges,
};
const options = {
nodes: {
shape: "dot",
size: 16,
},
edges: {
arrows: 'to',
},
};
const network = new vis.Network(container, data, options);
}
window.addEventListener("load", () => {
draw();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment