-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPCP_Jazz.html
68 lines (61 loc) · 1.92 KB
/
PCP_Jazz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jazz Network Parallel Coordinates Plot</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div id="parallel-coordinates-plot"></div>
<script>
// Function to read and parse .net file
function loadNetFile(filePath) {
return new Promise((resolve, reject) => {
d3.text(filePath).then(data => {
const lines = data.split('\n');
const edgesData = [];
// Parse edges starting from line 3 onward
for (let i = 3; i < lines.length; i++) {
const line = lines[i].trim();
if (line) {
const parts = line.split(/\s+/);
if (parts.length === 3) {
const node1 = parseInt(parts[0]);
const node2 = parseInt(parts[1]);
const weight = parseInt(parts[2]);
edgesData.push({ Node1: node1, Node2: node2, Weight: weight });
}
}
}
resolve(edgesData);
}).catch(error => reject(error));
});
}
// Load and plot the data
//Change the dataset file path as per your local setup
loadNetFile("./Datasets/jazz.net").then(edgesData => {
const plotData = [{
type: 'parcoords',
line: {
color: edgesData.map(d => d.Weight),
colorscale: 'Viridis',
showscale: true
},
dimensions: [
{ label: 'Musician 1', values: edgesData.map(d => d.Node1) },
{ label: 'Musician 2', values: edgesData.map(d => d.Node2) },
{ label: 'Connection Strength', values: edgesData.map(d => d.Weight) }
]
}];
const layout = {
title: "Jazz Network Parallel Coordinates Plot",
width: 1500,
height: 750
};
Plotly.newPlot('parallel-coordinates-plot', plotData, layout);
}).catch(error => console.error("Error loading .net file:", error));
</script>
</body>
</html>